I want to use web3.js together with my web page but the require function is not working for me. I have tried using browserify , importing instead of declaring as const but none worked, one problem solution lead to another problem. I tried to bundle these but web3 module has also some js inside which uses import statement so I am getting error to bundle them as well.
issue while using web3js with require
simple js code
issue while using web3js with import
simple js code
The import you wrote is wrong. Here are a few examples:
import {
Keypair,
AccountMeta,
Connection,
PublicKey,
Transaction,
TransactionInstruction,
sendAndConfirmTransaction,
} from "#solana/web3.js";
Or
import web3 = require('#solana/web3.js');
Related
Im trying to store my nft metadata to ipfs using nft.storage (Reactjs)
When I import the library as explained in their docs I get this error
enter image description here
I read a similar error online for web3storage library and that it is probably a webpack version issue, but there is no solution. Any ideas?
This is how I am importing it:
import { NFTStorage, File } from 'nft.storage'
Exactly as shown in the docs.
Since there's insufficient info on how to deal with this out of the box, this is how I resolved it. It worked fine.
Go to node_modules/nft.storage directory.
Make sure you have ipfs-car/dist/esm/blockstore and ipfs-car/dist/esm/pack. If not, install ipfs-car with npm i ipfs-car. Copy ipfs-car/dist/esm to nft.storage/src.
Inside nft.storage/src, update the ipfs-car import statements in the following files like so:
Inside platform.web.js, update to this: import { MemoryBlockStore } from 'ipfs-car/dist/esm/blockstore/memory'
Inside lib.js, update to this: import { pack } from 'ipfs-car/dist/esm/pack'
Inside token.js, update to this: import { pack } from 'ipfs-car/dist/esm/pack'
This solved my problem.
Crude but works.
importing pack from built version should also work but crude as well...the package doesn't work at all without doing these, they should update it...I will send a pull request later on.
import { Web3Storage } from 'web3.storage/dist/bundle.esm.min.js'
I just upgraded Create React App to 5.0.0 (which upgrades to webpack 5) and it's working fine. Some relevant tips here.
I have a CRA and want to have the first page generated statically to improve load time and SEO. The idea is to run a NodeJS script that renders the App document inside index.html.
Here is my code:
const { renderToString } = require("react-dom/server");
const App = require('./App');
const content = `<html><body>${renderToString(App)}</body></html>`
const fs = require('fs');
fs.writeFileSync('../public/index.html', content);
However, I have problems running it with NodeJS:
import React from 'react';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Apparently, I have to build the source, but I don't know how to do it. I'm using CRA to build my React files (actually, I'm using react-app-rewired, so I could customize the build process if I only knew how to do it).
What should I do to make it work?
the error is from node: https://stackoverflow.com/a/59399717/13216797
I know it's not your question... but what about using Nextjs?
Even without a node environment you can use the "next export" command to make a bundle that will work as it would static files while still being react...
I ended up using puppeteer and just saving the generated client-side code. Before that I spent hours stubbing out first window, then window.location, then window.localStorage, window.document, window.document.createElement, it never ended. With puppeteer, it was pretty easy.
I am using a boilerplate Ignite Bowser and I am trying to add Knob Addon to storybook, but so far I cant make it to work.
On the story, I added a decorator like the following code:
storiesOf("Button", module)
.addDecorator(fn => {fn()})
.addDecorator(withKnobs)
However, when trying to add: "#storybook/addon-knobs/register" Im failing at it.
Some help would be nice.
Thanks
Project Overview
When running on React Native you need to install knobs from the on-device
Create a file named ./rn-addons.ts
Add the following import on the file:
import '#storybook/addon-ondevice-knobs/register'
Then in your file storybook.ts, you import that rn-addons:
import './rn-addons'
I need to import a npm package but failed when I use "import" statement
like this
import { cuteLuna } from 'lunacomponent';
and I got an error : cannot use import statement outside a module
after I change it to dynamic import, it works.
const cuteLuna = dynamic(() => import('lunacomponent').then((a) => a.cuteLuna), {ssr: false});
My question is, why should I use dynamic import instead of usual import?
thanks!!
Since Next.js is a framework that runs on server & client side it needs to consume the proper module styles for each.
Server side runs on Node, therefore your lib must expose a commonjs.
From your error I can guess that your lunacomponent lib is not exporting cjs files, therefore it fails on the server, when you use dynamic with ssr:false you tell Next.js to skip server-side run, therefore you don't have the same error.
I wasn't able to find this lunacomponent lib on the public npm registry, therefore I can't check my assumption.
I'm trying to find a client-side computer-vision library that plays nicely with React. I've tried tracking.js and js-objectdetect but I can't import them into a standard React component without major efforts that are beyond my skills.
The problem with both these awesome libraries is that they are written as IIFE with no export statements e.g.
(function(){...})()
They are supposed to be imported as <script src = 'etc'> so I can't seem to just import them as normal and follow the API without getting
TypeError: foo.bah is not a constructor
I tried adding my own export statements but a can of worms exploded out of it!
Can anyone suggest a better approach?
If you are using webpack you can try exports-loader to allow you using import syntax.
Here is some more info.
Here is a working implementation of tracking.js with React (using create-react-app)
https://github.com/howardkitto/react-tracking
The solution was provided by https://github.com/gaearon, here... https://github.com/facebookincubator/create-react-app/issues/2958