"type": "module" with React. [module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"']

[JahnoelRondon]

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.

Failed to compile.

Module not found: Error: Can't resolve './App' in '/home/user/Desktop/WebDev/React/temp/merntemplate/src'
Did you mean 'App.js'?
BREAKING CHANGE: The request './App' 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.

ERROR in ./src/index.js 8:0-24
Module not found: Error: Can't resolve './App' in '/home/user/Desktop/WebDev/React/temp/merntemplate/src'
Did you mean 'App.js'?
BREAKING CHANGE: The request './App' 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.

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.

[Dan503]

Based on this stackoverflow post, It seems like a quick fix solution would be for react-scripts to set fullySpecified to false

{
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
}

This isn't a practical solution for us developers. It requires ejecting to make it work this way.

[Dan503]

Can we change the title of this issue to something easier to read?

"failed to resolve only because it was resolved as fully specified"

[transitive-bullshit]

See also https://github.com/webpack/webpack/issues/11467#issuecomment-691873586

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.

[akatipally]

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

[boufoussmed]

I solved this issue by setting "type": "module", in package.json and renaming all imported modules to ***.mjs I use react version (npm view react version 18.2.0 ) ( node -v v16.16.0)

[chetanyakan]

I solved this issue by downgrading the version of react-scripts in my package.json file.

    "react-scripts": "4.0.3",

[mcnamara-charles]

I solved this issue by downgrading the version of react-scripts in my package.json file.

    "react-scripts": "4.0.3",

This is probably okay but it did bring back the error: [Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED] Solution: https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

[Jackob32]

How is this closed, when the solution is to downgrade to previous version?

[JahnoelRondon]

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.

[auchers]

FWIW I just hit this issue with "react-scripts": "5.0.1" (while trying to add in "@react-spring/web": "^9.7.0",)

[danielweinmann]

This answer on Stack Overflow solved it for me, without having to eject 💪🏽

[haraldrudell]

I have some ancient pre-Go code using react-scripts, what I could do as a get-around with [email protected] was:

edit node_modules/react-scripts/config/webpack.config.js:

after line 418: include: paths.appSrc, insert: resolve: { fullySpecified: false, },

go run ./: yarn build now works

[jmarcoscosta2015]

I'm experiencing this issue, I have this new docker compose to run my react app and others - I wouldn't like to touch the webpack config because it would require me to eject... Is there a good solution nowadays? downgrading react-scripts doesn't look good to me folks.