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.
Related
I created an codepen with react code and I'm importing its libraries trough CDN.
Now I want to implement this code (working) into my react project.
But first It could be handy to put all code into a react sandbox so I can make changes before deploying to my code.
I tried to copy paste all code into a sandbox and add all libraries (react, react-dnd, reactdndhtml5backend, react-dom), but it still gives me a lot of errors.
Also the files in my own project are .tsx and not .js.
My current codepen is found here: https://codepen.io/darkinfore/pen/daJxyP
This works, but just not when I implement this into a react sandbox.
I also tried to implement this into a react sandbox: https://codesandbox.io/s/w01l077w1w
But as you can see it gives me some strange errors.
Can someone help me with converting this codepen into a react sandbox without errors?
I looked over your codesandbox and then forked it here. Actually, the only error encountered had to do with ReactDnD not being defined (such that DropTarget could not be found). This was due to your import statement near the top of index.js:
import ReactDnD from "react-dnd";
Because of the way the react-dnd package is designed, this way of importing will not work for you. The package has multiple exports (for example, DragDropContext and DropTarget) rather than a single, default export. You need to take all of these exports and import them together into a single named import, called ReactDnD. So, what you need to do is:
import * as ReactDnD from "react-dnd";
I did this in the forked codesandbox, and this got you past the TypeError and then displayed your table.
Helpful information:
Different ways to use import
Exported modules from react-dnd package
In my create react app project I'm running into the following error in my production build (not in my dev build):
Uncaught TypeError: (0 , o.default) is not a function
at Object.e.f.(:4444/anonymous function)...
I've been investigating this bug for a couple of hours but struggle to find out how to debug this uglified piece of js.
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
What does that o.default mean in this case? Any tips for figuring out what's going wrong here?
It seems to be import statement somewhere in your file is incorrect.
Example: (from an issue)
// fails
import combineReducers from "redux"
// correct
import { combineReducers } from "redux"
What makes it tough is that the error returns o.default and not SomeLibrary.default so I don't really know where to start my search really...
There's nothing but exported in some library just as o. Example default export:
export default {
o: something
}
For those who tried the solution above and still cannot solve this problem, you might be importing the library successfully and then using the library in a function that is located in the same file.
But, if you export that file and import it to another file, that is where you might be having a problem.
Simply import your already exported file as -
import {myComponent} from "/util/http"
instead of -
import myComponent from "/util/http"
Hope that helps.
If this is happening for anyone with Auth.signIn using aws-amplify, please try the below update for aws-amplify. This worked as a permanent fix and didn't break any of my current code.
sudo npx npm-check-updates -i '/#?aws-amplify/' && npm update --force
Just in case it helps someone, in my case I was using React component inside a JS file which caused this error.
I'm trying to use React-Leaflet-Draw to add polygons to a mapping project I'm working on. Coming unstuck on the use of EditControls.
I imported Edit control as per the example
import { EditControl } from '../src';
With an index.js file in src folder with:
export EditControl from './EditControl';
I added some code to do some different things to the example but it still ran fine (in the example version).
When I tried to run this on another project, using the same code I get the error:
Syntax error: Unexpected token, expected {
From the index.js file, using the same export command. Has anyone else encountered this problem? Any thoughts on why it might be happening?
Thanks
You need to install 'leaflet-draw'
npm install 'leaflet-draw'
Im sure this is something simple but for the life of me i can't seem to find an answer to my problem.
Basically Im using react and webpack and I've installed a new package (in this case braintree-web-drop-in), however the package is always appearing as null (undefined) when i import it into my react module and just try to log it out at the top of the module (or anywhere)
package.json:
"dependencies": {
"braintree-web": "^3.32.0",
"braintree-web-drop-in": "^1.10.0",
ReactModel.tsx
import brainTree from 'braintree-web-drop-in'
console.log(brainTree);
I can also see that the package seems to have been added to my generated js file through webpack.
Any help would be appreciated!
Thanks,
James
To me it looks like this module doesn't have a default export (which the import syntax will use if no named export is asked for).
https://github.com/braintree/braintree-web-drop-in/blob/master/src/index.js#L534
So, in order to see if the module is installed, try this:
import { VERSION } from 'braintree-web-drop-in';
console.log('brain tree version: ', VERSION);
If that works you can use the create with a named import:
import { create} from 'braintree-web-drop-in';
I try to implement slatejs package to my react app for creacting my custom editor,it works great,but hot-reloading stops working.
it stops when I do import into some component.I use webpack-dev-server+react-hot-loader
Firstly I supposed that the reason was my custom app settings ,but it didn't work for https://github.com/facebookincubator/create-react-app
and for https://github.com/davezuko/react-redux-starter-kit too
As I can understand slatejs package uses browserify,maybe this is the reason,but it shouldn't have an effect cause it's just a package and webpack settings for react-hot-loader exclude node_modules
Thank you!
I solved this issue,I don't know why but it helped.
const { Editor, Raw } = require('slate') // this import works with live-reload
import { Editor, Raw } from 'slate' // this import doesn't work with live-reload