Usage with Babel 7

[donifer]

I have a question in regards of using this with Babel 7.

If I'm using a .babelrc.js do I need to set @babel/env options to {loose: true, modules: false }?

What about setting cjs && 'transform-es2015-modules-commonjs'? Is this still needed for Babel 7?

I'm trying to follow this tutorial if it helps.

[Andarist]

Hah, thanks for reading my tutorial 😉

loose is an option that tells babel to produce more concise (& faster) code at the cost of 100% spec compliance, so it's not related to babel@7 anyhow. I advise to use it (although better read what it does first).

You don't have to specify modules: false explicitly with babel@7, because rollup-plugin-babel can tell babel now that it supports native modules (esm) & thanks to that babel won't transpile modules. OTOH in other environments (i.e. when testing with jest) that only support cjs the modules transform will be used and it will be used with loose mode (because it's passed to the whole @babel/env) and IMHO it's not worth to use loose for commonjs transform - so kinda depends what do you value and what outcome do you like. Personally I'm probably going to stick with configuring modules "manually", because I want @babel/plugin-transform-modules-commonjs to run in its spec mode (and not loose). Ultimately it doesn't really matter that much, I'm just a crazy guy who wants to optimize whatever he can for his use case and I don't want __esModule property to be enumerable in cjs environments.

[rbiggs]

I'm trying to user this plugin with Rollup and Babel7. But I'm getting the following error in the console:

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 
If you are sure you have a compatible version of @babel/core, 
it is likely that something in your build process is loading the 
wrong version. Inspect the stack trace of this error to look for 
the first entry that doesn't mention "@babel/core" or "babel-core" 
to see what is calling Babel.

I'm running Rollup from the command line as an NPM script:

"scripts: {
  "bundle": "rollup -c"
}

My .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-external-helpers",
    "@babel/plugin-transform-parameters"
  ]
}

And my rollup.config.js:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import minify from 'rollup-plugin-babel-minify'

export default {
  input: 'index.js',
  output: {
    file: 'dist/composi.js',
    format: 'umd',
    name: 'composi',
    sourcemap: true,
    sourcemapFile: 'dist/composi.js.map'
  },
  plugins:
    [
      babel({
        exclude: 'node_modules/**'
      }),
      resolve({
        jsnext: true,
        main: true,
        browser: true
      }),
      commonjs(),
      minify({ 
        mangle: { topLevel: true } 
      })
    ]
}

What do I need to change to make it work with Babel?

[Andarist]

@rbiggs hard to tell without more info, could u paste in your package.json contents?

and of course the stack trace of thrown error would be super nice

[rbiggs]

package.json:

{
  "name": "composi",
  "version": "1.0.0",
  "description": "A JavaScript library for creating websites, PWAs and hybrid apps.",
  "main": "index.js",
  "scripts": {
    "bundle": "rollup -c",
    "build": "npm run format && npm run lint && npm run bundle && gzip dist/composi.js",
    "checkjs": "tsc --allowJs --checkJs --noEmit --moduleResolution node --target ES6 src/*.js",
    "test": "browser-sync . --index test/index.html",
    "format": "prettier --no-semi --single-quote --write ./src/*.js",
    "lint": "eslint --config ./.eslintrc.json src"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/composor/composi.git"
  },
  "keywords": [
    "angular",
    "component",
    "composi",
    "frontend",
    "hybrid",
    "hyperscript",
    "jsx",
    "library",
    "progressive web app",
    "pwa",
    "react",
    "vuejs",
    "virtual dom"
  ],
  "author": "Robert Biggs",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/composor/composi/issues"
  },
  "homepage": "https://github.com/composor/composi#readme",
  "devDependencies": {
    "@babel/core": "^7.0.1",
    "@babel/plugin-external-helpers": "^7.0.0",
    "@babel/plugin-transform-parameters": "^7.1.0",
    "@babel/preset-env": "^7.0.0",
    "@composi/get-type": "^1.0.0",
    "@composi/merge": "^1.0.0",
    "eslint": "^4.19.1",
    "gzip-cli": "^0.1.3",
    "prettier": "^1.13.7",
    "rollup": "^0.65.2",
    "rollup-plugin-babel": "^3.0.2",
    "rollup-plugin-babel-minify": "^6.0.0",
    "rollup-plugin-commonjs": "^8.2.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-resolve": "0.0.1-predev.1",
    "typescript": "^3.0.3"
  }
}

When I run npm run build I get the following:

 
$: npm run build

> composi@1.0.0 build /Users/rbiggs/Github/@composi/core
> npm run format && npm run lint && npm run bundle && gzip dist/composi.js


