DEV Community

Srikanth Kyatham
Srikanth Kyatham

Posted on

Migrating to Create react app v5, single bundle with craco and fast-refresh disable

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

  1. limiting chunks to one
  2. 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"

Enter fullscreen mode Exit fullscreen mode

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,
            },
          },
        ],
      },
    },
  },
};

Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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>)
Enter fullscreen mode Exit fullscreen mode

Solution for that is add env variable FAST_REFRESH=false

"scripts": {
  "test:build": "cross-env-shell NODE_ENV=test FAST_REFRESH=false craco build"
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)