react-app-rewired build throws attempted import error

Question

I have react project. When I use craco build, I get the following error:

    node_modules/@react-navigation/core/lib/module/getStateFromPath.js
    Attempted import error: 'parse' is not exported from 'query-string' (imported as 'queryString').

So clearly something is messed up with the import/exports, but "start" works correctly, and everything's fine with that. This only occurs on "build". I use @craco/craco instead of react-scripts.

I have exactly the same problem. Did you find a solution by any chance ? — Nicolas, Jul 09 '21 at 09:56

score 1 · Answer 1 · answered Jul 10 '21 at 16:05

1

I had the same issue when using react-app-rewired.

You can try using craco to override your webpack config instead. Switching to craco somehow eliminates this error for me.

answered Jul 10 '21 at 16:05

Hasyim Azmi

11
2

score 0 · Answer 2 · answered Mar 01 '22 at 15:28

In my case, I was already using @craco/craco, but the @react-navigation/native was in a nested node_modules folder.

├── node-modules
├── src
     ├── node_modules
     ├── package.json // @react-navigation/native was here
├── package.json

I moved the dependecy upward to the root package.json

├── node-modules
├── src
     ├── node_modules
     ├── package.json
├── package.json // @react-navigation/native is here now

score 0 · Answer 3 · answered Mar 07 '22 at 23:48

Clearly something is messed up with the import/exports, but "start" works correctly, and everything's fine with that. This only occurs on "build". I use "customize-cra" to get rid of the ModuleScopePlugin so I can import outside of src.

const { removeModuleScopePlugin, override, babelInclude, addBabelPlugins } = 
require("customize-cra");
const path = require("path");

module.exports = override(
 removeModuleScopePlugin(),        // (1)
  babelInclude([
   path.resolve("src"),
   path.resolve("../components/src"),  // (2)
   path.resolve('../../node_modules'),
 ]),
addBabelPlugins([require.resolve('babel-plugin-react-native-web')])
);

This is my config-overrides.js. My tsconfig was not changed, it's the same that ships with cra. If any additional information is needed, I'll add that. Thanks!

score 0 · Answer 4 · answered Oct 26 '22 at 00:03

I had a similar situation, which I solved. I'll start by explaining the problem that I encountered so my solution makes sense in context.

The create-react-app webpack config only compiles standard ES features for files that do not reside in the app/src directory, so I added react-app-rewired to my CRA package to enable local cross-package dependencies in a yarn workspace by adding the following config-override.js:

module.exports = function override(config, env) {
  // Rewrite `babelLoader.include` to the parent directory to
  // support local cross-package dependencies.
  config.module.rules[1].oneOf[3].include = "/my/root";
  return config;
};

However, this caused the babel loader to run against scripts in node_modules that also matched the associated test pattern /\.(js|mjs|jsx|ts|tsx)$/.

I fixed this by introducing an exclude pattern: exclude: /.*\/node_modules\/.*/ to the loader.

The easiest way to make these changes would be to eject and edit config/webpack.config.js directly, but if you need to avoid ejecting, it's more lightweight to use patch-package than react-app-rewired.

react-app-rewired build throws attempted import error

4 Answers4