score:10
well, it turns out that these errors are all cause by create-react-app's default webpack.config.js
. if you navigate to code node_modules/react-scripts/config/webpack.config.js
you fill find a line include: paths.appsrc
which basically limits babel to the src/
folder of the react app itself.
that means, if you've yarn link
ed a folder outside of it, babel will not transpile it to normal js, and thus react cannot use it.
there are two hacky solutions, but i would like a better one.
- manually (or via a build script) delete the
include: paths.appsrc
line fromreact-scripts
every time you install a node module - make a script that copies the external directory into your react
src
directory every time the external directory is modified.
i really wish there were an official way around this...
score:0
the other answers to this question suggest removing the include
in react-scripts
' webpack.config
(either with craco
or react-app-rewired
). i found this worked with yarn start
, but when i made a production build with yarn build
i got the error uncaught referenceerror: exports is not defined
at runtime.
instead of removing the include, i had to add the other project's src in addition to the existing src directory.
here's my config-overrides.js
to be used with react-app-rewired
.
for react-scripts
4:
const path = require("path");
module.exports = function override(config) {
// see https://stackoverflow.com/questions/65893787/create-react-app-with-typescript-and-npm-link-enums-causing-module-parse-failed.
config.module.rules[1].oneof[2].include = [
path.join(__dirname, './src'),
path.join(__dirname, '../backend/src')
];
return config
}
for react-scripts
5:
const path = require("path");
module.exports = function override(config) {
// see https://stackoverflow.com/questions/65893787/create-react-app-with-typescript-and-npm-link-enums-causing-module-parse-failed.
config.module.rules[1].oneof[3].include = [
path.join(__dirname, './src'),
path.join(__dirname, '../backend/src')
];
return config
}
score:0
my craco config, does the same thing as phil mo's version as far as i can tell but is easier to understand
module.exports = {
webpack: {
configure: (webpackconfig) => {
webpackconfig.module.rules[0].oneof.find(
({ test: t }) =>
t != null &&
!array.isarray(t) &&
t.tostring().includes('ts')
).include = undefined
return webpackconfig
}
}
}
score:3
it is possible to automatically remove the include path setting mentioned in the other answer using react-app-rewired.
the following config-overrides.js
works for react-scripts:4.0.3
and causes babel to also transpile files in node-modules.
// config-overrides.js
module.exports = function override(config, env) {
// this line might break with other react-script versions
delete config.module.rules[1].oneof[2].include
return config
}
score:6
based on @foxtrotuniform6969's answer, i created a @cracro/craco
configuration that gets rid of the misbehaving setting by itself.
module.exports = {
webpack: {
configure: (webpackconfig) => ({
...webpackconfig,
module: {
...webpackconfig.module,
rules: webpackconfig.module.rules.map((rule) => {
if (!rule.oneof) return rule;
return {
...rule,
oneof: rule.oneof.map((ruleobject) => {
if (
!new regexp(ruleobject.test).test('.ts') ||
!ruleobject.include
)
return ruleobject;
return { ...ruleobject, include: undefined };
}),
};
}),
},
}),
},
};
https://gist.github.com/philippmolitor/00f427d12a9c5bca84309058d88846b7
Source: stackoverflow.com
Related Query
- Create React App with TypeScript and NPM Link: Enums causing Module parse failed
- Problem with npm build and babel in React Create App
- Trying to use jest with create-react-app and typescript. Get error: Jest: Failed to parse the TypeScript config file... Cannot find module 'ts-node'
- create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Typescript does not error on compilation with create react app
- react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?
- How to determine the order of css in my create react app build with webpack and customize-cra?
- create react app react 18 with typescript
- Create react app with npx that uses classes and not hooks
- TravisCI with npm run test from create react app
- Adding custom Typescript type declaration for a node module in Create React App
- serve react create app and Nodejs app with reverse proxy Nginx
- How to create a generic arrow function with react and typescript
- React library with typescript and module css
- Open Source React App Failed to Compile after npm install and npm start
- Issues when Hosting express with typescript and react app on Heroku
- I create a build of my react app and connected with electron.js. now how to connect my backend from server folder with electron
- Create a react app and use a npm start command but it is not working
- How create React Typescript component with required and optional values but required value without default value?
- Create a key handler for input element with React and TypeScript
- Create react app served with nginx and oauth gives me refresh page issue
- monaco-editor-webpack-plugin Create React App Build with react-router causing incorrect location for chunks
- npm error: Cannot find module '.../immer.js' when building a create react app through CLI
- How to create module with react components and load with react lazy?
- module parse failed error while importing css file in react with next.js
- I am building react app with ag-grid and I am having an issue with trying how to put a link in the cell
- What is the difference between NextJs and Create React App
- Issue with babel-jest dependency when running npm start in a React app
- How to create forms with React and Rails?
More Query from same tag
- Removing object from array using hooks (useState)
- How to show a specific item onClick in React?
- React-Redux-Firebase new hooks
- React-addons-css-transition-group styling
- Reactstrap modals
- How to submit a dynamic form in React.js
- Update the header title based on the page displayed ( sibling component)
- Is there a way to inline this javascript code?
- React Native SVG - Setting SVG width and height cause the icon to be cut off
- Jest mock window.scrollTo
- Gatsby theme i18n markdown doesn't change language when toggle
- Decorator for children of abstract generic Container class in Typescript
- Trying to return single button based on text/innerText content using puppeteer
- Bar chart is not being updated when "untick" the checkboxes in React Hooks
- Disable hydration / only partially hydrate a Next.js app
- inner <li> onClick doesn't fire
- fire redux action from extraReducers
- How to have inputs work while having a listener on keyDown, keyUp
- Why my check box isn't updated after click?
- React-boilerplate+grommet, making sass work with webpack
- How to set multiple object value with special key on react js
- React bootstrap - Dropdown value doesnt change on handleSelect
- React: what's the difference between a function returning JSX and function component?
- HTML Within Loop Not Rendering in React
- styled component doesn't work with hierachy selectors
- webpack.DefinePlugin is not recognized and devtool: 'cheap-module-source-map does not work
- React Hook to set a state value if null?
- create-react-app doesn't generate public and src folders thus cannot get started
- NPM start error for react in windows10 & ubuntu
- Can you use template strings as an object value?