Closed DevEclipse closed 6 years ago
I'm getting the same thing
Did you read the documentation that the error message pointed you to?
I'm having a related problem. I have followed the documentation. My .babelrc:
{
"presets": [
"es2015",
{
"modules": false
}
]
}
With babel 6.5.2 and babel-preset-es2015 v6.18.0, I get the following error:
Error: [BABEL] /.../src/x.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
at error (/.../node_modules/rollup/dist/rollup.js:170:12)
at /.../node_modules/rollup/dist/rollup.js:8926:6
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
In looking at the referenced babel docs, it seems to suggest using a module transformer, but I assume rollup/rollup-plugin-babel should be handling any transformations, which is why the plugin documentation requires modules to be configured to false.
Any ideas what's happening?
@Rich-Harris, I also ran into this issue in a repo of mine which previously worked. I made a minimal repository reproducing the issue: https://github.com/SpaceK33z/rollup-babel-issue . So it seems that this package is currently broken.
The workaround for this is to include all plugins you need from the es2015 preset manually. And now I say this, I'm beginning to doubt if this is a rollup-plugin-babel issue...
Sidenote: it feels weird working with rollup while being on the core team of webpack, but fun.
I’m experiencing this as well with babel-preset-env
.
I had the same problem with the latest
preset and solve it with the following .babelrc
:
{
"presets": [
[
"latest",
{
"es2015": {
"modules": false
}
}
]
],
"plugins": [
"external-helpers"
]
}
Note that the modules
option is passed down to the es2015
preset.
The above tip with "latest" doesn't work for me - I won't what the difference it?
Another clue: it might have to do with that code is actually passed through the plugin. I'm working with this to Angular4-AOT many small example problems. Some succeed, others fail with the error in this issue.
@kylecordes I installed babel-preset-latest
and it worked for me.
I wonder what the difference is, why babel-preset-latest works for you (and for about 75% of my cases) but not for the other 25% of my cases.
(I've actually set it aside for the moment, I got the thing I'm working on up and running with Buble instead. It has a setting to tolerate a subset of for-of loops, and it appears that that subset matches the subset TypeScript outputs.)
I'm having this exact issue with babel-preset-latest. It's funny cause a minute ago, it compiled. Now it's not with what seems to be the exact same rollup config. AFAIK all I changed was the rollup config.
I realize the following is very unhelpful because most people reading here specifically need Babel, they are using one of its myriad configurable and pluggable features. But:
I just needed something that would compile ES2015 to ES5, for my specific use case. I tried Babel first because it is very popular, feature rich, and high quality. But for the basic job, there are other tools to do fine. In the case I mentioned above I swapped to Buble, you can see it in action in this repo:
https://github.com/OasisDigital/angular-aot-es2015-rollup
In another variant (branch link below) I used Closure Compiler (which grew extensive ES2015->ES5 capability in the last couple years):
https://github.com/OasisDigital/angular-aot-es2015-rollup/tree/clojure-compiler
On the other hand, if someone wants to actually debug and fix this, the code in question is right here:
https://github.com/rollup/rollup-plugin-babel/blob/master/src/preflightCheck.js#L23
I suspect that sticking a console.log right in there to see what exactly the preflight check transformed code looks like at the point of failure, might reveal the nature of the bug.
@kylecordes I'd like to use buble, but I'm having trouble finding documentation on how to integrate buble options with rollup... any advice? rollup-plugin-buble
just says to use buble()
, which isn't helpful for my situation.
edit 2: I thought I figured out how to pass options to rollup-plugin-buble, but it actually wasn't working and just didn't throw an error. so I deleted my earlier edit so as not to spread misinformation.
The lack of options is a "feature" of Buble. It is really suitable only for the most straightforward vanilla ES2015->ES5 cases. It has few options, I needed to set one of them shown below:
https://github.com/OasisDigital/angular-aot-es2015-rollup/blob/master/rollup.config.js#L39
If you are currently setting a bunch of options for Babel, it is unlikely Buble will do what you need. (I say that as a fan of both tools.)
I was able to solve the above error by referencing a previous issue, #35.
It turns out I needed to add the babelrc: false
option to the gulp task. Otherwise the config posted above was conflicting with my gulpfile.babel.js, which was using babel-register
.
In this case, in order to use the es2015
preset, you must instead specify es2015-rollup
.
Here is my whole config:
import gulp from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import rollup from 'gulp-better-rollup';
import babel from 'rollup-plugin-babel';
gulp.task('js-rollup', function() {
return gulp.src('./js/main.js')
.pipe(sourcemaps.init())
.pipe(rollup(
{
plugins: [babel({
exclude: 'node_modules/**',
babelrc: false,
presets: ['es2015-rollup']
})]
},
{
format: 'cjs',
}
))
.pipe(sourcemaps.write())
.pipe(gulp.dest(built + '/js'));
});
Also @josdejong has posted another example, if you are using an external rollup config: see #35.
@miketrexler Still, what if I do want to use .babelrc
?
It feels unnatural to me to have to relocate a big configuration chunk of my well defined environment agnostic babelrc
to some specific place (rollup
config) because of some internals I shouldn't have to care about IMHO.
If I understand the problem well, it conflicts with rollup
using babel
to parse its configuration file. If so, we should file them an issue about this and ask them to provide a facility to allow us customize/bypass rollup
transpilation (something like ava
does for example).
I'm under the impression that a nice to have feature of rollup
is becoming a real pain for common use cases.
What do you think?
@robhicks I think your problem is that you have to wrap the preset and its option into an extra array:
{
"presets": [
["es2015", { "modules": false }]
]
}
I recommend using babel-preset-env
, it's really easy to setup and maintain. The preset also offers an option to use modules, so babel configuration should look something like this:
{
"presets": [
["env", {
"targets": {
//"node": "current"
//"browsers": ["last 2 versions"]
},
"modules": false
}]
],
}
More info: babel-preset-env
babel-preset-env
is not work with rollup
, right?
But I need babel-preset-env
and rollup
......
@musicode: what's not working for you? It works fine for me.
rollup.config.js
plugins: [
babel({
presets: [ 'es2015-rollup' ],
babelrc: true,
comments: true,
runtimeHelpers: true
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs()
],
.babelrc
{
"presets": [
["env", {
"targets": {
"ie": 8
}
}]
]
}
result
(babel plugin) It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
@musicode you shouldn't transform ES6 modules syntax. So your configuration for env preset should look something like this:
"presets": [
["env", {
"targets": {
"ie": 8
},
"modules": false
}]
],
Also I don't think you should use this preset presets: [ 'es2015-rollup' ],
since you are already using babel-preset-env
preset.
@prichodko
Thank you for the suggestion.
I remove babel
plugin in rollup.config.js
, and use your env preset config, the result is ES6 code in one file.
But I need ES5 code, how can I do that?
@musicode No you shouldn't remove babel plugin, just the babel-preset-es2015-rollup. When you are using babel plugin there are three ways how to configure its behavior:
The problem was you were using two presets, which are doing almost the same thing.
@prichodko
rollup.config.js
import babel from 'rollup-plugin-babel'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
// plugins
plugins: [
babel({
comments: true,
runtimeHelpers: true
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs()
]
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"ie": 8
},
"modules": false
}
]
]
}
result
(babel plugin) It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
why?
@musicode I've noticed one more thing, you usually want to put the babel-plugin last. See https://github.com/rollup/rollup/issues/1148. Let me know if it helps.
@prichodko
change the order like this:
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
babel({
comments: true,
runtimeHelpers: true
})
]
result is the same.
It's a so terrible experience.
Why a simple feature is so difficult to configure.
@musicode Is your repository public? I would have a look.
To make it complete, for anyone working with babel-preset-env
, config file I sent above works correctly. The problem @musicode had, didn't have anything to do with babel-preset-env
.
What exactly does this piece of code do now?
{
"presets": [
["es2015", { "modules": false }]
]
}
I am kind of confused.
@stephan-v transpiles everything from the es2015 spec, except ES6 modules syntax, because it's handled by a rollup plugin.
I got this to work:
import globals from 'rollup-plugin-node-globals';
import builtins from 'rollup-plugin-node-builtins';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import replace from 'rollup-plugin-replace';
export default {
input: 'build/restful.fetch.js',
output: {
file: 'dist/restful.js',
format: 'umd',
name: 'restful.js'
},
moduleContext: {
[require.resolve('whatwg-fetch')]: 'window'
},
plugins: [
globals(),
builtins(),
nodeResolve({
// use "module" field for ES6 module if possible
module: false, // Default: true
// use "jsnext:main" if possible
// – see https://github.com/rollup/rollup/wiki/jsnext:main
jsnext: false, // Default: false
// use "main" field or index.js, even if it's not an ES6 module
// (needs to be converted from CommonJS to ES6
// – see https://github.com/rollup/rollup-plugin-commonjs
main: true, // Default: true
// some package.json files have a `browser` field which
// specifies alternative files to load for people bundling
// for the browser. If that's you, use this option, otherwise
// pkg.browser will be ignored
browser: true, // Default: false
// not all files you want to resolve are .js files
// extensions: [ '.js', '.json' ], // Default: ['.js']
// whether to prefer built-in modules (e.g. `fs`, `path`) or
// local ones with the same names
preferBuiltins: true, // Default: true
// If true, inspect resolved files to check that they are
// ES2015 modules
modulesOnly: false // Default: false
}),
commonjs({
namedExports: {
'node_modules/immutable/dist/immutable.js': [ 'fromJS', 'List', 'Map', 'Iterable' ],
}
}),
babel({
exclude: 'node_modules/**',
babelrc: false,
presets: [
["env", { "modules": false }]
],
plugins: [
'external-helpers'
],
}),
replace({
exclude: 'node_modules/**',
ENV: 'production',
})
]
};
I'm using the following config fairly similar to @DevEclipse :
getting err [!] Error: Cannot find module 'babel-core'
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import uglify from 'rollup-plugin-uglify';
const pkg = require('./package.json');
const external = Object.keys(pkg.dependencies);
export default {
input: 'src/index.js',
output: [
{
file: pkg.main,
format: 'cjs'
},
{
file: pkg.module,
format: 'es'
}
],
external,
sourceMap: 'inline',
plugins: [
resolve(), // resolve external modules from npm
babel({
exclude: '/node_modules/**' // only transpile our source code
}),
process.env.NODE_ENV === 'production' && uglify()
]
};
"devDependencies": {
"@babel/core": "7.0.0-beta.42",
"@babel/plugin-external-helpers": "7.0.0-beta.42",
"@babel/polyfill": "7.0.0-beta.42",
"@babel/preset-env": "7.0.0-beta.42",
"@babel/preset-react": "7.0.0-beta.42",
"@babel/preset-stage-2": "7.0.0-beta.42",
"babel-eslint": "8.2.2",
"babel-preset-es2015-rollup": "3.0.0",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"rimraf": "2.6.2",
"rollup": "0.57.1",
"rollup-plugin-babel": "3.0.3",
"rollup-plugin-commonjs": "9.1.0",
"rollup-plugin-node-resolve": "3.3.0",
"rollup-plugin-uglify": "3.0.0",
"the-answer": "1.0.0"
},
"dependencies": {
"material-ui": "1.0.0-beta.39",
"react": "16.3.0",
"react-dom": "16.3.0",
"react-proptypes": "1.0.0",
"react-tap-event-plugin": "3.0.2"
},
"peerDependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-proptypes": "1.0.0",
"react-tap-event-plugin": "3.0.2"
}
any thoughts?
Figured it out. You need "rollup-plugin-babel": "4.0.0-beta.3",
with "@babel/core": "7.0.0-beta.42",
. Posting it as it could be useful for others.
The issue seems to be resolved, it's all about disabling module transform and as other have posted the easiest nowadays is just to use babel-preset-env and have it configured like this:
{
presets: [['env', { modules: false }]],
}
Please remember that when passing a preset/plugin to babel with options you have to wrap it in a tuple of [name, options]
Broken config might look like this:
{
presets: ['env', { modules: false }],
}
presets: [
["@babel/preset-env", {
loose: true,
modules: false, // If you are intended to set modules as false, namely we want to support es6 module, then you must set loose as true
}
]
]
I'm still getting "ReferenceError: require is not defined" in my browser console. Any help would be appreciated. I've attached my package.json, rollup.config.js and .babelrc files (renamed with a .log file extension so your site will allow them)
For some reason some require
call doesn't get "transpiled" into an ESM import. Hard to tell what's causing this from the files you have given here - you'd have to share your complete repository with the issue reproduced (or just any repository with the issue reproduced 😉 ). I suspect some of your imported dependencies has non-statically analyzable module shape.
If it helps, the call to require in my source file is:
const watsonSpeechRecognizer = require('watson-speech/speech-to-text/recognize-microphone');
which appears in the output file, but with 'var' instead of 'const'.
rollup.config.js
Then this error pops up
Error transforming src\main.js with 'babel' plugin: It looks like your Babel configuration specifies a module transformer. Please disable it. See https://github.com/rollup/rollup -plugin-babel#configuring-babel for more information