-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"type": "module" with React. [module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'] #11865
Comments
Based on this stackoverflow post, It seems like a quick fix solution would be for react-scripts to set
This isn't a practical solution for us developers. It requires ejecting to make it work this way. |
Can we change the title of this issue to something easier to read? "failed to resolve only because it was resolved as fully specified" |
See also webpack/webpack#11467 (comment) This is a webpack tweak that next.js uses as well since a lot of existing npm packages which may output esm bundles don't fully qualify their imports. |
Any movement on this being tracked by the react-scripts team? This blocks vuln upgrades of react-scripts. If the fix of adding the resolve rule to the webpack config of react-scripts that might be best to unblock upgrades of this by consuming projects |
I solved this issue by setting "type": "module", in package.json and renaming all imported modules to ***.mjs |
I solved this issue by downgrading the version of "react-scripts": "4.0.3", |
This is probably okay but it did bring back the error: [Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED] |
How is this closed, when the solution is to downgrade to previous version? |
Newer versions of create react app or something must have fixed this because it works fine now on a project I just started making. Will have to check again. Not sure though. |
FWIW I just hit this issue with |
This answer on Stack Overflow solved it for me, without having to eject 💪🏽 |
I have some ancient pre-Go code using react-scripts, what I could do as a get-around with react-scripts@5.0.1 was: edit node_modules/react-scripts/config/webpack.config.js: after line 418: include: paths.appSrc, go run ./: yarn build now works |
test-site was broken with the following errors: <img width="1703" alt="Screenshot 2023-08-30 at 3 28 12 PM" src="https://github.com/yext/chat-ui-react/assets/36055303/540c67b8-0358-4069-b7e9-2c0fe52fcb3c"> specifically this error: ``` Module not found: Error: Can't resolve './components' in '/Users/ytruong/chat-ui-react/lib/esm/src' Did you mean 'index.js'? BREAKING CHANGE: The request './components' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. ``` This is due to CRA 5 (create-react-app v5) internally using webpack 5, which follows the Node.js module resolution algorithm and it requires specifying the file extension. In this case, adding `"type": "module"` in previous CR triggers this rule in webpack https://webpack.js.org/configuration/module/#resolvefullyspecified. This is a known issue in CRA 5: facebook/create-react-app#11865. For vite/pages, pagesJS get around this using `--experimental-specifier-resolution=node` flag: https://github.com/yext/pages/blob/main/packages/pages/src/bin/spawn.ts#L19-L25 This PR implements a workaround to disable this webpack behavior using `craco` to update the webpack config without ejecting the CRA app. J=CLIP-450 TEST=manual see that test-site works again <img width="1358" alt="Screenshot 2023-08-30 at 3 31 04 PM" src="https://github.com/yext/chat-ui-react/assets/36055303/6a48a76b-23f8-4715-8186-4a28f8961a8d">
Removed unnecessary entry and associated things because for now this app only needs one page and added a new rule to be able to import modules without fully specifying name, as per in this issue: facebook/create-react-app#11865 (comment).
Hello All.
Currently I am trying to set up a backend in my react project and im running into issues trying to use ES 6 imports.
I went back and created a blank react app and added "type": "module" into my package.json and my server.js can now use ES 6 imports when I run nodemon server.js. However now When i try to npm start my react project I get the error.
When I remove the "type": "module from my pakcage.json and run npm start the react apps works fine again however my server now cant use import and can only use require. I know there are other ways besides using module type like making my server.js to server.mjs or any file i want to use esm however I have always used type module when cloning templates but now that I am doing it on my own I am running into this issue and can't find anything on the web on how to use "type": "module" in a react project so that I dont have to name all my backend files .mjs.
The text was updated successfully, but these errors were encountered: