rollup / rollup-plugin-babel

This package has moved and is now available at @rollup/plugin-babel / https://github.com/rollup/plugins/tree/master/packages/babel
MIT License
702 stars 87 forks source link

Latest babel preset doesn't work with rollup #120

Closed DevEclipse closed 6 years ago

DevEclipse commented 7 years ago

rollup.config.js

// Rollup plugins
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import uglify from 'rollup-plugin-uglify';

export default {
    entry: 'src/main.js',
    dest: 'build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        resolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        commonjs(),
        babel({
            plugins: ['external-helpers'],
            externalHelpers: true,
            exclude: 'node_modules/**',

        }),
        replace({
            exclude: 'node_modules/**',
            ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
        }),
        (process.env.NODE_ENV === 'production' && uglify()),
    ],
};
.babelrc
{
  "presets": ["latest"],
  "plugins": [
    "external-helpers"
  ]
}

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

seawatts commented 7 years ago

I'm getting the same thing

Rich-Harris commented 7 years ago

Did you read the documentation that the error message pointed you to?

robhicks commented 7 years ago

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?

SpaceK33z commented 7 years ago

@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.

jonathantneal commented 7 years ago

I’m experiencing this as well with babel-preset-env.

jcmellado commented 7 years ago

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.

kylecordes commented 7 years ago

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.

robhicks commented 7 years ago

@kylecordes I installed babel-preset-latest and it worked for me.

kylecordes commented 7 years ago

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.)

micahscopes commented 7 years ago

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.

kylecordes commented 7 years ago

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.

micahscopes commented 7 years ago

@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.

kylecordes commented 7 years ago

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.)

miketrexler commented 7 years ago

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.

ngryman commented 7 years ago

@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?

dszakallas commented 7 years ago

@robhicks I think your problem is that you have to wrap the preset and its option into an extra array:

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}
prichodko commented 7 years ago

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

musicode commented 7 years ago

babel-preset-env is not work with rollup, right?

But I need babel-preset-env and rollup......

prichodko commented 7 years ago

@musicode: what's not working for you? It works fine for me.

musicode commented 7 years ago

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
prichodko commented 7 years ago

@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.

musicode commented 7 years ago

@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?

prichodko commented 7 years ago

@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:

  1. Pass the options directly to the plugin
  2. Define .babelrc file
  3. Define babel config in package.json

The problem was you were using two presets, which are doing almost the same thing.

musicode commented 7 years ago

@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?

prichodko commented 7 years ago

@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.

musicode commented 7 years ago

@prichodko

change the order like this:

  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    babel({
      comments: true,
      runtimeHelpers: true
    })
  ]

result is the same.

musicode commented 7 years ago

It's a so terrible experience.

Why a simple feature is so difficult to configure.

prichodko commented 7 years ago

@musicode Is your repository public? I would have a look.

musicode commented 7 years ago

@prichodko link

prichodko commented 7 years ago

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.

stephan-v commented 7 years ago

What exactly does this piece of code do now?

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

I am kind of confused.

prichodko commented 7 years ago

@stephan-v transpiles everything from the es2015 spec, except ES6 modules syntax, because it's handled by a rollup plugin.

jochumdev commented 6 years ago

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',
        })
    ]
};
artivilla commented 6 years ago

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?
artivilla commented 6 years ago

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.

Andarist commented 6 years ago

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 }],
}
ZhongyiChen commented 6 years ago
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 
    }
  ] 
]
johndeighan commented 6 years ago

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)

.eslintrc.js.log package.json.log rollup.config.js.log

Andarist commented 6 years ago

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.

johndeighan commented 6 years ago

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'.