-
-
Notifications
You must be signed in to change notification settings - Fork 451
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for ESM style Babel config files, calling Babel in async fixed? #894
Comments
I can not reproduce this issue locally, can you share a reproduction repo? |
Also make sure you are not accidentally using an old Babel or |
I hate to hijack this issue because my situation seems the opposite but the error is the same. I have a babel config written as an ESM and I see the following error:
When I rename my babel.config.js file to babel.config.cjs and make it CJS as well, it works but not with ESM. Is my configuration missing something to make ESM work? babel.config.js
|
It seems to be the same problem. |
Here you go:
Thanks for your help 👍 |
We should use Line 5 in 1669ac0
|
@JLHwung |
Here you go https://github.com/kroko/bugrepro-babel-loader-esm-01 |
@kroko Thanks for the reproduction, I found two problems:
This means that something ( |
@nicolo-ribaudo thanks for your time and insights. I guess I'll keep this ticket open as a passive tracker for if/when things change in ESLint / webpack / webpack-cli (?) |
I have the same issues
https://github.com/webpack/webpack/issues/14494 |
Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771)
Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771) - Provide a workaround for Vue CLI & Mocha ES6 modules conflict in Vue configuration file (vuejs#7417).
Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771) - Provide a workaround for Vue CLI & Mocha ES6 modules conflict in Vue configuration file (vuejs/vue-cli#7417).
Configure project to use ES6 modules to enable top-level await capabilities. This change helps project to align well with modern JS standards. - Set `type` to `module` in `package.json`. - Use import/export syntax in Cypress configuration files. - Rename configurations files that do not support modules to use the `.cjs` extension: - `vue.config.js` to `vue.config.cjs` (vuejs/vue-cli#4477). - `babel.config.js` to `babel.config.cjs (babel/babel-loader#894) - `.eslintrc.js` to `.eslintrc.cjs` (eslint/eslint#13440, eslint/eslint#14137) - `postcss.config.js` to `postcss.config.cjs` (postcss/postcss#1771) - Provide a workaround for Vue CLI & Mocha ES6 modules conflict in Vue configuration file (vuejs/vue-cli#7417).
I'm submitting a bug report
Node.js version:
14.16.0
Webpack Version:
5.24.3
Babel Core Version:
7.13.8
Babel Loader Version:
8.2.2
Please tell us about your environment:
macOS 10.15.7
Current behavior:
I was using CJS for all _build config related source_, currently I am changing everything to ESM.
I am not changing
package.json
to"type": "module"
though, simply renaming all files to.mjs
and changing the syntax.So far so good (all webpack configs, helper scripts migrated, everything works).
Now, when renaming
.babelrc.js
to.babelrc.mjs
and changing syntax, webpack throws well defined error.Here are contents as a reference
.babelrc.js
and JS related module section in webpack config
Expected/desired behavior:
Babel documentation about Supported file extensions say that ECMAScript modules are supported
Now, it nicely mentions why the error happens.
Expected that babel-loader supports ESM moving forward.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.
See above - just change any existing project
babel.config.js
or.babelrc.js
to use.mjs
and fix syntax. Probably change webpack config.mjs
and change syntax too.What is the expected behavior?
It should work. At some point 😄 , as ESM is way to go.
What is the motivation / use case for changing the behavior?
ESM everything.
Sure, there are few config files within build config where ESM is still not possible yet, such as
.eslintrc.js
that explicitly states that ESLint does not support ESM configuration at this time. But Babel explicitly states it can.I see this pull #825 , but...
Thanks!
The text was updated successfully, but these errors were encountered: