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

See original GitHub issue

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.

ReactModuletype

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.

Issue Analytics

State:
Created 2 years ago
Reactions:19
Comments:6 (1 by maintainers)

Top GitHub Comments

4reactions

Dan503commented, Mar 5, 2022

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.

3reactions

akatipallycommented, May 2, 2022

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

Top Results From Across the Web

can't resolve module without '.js' file extension - Stack Overflow

The module in question does indeed have "type": "module" set in its package.json . I have tried adding .js to the import, and...

Documentation - ECMAScript Modules in Node.js - TypeScript

Node.js supports a new setting in package.json called type . "type" can be set to either "module" or "commonjs" . ... This setting...

JavaScript modules - MDN Web Docs

This guide gives you all you need to get started with JavaScript module syntax.

SyntaxError: Cannot use import statement outside a module

... Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').

Module Methods - webpack

.mjs or .js with "type": "module" in package.json. No CommonJS allowed, for example, you can't use require , module.exports or exports; File extensions...