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

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.

[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