Error bundling babel modules

[ritz078]

My rollup plugins settings for grunt-rollup

        rollup: {
            options: {
                format: 'cjs',
                banner: "<%= meta.banner %>",
                plugins: [
                    replace(build),
                    babel(),
                    npm({
                        jsnext: true,
                        main: true
                    }),
                    commonjs({
                        include: 'node_modules/**'
                    })
                ]
            },
            files: {
                src: 'src/js/embed.es6',
                dest: 'src/embed.js'
            }
        }

Error

Warning: 'import' and 'export' may only appear at the top level (7:13) in /Users/ritz078/projects/embed.js/node_modules/babel-runtime/regenerator/index.js

I am using babel v5 and rollup-plugin-babel v1.0

[Victorystick]

This doesn't appear to be an issue with the NPM plugin, as the file in node_modules is being included. Try opening over in rollup-plugin-babel.

It's a strange error regardless. Does regenerator really use import/export in a non-top-level statement?

[runspired]

This may be a bug with rollup and CJS modules.

[taoeffect]

I was getting this same error message but for lodash:

Warning: Unexpected token (10:9) in /path/to/project/node_modules/lodash-es/lodash.js Use --force to continue.

There were two ways to solve this, either by adding {id: 'lodash-es'} to the lodash babel plugin config when doing a import _ from 'lodash-es' style import:

    babel({
      plugins: [['lodash', {id: 'lodash-es'}]],
      presets: ['es2015-rollup']
    }),

Or not even using the lodash babel plugin and just doing:

import omit from 'lodash-es/omit'
import assignWith from 'lodash-es/assignWith'
import partialRight from 'lodash-es/partialRight'
import isUndefined from 'lodash-es/isUndefined'
import pick from 'lodash-es/pick'
import omitBy from 'lodash-es/omitBy'

Dunno if that's helpful.

[taoeffect]

Oh, just discovered also: so going with the latter method (not including the lodash plugin and using lodash-es), I can completely omit commonjs() from the plugins and it works fine.

If I add it as just commonjs(), it gives this error:

Warning: 'import' and 'export' may only appear at the top level (2:0) in /project/node_modules/lodash-es/_root.js Use --force to continue.

If I add it but do an exclude via commonjs({exclude: ['node_modules/lodash-es/**']}) then it goes back to working again (saw that here). commonjs({include: 'node_modules/**'}) breaks it, but commonjs({include: 'node_modules/**', exclude: ['node_modules/lodash-es/**']}) works (that makes sense as it has the exclude).

Head is tired and I don't really know what's going on, but in case this is helpful thought I'd list it here.

Also, after going to all this trouble I still end up with a 4k line file when my original code is only about 75 lines. Admittedly that's better than the 16k I was seeing (which seemed to happen when all or most of lodash was included). So... now gotta figure out how to trim it down even further, perhaps by implementing these functions myself. :-\

[taoeffect]

In the end, simply implementing these functions myself instead of relying on lodash took me from over 4000 lines down to 160 (and that's with comments and no minifying).

var _ = {
  isUndefined (x) { return x === undefined },
  pick (o, props) {
    var x = {}
    props.forEach((k) => x[k] = o[k])
    return x
  },
  omit (o, props) {
    var x = {}
    Object.keys(o).forEach((k) => { if (props.indexOf(k) === -1) x[k] = o[k] })
    return x
  },
  omitBy (o, pred) {
    var x = {}
    Object.keys(o).forEach((k) => { if (!pred(o[k])) x[k] = o[k] })
    return x
  },
  partialRight (f, ...partials) {
    return function (...args) {
      f(...args, ...partials)
    }
  },
  assignWith (o, ...args) {
    var customizer = args[args.length - 1]
    args.pop()
    args.forEach((s) => {
      Object.keys(s).forEach((k) => {
        let x = customizer(o[k], s[k], k, o, s)
        if (x !== undefined) o[k] = x
      })
    })
  }
}

My Gruntfile is much simpler now too:

var babel = require('rollup-plugin-babel')
var uglify = require('rollup-plugin-uglify')

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt)

  var plugins = [babel({presets: ['es2015-rollup']})]
  var plugins_uglify = plugins.concat([uglify()])

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    checkDependencies: {this: {options: {install: true}}},
    rollup: {
      options: { plugins: plugins },
      umd: {
        options: {
          format: 'umd',
          moduleName: '<%= pkg.name %>'
        },
        files: { 'dist/bundle.umd.js': ['src/index.js'] }
      },
      ugly: {
        options: {
          format: 'umd',
          moduleName: '<%= pkg.name %>',
          plugins: plugins_uglify
        },
        files: { 'dist/bundle.umd.min.js': ['src/index.js'] }
      },
      es6: {
        options: { format: 'es6' },
        files: { 'dist/bundle.es6.js': ['src/index.js'] }
      }
    },
    standard: { dev: {} }
  })
  grunt.registerTask('default', ['standard', 'rollup'])
}

I highly recommend this approach. 😄

[jt3k]

I am also not able to use rollup+lodash

[Victorystick]

@jt3k Try using lodash-es instead.

[baerrach]

I can confirm removing commonjs plugin from the rollup config with lodash-es works.
Either complete remove it or use exclude option for commonjs.