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
Related
cross post from github
I have two UI components library. One of them (#ikas/components) library does not have any issue but the other (same config) throw this error. Can anyone have any idea?
When i comment inhouse-components it is work. but when i open it it crash... any idea?
I try to external,
Also try add import React from "react" to tsx files. but there error is still there.
I am expecting the #ikas/inhouse-components is should also work as well as #ikas/components
I also control the dist (output folder) .d.ts and show React import different but I don't know if it's relevant
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.
Maybe this question has already been asked, but I wasn't able to find anything regarding the matter.
I'm currently trying to build a simple website using firebase in combination with React. I'm using vscode as my IDE. While the process of building the site itself is going quite well, I'm still having some issues getting used to vscode's code suggestions.
'use strict';
import ReactDOM from 'react-dom';
let element = <h1>Hello world test</h1>;
ReactDOM.render(
element,
document.querySelector('#root')
);
In my file app.jsx I'm calling the method ReactDOM.render(...). Here is where my issue comes into play. When I specifically import the class ReactDOM (import ReactDOM from 'react-dom';), my code suggestions work as expected. All available methods with their arguments are suggested, etc. Unfortunatly though, my browser does not like those import statements and throws an error. I am aware that I can use tools like webpack or browserify to solve this issue, but since the ReactDOM-class is available without the import anyways, I don't really see the imminent need to use those tools.
I was just wondering whether I could configrue vscode to just suggest these classes and their methods without explicitly importing them. Thanks for the help!
(In case this was unclear, here's what I want to happen, but without importing ReactDOM:
I am switching to React from SwiftUI, where I am expecting auto import of components which should be default in VSCode, According to my research. Unfortunately when I type the components, VSCode is not suggesting me the components. I have to manually type the component name also manually import the components, which is very slow and require too much effort.
How can I get auto completion of components and auto import in VSCode 1.57.0?
I had exactly the same issue with version 1.57.
Adding "security.workspace.trust.enabled": false to settings.json resolved the issue for me.
You can use a vscode extension.
I recommend to use Reactjs code snippets extension.
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