react-app-rewired build throws attempted import error

user_12280532 0
Viewed 450

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.

react-native-web react-navigation
3 Answers

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.

user_84036270

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
user_41709350

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!

user_169858970
Related