create-react-app
create-react-app copied to clipboard
Support CJS file extensions
Currently CRA treats .cjs
files as asset/resource
files rather than javascript files. See https://nodejs.org/api/packages.html#determining-module-system for explanation of how the .cjs
file extension is treated by NodeJS.
I wasn't able to add tests to this PR because all of the tests failed epicly when I ran them locally, after following the instructions in CONTRIBUTING.md and swapping between Node 14, 16, and 17. I manually tested this change on a local create-react-app project to verify that CJS files are now processed as javascript. I expect the lack of tests will make this PR not mergeable, so any guidance on how to fix the many many errors that occur while running npx jest test/ --watchAll
is appreciated.
👍 would be great to see this merged, quite a few libraries use .cjs (e.g. @apollo/client
), so the current webpack config can cause weird module import failures depending on what you're doing. The alternative is to use something like craco to monkey-patch the webpack config, but that's obviously not ideal.
@jenseng Second that! This is also affecting the very popular file uploader package uppy
and all its sub-packages (@uppy/react
, @uppy/dashboard
, @uppy/aws-s3
, @uppy/drag-drop
) to name a few.
This PR successfully fixes the issue for my project. Shouldn't this be prioritised, @iansu? Looks like a common issue.
Would love if this gets merged in as it solves issues with a lot of libs
Would be great to have this merged in.
In the meantime, it's possible to continue using .cjs
modules with react-app-rewired:
// config-overrides.js
module.exports = {
webpack: function (config, env) {
config.module.rules = config.module.rules.map(rule => {
if (rule.oneOf instanceof Array) {
rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
}
return rule;
});
return config;
},
}
Guys, any update on this ?
This solved our issue in https://github.com/solana-labs/oyster/issues/538 - it would be great to have this merged! :pray:
Any update? This is a blocker!
Looking forward to someone finally fixing this.
We need this as well and it's really important for our team, @uppy doesn't work without a .cjs
support and potentially @apollo/client in the future. Please review this and merge.
Hey @nyatskiv I got uppy working by doing the following as a stopgap before they merge this
Install these packages
npm i react-app-rewired --save-dev
npm i customize-cra --save-dev
Update your build and start scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
Create a config-overrides.js
file with the following contents
//@ts-ignore
const {
override,
addWebpackModuleRule,
setWebpackTarget,
} = require("customize-cra");
module.exports = override(
addWebpackModuleRule({
test: /\.(cjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve("babel-preset-react-app/dependencies"),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: false,
sourceMaps: true,
inputSourceMap: true,
},
})
);
+1 Hoping this will be reviewed and merged. This fixes an issue I'm having and I believe this would fix https://github.com/facebook/create-react-app/issues/12155.
config.module.rules = config.module.rules.map(rule => { if (rule.oneOf instanceof Array) { rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]; } return rule; });
You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!
Thanks a lot, hopefully this can get merged in to fix it properly ASAP.
I also would love for this to be reviewed and merged. 🙏
config.module.rules = config.module.rules.map(rule => { if (rule.oneOf instanceof Array) { rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/]; } return rule; });
You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!
Thanks a lot, hopefully this can get merged in to fix it properly ASAP.
Same here, importing [email protected] as require('axios')
inside a dependency is not working. It's returning some path string instead of the actual module, causing axios_1.default
to be undefined.
![Screen Shot 2023-02-28 at 13 29 39](https://user-images.githubusercontent.com/3988039/221855035-610b137b-fb57-4ba6-9dc4-e934fadea760.png)
I could work around this by adding CRACO to my project, with the configuration suggested here: https://github.com/facebook/create-react-app/issues/11889#issuecomment-1114928008.
Is there any estimated ETA for merging this PR, so we can just use latest react-scripts and axios versions out of the box?
This PR has been kicking around for a year, and it clearly solves a known issue. What's blocking the progress here? 😖
It, and several other PRs doing the same thing, seem like they would effectively solve https://github.com/facebook/create-react-app/issues/12700.
Ran into this issue today, I'm glad I was able to eventually find this PR and learn about the root cause + workarounds. But like the previous commenter, I'm also wondering what is blocking the PR for so long. This seems like a good solution for an issue that has been reported multiple times by now.
I think we need to give up on create react app, it looks like they are not supporting it anymore with the new docs anyway.
If you have a look at my comment from 9 months ago there is a way to use rewire to solve the issue
it looks like they are not supporting it anymore with the new docs anyway.
@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?
@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?
@laustdeleuran The new react docs don't mention using create react app. https://react.dev/learn/start-a-new-react-project basically says to use a framework or use Vite or Percel.
Specific part about not using a framework https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework
Hello from 2023, burned a few hours on this frustrating issue! Any chance of getting this merged?
I'm also having this issue.
@zpao sorry for the direct hit. But can you help merging this? Thank you
It is sad that this has not been sorted after 1 year of collective frustration - what is up?
I'm still hopping this gets merge :/
This issue is still breaking otherwise correctly written packages used within CRA projects (e.g. https://github.com/101arrowz/fflate/issues/193). .cjs
has been part of Node's module resolution system for a few years now, so I'd have hoped CRA would support it. Is there anything else that needs to be done for this to be merged?
My take here is that CRA is now abandonware and we should either eject, or migrate to other providers like vite.