I receive this errors from react and redux when I tried to deploy my test app. But these errors don't appear on my local machine.
But then I realized that my local machine is not using the minified version of the bundle (but my deployed app is using the minified version), so I minified the bundle, then boom! the errors appeared. Any idea why this happens and how it can be fixed?
Thanks in advance for those who would help.
Okay I get it.
So when minified, react is looking for the process.env.NODE_ENV and checking whether it is set to production. there are two solutions for this:
Solution one
The easiest way of doing this (if you're using webpack, which is, I am) is to run webpack --define process.env.NODE_ENV='\"production\"' which will take care of it for you.
Solution two
is to add these on your plugins in your webpack.config.js file.
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
Related
I've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
Context
I have two projects, main and styles.
Main uses styles as an npm package, importing it as #companyname/styles.
I need to make changes to styles and want to link it locally to see these changes in main.
This is a react app, using Webpack and babel. Yarn is the favoured package manager.
Problem
Using npm link OR yarn link works in so far as I can go into the node_modules/#companyname/styles folder in main and see my changes in there.
However, no changes are reflected in the browser.
I only use one or the other (yarn/npm) at a time, but problem exists with either one
Things I've tried
Deleting node_modules, reinstalling and re-linking
Unlinking and re-linking
Rebuilding
Clearing npm cache, clearing yarn cache
Viewing site in incognito
Deleting dist folder in main and reinstalling
Adding CleanWebpackPlugin to my webpack config
Adding hot: true, to my devServer config in webpack config.
TL;DR
Yarn/npm link not showing my changes in browser, however will show changes in node_modules. Something causing browser to not read changes. Please help.
Have you tried deleting the lock file?
rm package-lock.json
npm clean-install
the cause is in webpack configuration. It took me days to find the perfect combination for symlink packages.
In my case, my project was a Vue app.
So here's a summary of my findings for people from the future (for Webpack 5):
const path = require('path');
module.exports = {
resolve: {
symlinks: false // Important so that symlink packages are resolved to their symlinked location
// If your package contains frontend framework components, prevent two instances of the framework (React for example), one from the app and the other one from the symlink package
// Kudos to https://stackoverflow.com/a/68497876/11840890
alias: {
react: path.resolve('./node_modules/react'),
'#': path.resolve(__dirname, './src') // Add this alias if you get a new issue after setting up the first one
}
},
snapshot: {
// Even though added changes on the symlink package may trigger rebuild, they might not be seen on the browser (using HMR or not)
// To prevent reloading dev server every time, add this (it will include only node_modules but your package in the cache):
managedPaths: [
/^(.+?[\\/]node_modules[\\/](?!(#author[\\/]your-package))(#.+?[\\/])?.+?)[\\/]/,
],
},
}
I have a big project which I was trying to reduce in size using webpack-p according to here: https://hackernoon.com/reduce-webpack-bundle-size-for-production-880bb6b2c72f
I could not run it as I was encountering problems when running webpack -p (it threw an error on every function of index.js
I thought it might be something with my packages. I decided to create new create-react-app and run the command there. To my surprise, there I get the same error:
What might be the problem here?
If your app uses webpack v4 you must use webpack --mode=production instead of webpack -p.
Possible values for mode are: none, development or production.
Another usage:
// webpack.config.js
module.exports = {
...
mode: 'production',
...
}
You don't have a config file because the command you are trying to run is global, it is not getting from your current working directory. Run npm run build instead, which does that under the hood, but has a lot of other things created by the contributors of create-react-app.
You could pass a config file for the global webpack cli, but you don't have access for that in your folder since it is "not" available for your. npm run build also already applies a lot of optimizations for you.
We are having a big environment where we have several applications under the same domain eg:
foo.org/a
foo.org/b
We have set up IIS to act in the same way on localhost, so we can type:
localhost/a
localhost/b
to reach the applications. The setup is done so to avoid CORS problems.
We are now trying to create a new application with "create-react-app" (https://github.com/facebook/create-react-app).
To add relative paths when you build for production is no problem, the problems occur when you try to run this with react-scripts start on localhost.
It seems it doesn't support relative paths so it always try to fetch build.js and other resources from /and there is not possible to set this without ejecting webpack.
So my question is, do you have any good ways of sorting this out? Ejecting webpack is not a good solution for us.
You can ejecting the config files by running: npm run eject
Then you'll find a config folder created in your project.
You will find your webpack config files init, where you should be able to change the "root" folder:
module.exports = {
...
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './'), // "root" folder
]
}
...
}
Edit: Oh sorry - didn't see that ejecting is no option for you... And unfortunately I don't know any other solution.
"homepage": "/subfolder/path", in package json file should help
So this is my task:
gulp.task('prod', function() {
browserify({entries: [
'resources/assets/js/app.js'
]})
.transform("babelify")
.transform(envify({
NODE_ENV: 'production'
}))
.bundle()
.pipe(source('all.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.on('error', gutil.log)
.pipe(gulp.dest('public/js/'));
});
yet the console still sais:
all.js:30 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See [url here that stack doesn't like] for more details.
So I am confused. Whats the deal?
When running build process, set NODE_ENV like this (linux):
NODE_ENV=production gulp build
Or (Windows)
SET NODE_ENV=production
gulp build
If you added build script to your package.json - you can run npm:
npm run --production build
Or you can try to modify your scrips:
...
.transform(envify({
'process.env.NODE_ENV': 'production'
}))
...
But this depends on what version of envify you are using
You should use minified react version for production bundles. Minifying by yourself react code is not a solution, because there are many conditions like: process.env.NODE_ENV !== 'production' in it.
You can take a look here:
We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.
So you should use react.min.js from /node_modules/react/dist instead of /node_modules/react/lib/React for production bundles.