Does not work with Babel 7 beta

[nicmosc]

• babel-macros version: 1.2.0
• babel-preset-env: 7.0.0-beta.3
• node version: 8.6.0
• npm (or yarn) version: 5.3.0

Relevant code or config

Simple index.js

const test = preval`module.exports = 1`;

console.log(test);

.babelrc

{
  "presets": [ "env" ],
  "plugins": ["babel-macros"]
}

What you did:
Ran yarn babel index.js.

What happened:
Log:

TypeError: Cannot read property 'loose' of undefined (While processing preset: "/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-preset-env/lib/index.js")
    at _default (/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-plugin-transform-es2015-modules-commonjs/lib/index.js:15:22)
    at Function.memoisePluginContainer (/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
error Command failed with exit code 1.

Problem description:
It seems that babel-macros does not play well with the latest beta version of Babel 7. A bit of a shame since I'd like to use macros to solve another issue caused by Babel 7 with some older code.

A similar error is triggered when using babel-preset-react:

TypeError: Cannot read property 'pragma' of undefined (While processing preset: "/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-preset-react/lib/index.js")

Suggested solution: None for now

[kentcdodds]

Hi @nicmosc, thanks for filing the issue.

Hmmm... Your index.js does not import preval at all? Did you try installing preval.macro? Then it should be:

const preval = require('preval.macro');

const test = preval`module.exports = 1`;

console.log(test);

[kentcdodds]

Also, that error is not coming from babel-macros... It's coming from babel-preset-env. Could you make a reproducible example of babel-macros not working that uses only babel-macros (and uses a macro properly) and nothing else?

[larsbs]

Hi @kentcdodds I made a test repo with some code to show the errors, you can find it here: https://github.com/larsbs/babel-macros-test

I had to do some "hacks" in order to make it run the code. First, if you try to use babel-macros in .babelrc, it's gonna complain because babel can't find babel-plugin-babel-macros. If you try to use module:babel-macros, then preval.macro is gonna complain as well. So in the end, what I had to do is alias babel-macros to babel-plugin-macros inside the node_modules folder.

One final note, if you run the same code but using babel@6 it's gonna work without issues so it probably it's related to a change in babel-plugins api or something like that.

[kentcdodds]

Well that's super odd. Probably a bug with babel@7 or some breaking change like you said @larsbs. Thanks for bringing this up @nicmosc!

cc @loganfsmyth, @hzoo :)

[loganfsmyth]

This is because babel-plugin-preval depends on babel-core@6. https://github.com/kentcdodds/babel-plugin-preval/blob/ec3df93ccfb476986a1b0545a3f75da961a9e75b/package.json#L24 from https://github.com/kentcdodds/babel-plugin-preval/blob/635a162c6304152fecb16da6a2baf56209b2613b/src/get-replacement.js#L9, so it's going to try to read the user's .babelrc, and now that config file references Babel 7.x presets/plugins, which will not run on Babel 6.x

[kentcdodds]

Ah, that's unfortunate. Thanks for the tip @loganfsmyth!

What do you suggest in this scenario? Should I move babel to a peerDependency of preval?

[loganfsmyth]

@kentcdodds The transition to 7.x is gonna be a little bumpy for people with more complicated plugins like this one. A peerDep is the way to go. In 7.x we've moving all of Babel's plugins to have peerDeps on babel-core too. That said, with babel/babel#6549 we're also moving all of 7.x to a scope, so you'd need to release a new major version that has a peerDep on "@babel/core": "7.x", which means it won't be compatible with Babel 6.x. We haven't published into our scope yet, but we'll be doing it very soon.

Also to the point above mentioned in

I had to do some "hacks" in order to make it run the code. First, if you try to use babel-macros in .babelrc, it's gonna complain because babel can't find babel-plugin-babel-macros. If you try to use module:babel-macros, then preval.macro is gonna complain as well. So in the end, what I had to do is alias babel-macros to babel-plugin-macros inside the node_modules folder.

You may want to rename this to have an babel-plugin- prefix, or you'll need to update your docs for users to use module:babel-macros. babel/babel#5547

[kentcdodds]

I'll see if I can get babel-plugin-macros. If not, then I'll either change the docs or something else... I don't like babel-plugin-babel-macros though 😅

Thanks again @loganfsmyth!

[loganfsmyth]

Oh actually! You may have one option to avoid the peerDep mess for now, though I don't know if your API exposes it? The babel option in https://github.com/kentcdodds/babel-macros/blob/39836cfd1a63d30cf22dde4f5db6050f2da3d34b/src/index.js#L44 has babel.transform on it with whatever version loaded the plugin, so if that object is passed through to the macros, preval might be able to use it from there instead.

Still better to have the peerDep in the long run, but at least then you could transition to it in a future major version when you actually want to drop 6.x support.

[kentcdodds]

Thanks. I'd considered doing that, but went with requiring babel-core to make it easier (so I don't have to pass babel around). But let's go ahead and do that refactor. Anyone wanna do that? 👉 kentcdodds/babel-plugin-preval#43

[kentcdodds]

As an update, @xjlim refactored out babel-core from the deps in preval, so you should be able to get this to work now 👍

[larsbs]

I just tried the new babel-plugin-preval and is working! 🙌. One suggestion, you should update preval.macro to use the new version of babel-plugin-preval too.

[kentcdodds]

Thanks! preval.macro has a generous version range I think so it should automatically update.

[haltcase]

FYI I'm using Babel 7 for everything in param.macro, which uses itself in its source and GitHub pages site. So babel-macros itself seems to work fine everywhere for me, it just comes down to each macro I think. Maybe this can be closed now?

[kentcdodds]

Perhaps. But I'll keep this open until I official change it to babel-plugin-macros (which I did get publish rights to by the way). 👍 Hopefully this will happen soon

[kentcdodds]

Alrighty, babel-plugin-macros has been published and we're now testing with babel-core @ 7

[developer239]

So how did you fix this one? 😄

[kentcdodds]

9b178f0

[developer239]

I have following dev dependencies:

    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^2.0.0-beta.2",
    "babel-preset-react": "^7.0.0-beta.3",
    "babel-register": "^7.0.0-beta.3",
    "clean-webpack-plugin": "^0.1.19",
    "electron": "2.0.5",
    "electron-packager": "^12.1.0",
    "eslint": "^5.1.0",
    "prop-types": "^15.6.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.16.0",
    "webpack-cli": **"^3.0.8"**

and I couldn't make the babel thing work with jest because of:

TypeError: Cannot read property 'pragma' of undefined (While processing preset: "/Users/nick/Documents/Drawbotics/repos/platform-ff/node_modules/babel-preset-react/lib/index.js")

[kentcdodds]

You may need to install babel-core@7. Look at the jest documentation. It explains how to make it work with babel 7.