Hi
Until recently we have been working on node v16 and react-scripts v4. Our pipelines have migrated to v20 and we were forced to migrate. Due to our internal application framework limitations, our app cannot have more the one chunk.
We had the following problems
- limiting chunks to one
- skipping the limitation that all modules being imported need to have an file extension, like for example
// Earlier it was
import add from "./add"
// Now the expected is
import add from "./add.js"
After googling and stack overflow, found that we could modify the web pack config without eject, using craco.
npm i -D @craco/craco
Respective config file is, which solve the above problems is
const webpack = require("webpack");
module.exports = {
webpack: {
plugins: {
add: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
],
skipEnvChecks: true,
skipEnvCheck: true,
},
configure: {
module: {
rules: [
{
test: /\.m?js$/,
resolve: {
fullySpecified: false,
},
},
],
},
},
},
};
Respective package.json changes are
"scripts": {
- "start": "react-scripts start"
+ "start": "craco start"
- "build": "react-scripts build"
+ "build": "craco build"
- "test:build": "craco build"
+. "test:build": "cross-env-shell NODE_ENV=test craco build"
- "test": "react-scripts test"
+ "test": "craco test"
}
All was good, then came the next issue. Building for test enviroment. When I tried for it I have faced the following issue
Error: [BABEL] /Users/srikanthkyatham/Projects/ajv/appointmentclerkapp/app/appointmentclerkapp-frontend/js/src/index.tsx: React Refresh Babel transform should only be enabled in development environment. Instead, the environment is: "production". If you want to override this check, pass {skipEnvCheck: true} as plugin options. (While processing: "/Users/srikanthkyatham/Projects/ajv/appointmentclerkapp/app/appointmentclerkapp-frontend/js/node_modules/react-refresh/babel.js")
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
at cachedFunction.next (<anonymous>)
at loadPluginDescriptor.next (<anonymous>)
at loadPluginDescriptors.next (<anonymous>)
at Generator.next (<anonymous>)
at loadFullConfig.next (<anonymous>)
at transform.next (<anonymous>)
Solution for that is add env variable FAST_REFRESH=false
"scripts": {
"test:build": "cross-env-shell NODE_ENV=test FAST_REFRESH=false craco build"
}
Top comments (0)