> composi@1.0.0 format /Users/rbiggs/Github/@composi/core
> prettier --no-semi --single-quote --write ./src/*.js

src/constants.js 74ms
src/h.js 29ms
src/render.js 8ms
src/unmount.js 10ms
src/vdom.js 91ms
src/vnode.js 19ms

> composi@1.0.0 lint /Users/rbiggs/Github/@composi/core
> eslint --config ./.eslintrc.json src


> composi@1.0.0 bundle /Users/rbiggs/Github/@composi/core
> rollup -c


index.js → dist/composi.js...
[!] (babel plugin) Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
index.js
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
    at throwVersionError (/Users/rbiggs/Github/@composi/core/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
    at Object.assertVersion (/Users/rbiggs/Github/@composi/core/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
    at _default (/Users/rbiggs/Github/@composi/core/node_modules/@babel/plugin-external-helpers/lib/index.js:29:7)
    at /Users/rbiggs/Github/@composi/core/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at Function.memoisePluginContainer (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/rbiggs/Github/@composi/core/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at /Users/rbiggs/Github/@composi/core/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:57:26
    at Object.transform$1 (/Users/rbiggs/Github/@composi/core/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:141:18)
    at /Users/rbiggs/Github/@composi/core/node_modules/rollup/dist/rollup.js:20831:25
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! composi@1.0.0 bundle: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the composi@1.0.0 bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rbiggs/.npm/_logs/2018-09-18T18_31_19_127Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! composi@1.0.0 build: `npm run format && npm run lint && npm run bundle && gzip dist/composi.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the composi@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rbiggs/.npm/_logs/2018-09-18T18_31_19_206Z-debug.log

[rbiggs]

If I leave out rollup-plugin-babel, I can bundle and minify without a problem. However I'd like to use new Babel presets and transpile down to last 2 browsers for production. So, I want to have the final output be ECMAScript 2015, with other features transpiled down to that using rollup-plugin-babel.

[tmartensen]

From the looks of your package.json, you're going to need an updated (>4) version of rollup-plugin-babel, since only version 4 and greater uses Babel 7.

[Andarist]

Yeah, that's right - please report back when u upgrade rollup-plugin-babel. I hope it helps.

[rbiggs]

OK, so doing an npm install --save-dev only installs 3.0.7. with @latest I got 4.0.3. Using that I get this error:

index.js → dist/composi.js...
[!] (babel plugin) Error: Cannot find module '@babel/preset-env' from '/Users/rbiggs/Github/@composi/core'
index.js
Error: Cannot find module '@babel/preset-env' from '/Users/rbiggs/Github/@composi/core'
    at Function.module.exports [as sync] (/Users/rbiggs/Github/@composi/core/node_modules/resolve/lib/sync.js:43:15)
    at resolveStandardizedName (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/rbiggs/Github/@composi/core/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)

Seems to be having problems with @babel scoped packages.

[Andarist]

Could u try removing & reinstalling your node_modules completely? Or maybe you could share your repository? Would help a lot in solving this quicker.

[rbiggs]

Let me see about making a smaller, reduced trial repo. Will be less to troubleshoot.

[miguelbermudez]

For what its worth, I had this same issue with jest and babel@7. The solution was to install babel-core": "^7.0.0-bridge.0". If you're using yarn you can add a resolutions to your package.json. You can check here for more details.

[rbiggs]

I made a simpler project and, surprise that worked. So I used that as the base for the complex project, adding everything in piece by piece and that compiles as expected. So closing this.

[Andarist]

Thanks for reporting back. I consider this issue closed, if you have any other issues please open a new one.

[bhariyani]

install "@babel/core": "^7.1.0"

[wintercounter]

I have 7.1.2 and the issue still exists so that won't help. Btw the bridge package is just a workaround, I wouldn't consider this issue as resolved...

[Andarist]

@wintercounter you have to share a repository with the issue reproduced to get some help, without it I won't be able to tell you what's the problem in your case

[HIGGO36]

Many of the fix comments above for the error ("[!] (babel plugin) Error: Cannot find module '@babel/preset-env' from ...") are not necessary if using the 'babel-upgrade' tool.
(which will automatically handle most of them)
( Ex: the upgrade tool will add "babel-core": "^7.0.0-bridge.0", if needed for your specific build and rearrange the order as needed. )

Working with npm, i used the 'npx babel-upgrade --write --install' command to do entire Babel 7 upgrade.
( Ref: https://github.com/babel/babel-upgrade/blob/master/readme.md )

THEN, to fix the Error message for ( [!] (babel plugin) Error: Cannot find module '@babel/preset-env' from ..."), because I am also using Rollup with this build...From the ROOT Directory, I then went to the Rollup configuration file that handles babel's options (there should only be a few of these to look thru to find the right one on your build).

**One way to find the correct rollup file with your build's Babel options, is to look inside the 'rollup.config.js' file and probably at the very top you will see UMD modules get imported from another file. It is that other file where pulling 'from' that you then want to find.

Once you find the correct Rollup file within the root dir that is managing your Babel options..then just update the babel option for the 'presets' to "@babel/preset-env". And now all is good!

Mine looks like this:

babel({
    babelrc: false,
    comments: true,
    sourceMap: true,
    moduleId: options.output.name,
    presets: [
      ["**@babel/preset-env"**, {
        modules: false,
        loose: true,
      }],
    ],
    exclude: 'node_modules/**',
  })