Uncaught ReferenceError: require is not defined at ./node_modules/lodash-es/isPlainObject.js when updated RCA to 5.0.1 version

[FrozenPyrozen]

I've got error on running script craco start with yarn after updating "react-scripts" to "^5.0.1" Reproduced with craco ^6.4.3" and on ^7.0.0-alpha.7, node version :v16.13.1, yarn version 1.22.17

Uncaught ReferenceError: require is not defined
    at ./node_modules/lodash-es/isPlainObject.js (cloneDeep.js:29:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/formik/dist/formik.esm.js (index.js:17:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/Form/Form/index.tsx (index.tsx:1:1)
    at options.factory (react refresh:6:1)
    

package.json

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "ios:pods": "npx pod-install",
    "lint:all": "yarn lint:eslint && yarn lint:prettier && yarn lint:types",
    "lint:eslint": "eslint src/",
    "lint:eslint:fix": "eslint --fix src/",
    "lint:prettier": "prettier --check \"src/**/*.+(js|jsx|json|css|md)\"",
    "lint:prettier:fix": "prettier --write \"src/**/*.+(js|jsx|json|css|md)\"",
    "lint:types": "tsc",
    "package:install": "yarn && yarn ios:pods || true",
    "package:update": "yarn upgrade --latest && yarn add eslint@^7 react-scripts@^4 && cd ios && rm -f Podfile.lock && yarn ios:pods && pod update",
    "postinstall": "patch-package",
    "start": "react-native start",
    "test:all": "yarn test:jest src/__tests__",
    "test:jest": "jest",
    "web": "craco start",
    "web:build": "craco build",
    "prepare": "husky install",
    "test:e2e:ios": "platform=iOS jest --config e2e/jest.config.js",
    "test:e2e:android": "platform=Android jest --config e2e/jest.config.js",
    "test:e2e:web": "env -S 'platform=Web' jest --config e2e/jest.config.js"
  },
  "dependencies": {
    "@ethersproject/contracts": "^5.6.2",
    "@ethersproject/providers": "^5.6.8",
    "@ethersproject/solidity": "^5.6.1",
    "@ethersproject/units": "^5.6.1",
    "@react-native-async-storage/async-storage": "^1.17.6",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/material-top-tabs": "^6.2.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "@wagyu-swap/sdk": "https://github.com/kpogromskiy/wagyu-swap-sdk.git",
    "babel-plugin-react-native-web": "^0.17.7",
    "bn.js": "^5.2.1",
    "formik": "^2.2.9",
    "mobx": "^6.6.1",
    "mobx-react": "^7.5.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-native": "^0.68.2",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-pager-view": "^5.4.15",
    "react-native-safe-area-context": "^4.2.5",
    "react-native-screens": "^3.13.1",
    "react-native-svg": "^12.3.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "^0.17.7",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/runtime": "^7.17.2",
    "@craco/craco": "^7.0.0-alpha.7",
    "@react-native-community/eslint-config": "^3.0.1",
    "@types/bn.js": "^5.1.0",
    "@types/react-native": "^0.67.7",
    "@types/react-native-vector-icons": "^6.4.10",
    "@types/webfontloader": "^1.6.34",
    "@typescript-eslint/eslint-plugin": "^5.15.0",
    "@typescript-eslint/parser": "^5.15.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "chromedriver": "^105.0.0",
    "eslint": "^7",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.31.8",
    "husky": "^8.0.1",
    "jest-html-reporters": "^3.0.10",
    "metro-react-native-babel-preset": "^0.67.0",
    "patch-package": "^6.4.7",
    "pod-install": "^0.1.32",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.6.0",
    "react-scripts": "^5.0.1",
    "react-test-renderer": "^18.1.0",
    "selenidejs": "^1.3.6",
    "ts-jest": "^28.0.8",
    "typescript": "^4.6.2",
    "webdriverio": "^7.23.0"
  },
  "resolutions": {
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.2"
  },
  "overrides": {
    "@types/react": "^17.0.1",
    "@types/react-dom": "^17.0.2"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|@react-native|react-native-vector-icons)"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

craco.config.js

const {
  addBeforeLoader,
  loaderByName,
  when,
  whenDev,
  whenProd,
  whenTest,
  ESLINT_MODES,
  POSTCSS_MODES,
} = require('@craco/craco');

const path = require('path');

const resolvePath = p => path.resolve(__dirname, p);

module.exports = {
  // reactScriptsVersion: 'react-scripts' /* (default value) */,
  // style: {
  //   modules: {
  //     localIdentName: ''
  //   },
  //   css: {
  //     loaderOptions: {
  //       /* Any css-loader configuration options: https://github.com/webpack-contrib/css-loader. */
  //     },
  //     loaderOptions: (cssLoaderOptions, {env, paths}) => {
  //       return cssLoaderOptions;
  //     }
  //   },
  //   sass: {
  //     loaderOptions: {
  //       /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */
  //     },
  //     loaderOptions: (sassLoaderOptions, {env, paths}) => {
  //       return sassLoaderOptions;
  //     }
  //   },
  //   postcss: {
  //     mode: 'extends' /* (default value) */ || 'file',
  //     plugins: [require('plugin-to-append')], // Additional plugins given in an array are appended to existing config.
  //     plugins: (plugins) => [require('plugin-to-prepend')].concat(plugins), // Or you may use the function variant.
  //     env: {
  //       autoprefixer: {
  //         /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */
  //       },
  //       stage: 3 /* Any valid stages: https://cssdb.org/#staging-process. */,
  //       features: {
  //         /* Any CSS features: https://preset-env.cssdb.org/features. */
  //       }
  //     },
  //     loaderOptions: {
  //       /* Any postcss-loader configuration options: https://github.com/postcss/postcss-loader. */
  //     },
  //     loaderOptions: (postcssLoaderOptions, {env, paths}) => {
  //       return postcssLoaderOptions;
  //     }
  //   }
  // },

  // eslint: {
  //   enable: true /* (default value) */,
  //   mode: 'extends' /* (default value) */ || 'file',
  //   configure: {
  //     /* Any eslint configuration options: https://eslint.org/docs/user-guide/configuring */
  //   },
  //   configure: (eslintConfig, {env, paths}) => {
  //     return eslintConfig;
  //   },
  //   pluginOptions: {
  //     /* Any eslint plugin configuration options: https://github.com/webpack-contrib/eslint-webpack-plugin#options. */
  //   },
  //   pluginOptions: (eslintOptions, {env, paths}) => {
  //     return eslintOptions;
  //   }
  // },

  babel: {
    presets: [
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      [
        'module:metro-react-native-babel-preset',
        { useTransformReactJSXExperimental: true },
      ],
    ],

    plugins: [
      // https://necolas.github.io/react-native-web/docs/setup/#package-optimization
      'react-native-web',
      [
        // Enable new JSX Transform from React
        '@babel/plugin-transform-react-jsx',
        {
          runtime: 'automatic',
        },
      ],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      ['@babel/plugin-proposal-private-methods', { loose: true }],
      ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    ],
    loaderOptions: {
      /* Any babel-loader configuration options: https://github.com/babel/babel-loader. */
    },
    // loaderOptions: (babelLoaderOptions, {env, paths}) => {
    //   return babelLoaderOptions;
    // }
  },
  // typescript: {
  //   enableTypeChecking: true /* (default value)  */
  // },
  webpack: {
    alias: {
      '~src': resolvePath('./src'),
    },
    plugins: {
      add: [] /* An array of plugins */,
      add: [
        // plugin1,
        // [plugin2, 'append'],
        // [plugin3, 'prepend'] /* Specify if plugin should be appended or prepended */
      ] /* An array of plugins */,
      remove:
        [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    },
    configure: {
      /* Any webpack configuration options: https://webpack.js.org/configuration */
    },
    configure: (webpackConfig, { env, paths }) => {
      const imageLoader = {
        test: /\.(gif|jpe?g|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',
            esModule: false,
          },
        },
      };

      addBeforeLoader(webpackConfig, loaderByName('url-loader'), imageLoader);

      return webpackConfig;
    },
  },
  // jest: {
  //   babel: {
  //     addPresets: true /* (default value) */,
  //     addPlugins: true /* (default value) */
  //   },
  //   configure: {
  //     /* Any Jest configuration options: https://jestjs.io/docs/en/configuration. */
  //   },
  //   configure: (jestConfig, {env, paths, resolve, rootDir}) => {
  //     return jestConfig;
  //   }
  // },
  // devServer: {
  //   /* Any devServer configuration options: https://webpack.js.org/configuration/dev-server/#devserver. */
  // },
  // devServer: (devServerConfig, {env, paths, proxy, allowedHost}) => {
  //   return devServerConfig;
  // },
  plugins: [
    {
      plugin: {
        // overrideCracoConfig: ({cracoConfig, pluginOptions, context: {env, paths}}) => {
        //   return cracoConfig;
        // },
        overrideWebpackConfig: ({
          webpackConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          return webpackConfig;
        },
        // overrideDevServerConfig: ({
        //   devServerConfig,
        //   cracoConfig,
        //   pluginOptions,
        //   context: {env, paths, proxy, allowedHost}
        // }) => {
        //   return devServerConfig;
        // },
        // overrideJestConfig: ({
        //   jestConfig,
        //   cracoConfig,
        //   pluginOptions,
        //   context: {env, paths, resolve, rootDir}
        // }) => {
        //   return jestConfig;
        // }
      },
      // options: {}
    },
  ],
};

[dilanx]

@FrozenPyrozen is your project using ES6 or CommonJS? It looks like you're using lodash-es, which I believe does not support CommonJS's require.

[terrancecorley]

Not sure if this will help but I just tried installing craco in my project but it errors on the install because the current version (at time of writing) of craco requires v4 of react-scripts, whereas I have v5.

[pooooriya]

i have a same issue ! please update react-script to v5

[dilanx]

@terrancecorley @pooooriya craco 6 does not support CRA 5 but craco 7 does. Currently, craco 7 is in alpha, so you can install it with npm i @craco/craco@alpha.

[FrozenPyrozen]

@dilanx both ES6 and CommonJS