I created a react app via npx create-react-app my-app and got several compile errors about module support.
I know webpack5 does not support some modules automatically, so I added them manually into the resolve.fallback in webpack.config.js.
While I don't get any more compile errors, I do get another error:
Buffer is not defined
on the browser.
I want to know how to fix it. InAngular, we can edit polyfills.ts like this:
global.Buffer = global.Buffer || require('buffer').Buffer;
But it is not working in React.
I had a similar and I solved it by adding the following to your index.js you will fix the buffer issue:
import * as buffer from 'buffer';
window.Buffer = buffer.Buffer;
This link references was where I found the solution.
https://github.com/isaacs/core-util-is/issues/27#issuecomment-878969583
Related
In a React project, I am trying to run the app on a live server in the web browser. However when I command CD Ravenous to go to the right file and npm start, the browser gives me the following error:
./src/index.js
Module not found: Can't resolve './App' in '/Users/mauricemarkslag/ravenous/src'
I've checked if the imports have been filled in correctly, and that should be the case now I guess. However the error doesn't seem to be fixed with this code:
Code file
Folder structure
Does anybody know what I might do wrong?
You have a typo, you should use ./app.css instead of ./App.css, and I am assuming that the file that you put in your question is app.js.
I'm trying to locally build the oodt_fm_plugin NPM package and link it locally to the oodt_opsui_sample_app. However, when I'm trying to do that, the following error is thrown in the browser.
Error: Minified React error #321; visit
https://reactjs.org/docs/error-decoder.html?invariant=321 for the full
message or use the non-minified dev environment for full errors and
additional helpful warnings.
The error goes away if I remove the withStyles HOC from the components in oodt_fm_plugin, but I want to preserve it for the material UI styles.
React components in the oodt_fm_plugin have been exported as follows. ( This plugin can be viewed at https://github.com/apache/oodt/tree/development/react-components/oodt_fm_plugin. )
export default withStyles(styles)(Product);
What I tried to overcome this are as follows, but none of those solved the issue.
Making react and react-dom packages in the plugin, dev dependencies
Adding the following snippet to the webpack.config.js of the plugin.
resolve: {
modules: [path.resolve('node_modules'), 'node_modules'],
},
Can someone point me in the right direction so that I can set up both oodt_fm_plugin and oodt_ui_sample_app correctly in local dev environment? Helpful advice is highly appreciated.
Well, I finally managed to solve the problem, after trying for several days. As I found out, it was not a problem with material ui, but with the Create React App. This Github issue comment helped me to solve my problem.
For extra clarity, I will quote the issue comment in this answer itself, so that it will remain here even if the comment gets deleted.
^ Ok, the solution I went for to solve this for create-react-app is to
use react-app-rewired and customize-cra.
Here is my config-overrides.js :
const {
override,
addWebpackAlias, } = require("customize-cra");
const path = require('path');
module.exports = override(
addWebpackAlias({
react: path.resolve('./node_modules/react')
}) )
Example project: https://github.com/dwjohnston/material-ui-hooks-issue/tree/master
Then, modify the start script as follows.
"start": "react-app-rewired start"
I'm following using this codesandbox as a guide with my React project and receiving this error:
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax'
Assuming I copied everything from that sandbox to my local files, why am I getting that error?
I'm using Create-react-app btw.
animation.gsap.js requires TimelineMax module so try importing 'TimelineMax' module
import { TimelineMax} from 'gsap/src/uncompressed/TweenMax.js';
also you can refer to github solution
I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}
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'