Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Import error with CRA v2 (webpack 4)

See original GitHub issue

description

Using create-react-app v2, an error is thrown on start : “Can’t import the named export ‘AUTH_CHECK’ from non EcmaScript module”

workaround

add type: 'javascript/auto', in module section of webpack.config.js.

explanation

modules with mjs extension are now treated differently by webpack 4 :

Files ending with .mjs are parsed as javascript/esm, a stricter mode. This mode does not allow to import CJS modules like ESM ones.

source : https://github.com/apollographql/react-apollo/issues/1737

Similar issue with react-appolo :

In react-apollo, react-apollo.browser.umd.js is evaluated by webpack as javascript/auto (webpack 3 default mode). It is a loose mode to preserve compatibility that support both CJS and ESM within the same file. When webpack parses require(“./ApolloProvider”) it will look at ./ApolloProvider.mjs first.

While this issue looks like a webpack one, it is not: react-apollo should correctly import non-ESM dependencies, in this case react.

version

react-admin-firebase v0.5.1

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

benwindingcommented, May 7, 2019

Fixed the issue, please upgrade to version 0.5.3 and please advise if there’s any problems.

Issue

The .mjs reference has been removed, so create-react-app won’t look for it anymore.

Commit: #0bccf9b

Thanks everyone for reporting the issue! 👍 Ben

1reaction

xididricommented, Apr 29, 2019

Well as I understood it now webpack 4 treats modules with .mjs extension differently, and as a result only default exports are allowed.

This is the error on standard CRA (v2) : https://codesandbox.io/s/723r5p804q

Will try to submit a PR this week end

Top Results From Across the Web

Cannot import from immer with webpack 4 · Issue #333 - GitHub

Bug Report When importing immer to React with Webpack 4, I get this exception: Error was not caught ReferenceError: require is not defined...

Module not found: Error: Can't resolve the typescript file when ...

Simple renaming, as described in guide, works only for ./src/index.(js|ts|jsx|tsx) file but all imports will fail as far as create-react-app ...

Using React with TypeScript - Mattermost

To convert existing apps to TypeScript, we need to install some dependencies and fix a few errors. CRA handles the rest. Create a...

file-loader - webpack - JS.ORG

The following examples show how to use file-loader for CDN uses query params. file.js import png from './directory/image.png?width=300&height=300' ...

Code-Splitting - React

Most React apps will have their files “bundled” using tools like Webpack, Rollup or Browserify. Bundling is the process of following imported files...