We Keep Coding

React Error: Child compilation failed: Must use import to load ES Module

I have done a react project on my ubuntu system and uploaded on github, now I am cloning that same repository on my windows system and doing npm install and npm start. It is showing this errors.
Check these images
[1]: https://i.stack.imgur.com/3cKFp.png
[2]: https://i.stack.imgur.com/v5OHz.png
I am bit new to react so please help me to fix this issue. My npm version on windows is 8.7.0 and node version is v12.16.3
Compiled with problems:X
ERROR
Must use import to load ES Module: C:\Users\user\Desktop\port\frontend\node_modules\#eslint\eslintrc\universal.js
require() of ES modules is not supported.
require() of C:\Users\user\Desktop\port\frontend\node_modules\#eslint\eslintrc\universal.js from C:\Users\user\Desktop\port\frontend\node_modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\user\Desktop\port\frontend\node_modules\#eslint\eslintrc\package.json.
ERROR
Error: Child compilation failed:
Must use import to load ES Module: C:\Users\user\Desktop\port\frontend\node_modules\#eslint\eslintrc\universal.js
require() of ES modules is not supported.
require() of C:\Users\user\Desktop\port\frontend\node_modules\#eslint\eslintrc\universal.js from C:\Users\user\Desktop\port\frontend\node _modules\eslint\lib\linter\linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\user\Desk top\port\frontend\node_modules\#eslint\eslintrc\package.json.
- child-compiler.js:169
[frontend]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:564
[frontend]/[webpack]/lib/Compiler.js:564:11
- Compiler.js:1183
[frontend]/[webpack]/lib/Compiler.js:1183:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[frontend]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1179
[frontend]/[webpack]/lib/Compiler.js:1179:33
- Compilation.js:2784 finalCallback
[frontend]/[webpack]/lib/Compilation.js:2784:11
- Compilation.js:3089
[frontend]/[webpack]/lib/Compilation.js:3089:11
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[frontend]/[tapable]/lib/Hook.js:18:14

It seems that you have a problem with your node version. Most of the react component to run on node version 16. Upgrade your node version and I think it will solve your issue.

The answer is in the error itself. You are using require in your universal js which is not supported, please use import instead

Can I import npm packages dynamically from CDNs in Webpack?

I need to require a different version of Zoid npm package dynamically in my JS bundle, depending on a variable. So for example:
if (isLatestVersion) {
zoid = await import('https://unpkg.com/zoid#9.0.80/index.js')
} else {
zoid = await import('https://unpkg.com/zoid#9.0.31/index.js')
}
However when I try the above I get this error:
script.js:2 Uncaught (in promise) Error: Cannot find module 'https://unpkg.com/zoid#9.0.80/index.js'
at webpackMissingModule (script.js:2)
Presumably this is because I don't have zoid defined in my package.json.
So basically my question is, is there's a way to import libraries from a CDN such as unpkg.com or skypack.dev, using Webpack's dynamic imports (aka code splitting)?

The way I ended up solving this was by adding two versions of the same package in my package.json. So I ran these commands:
yarn add zoid9080#npm:zoid#9.0.80
yarn add zoid9031#npm:zoid#9.0.31
yarn remove zoid
Then I imported these two packages statically, since I didn't actually need dynamic importing, and the code ended up being simpler as well:
import zoid from 'zoid9080';

Flow: Throws error Cannot resolve module "react-redux" even tho it's installed

Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.

How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.

I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.

Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.

I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.

Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....

Webpack / NPM: Use build version of installed module instead of re-building from source

I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:
ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build';? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?

When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).
Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui#0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.
But you can import the built version by specifying the corresponding path. So your import would be:
import * as DAT from 'dat.gui/build/dat.gui.js';
If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:
resolve: {
alias: {
'dat.gui': 'dat.gui/build/dat.gui.js'
}
}
With that you can use your original import statement:
import * as DAT from 'dat.gui';

Polyfill for ie

I'm trying to add a polyfill to my vue.js 2.0/Laravel5.3 application because in internet explorer 11 I receive an error:
vuex requires a Promise polyfill in this browser.
So I've followed the docs I'm using ecm 6 so I did:
npm install --save-dev babel-polyfill
And added this at the top in my bootstrap.js:
import "babel-polyfill";
But still the same error in Internet explorer. What should I do or what am I doing wrong here?

If you are using Webpack, find your webpack.base.conf.js file (mine was in the build folder), or the equivalent webpack configuration file, then modify the app entry variable to include babel-polyfill at the start so it looks something like this:
entry: {
app: ['babel-polyfill', ...]
},
.
.
.

#doulmi
Add this to your package.json file:
"babel-polyfill": "^6.20.0"
After that npm install.
Add this at the top of you main js file:
import "babel-polyfill";
Compile everything. That should work.