mattpocock / xstate-codegen

A codegen tool for 100% TS type-safety in XState
MIT License
245 stars 12 forks source link

Babel config issues in Expo project #65

Closed expelledboy closed 3 years ago

expelledboy commented 3 years ago
Scanning File: engines/authentication.ts
Error: Rollup requires that your Babel configuration keeps ES6 module syntax intact. Unfortunately it looks like your configuration specifies a module transformer to replace ES6 modules with another module format. To continue you have to disable it.
Most commonly it's a CommonJS transform added by @babel/preset-env - in such case you should disable it by adding `modules: false` option to that preset (described in more detail here - https://github.com/rollup/plugins/tree/master/packages/babel#modules ).

I am aware you are making efforts to move to pure Typescript implementation, which should solve this issue. But its there anything I can do about the above?

I have no idea how rollup works, and the last time I cared about babel was back in 2015 or so. If not you can close this, and I will have to continue without for now. This is running in a fresh expo init myApp template

danielkcz commented 3 years ago

You are probably the first one trying this with RN. Can you try this simple wild guess?

node_modules/xstate-codegen/bin/extractMachines.js

After the line 212 add babelrc: false,

expelledboy commented 3 years ago
~/_local/repos/betaplum/che-cha on  master! ⌚ 20:44:57
$ grep -A3 -B3 -n babelrc /Users/anthony/_local/repos/betaplum/che-cha/node_modules/xstate-codegen/bin/extractMachines.js
210-                            plugin_babel_1["default"]({
211-                                babelHelpers: 'bundled',
212-                                extensions: extensions,
213:                                babelrc: false,
214-                                plugins: [
215-                                    '@babel/plugin-transform-typescript',
216-                                    '@babel/plugin-proposal-optional-chaining',

~/_local/repos/betaplum/che-cha on  master! ⌚ 20:44:59
$ yarn xstate-codegen "machines/**.ts"  | grep Error:
Error: Rollup requires that your Babel configuration keeps ES6 module syntax intact. Unfortunately it looks like your configuration specifies a module transformer to replace ES6 modules with another module format. To continue you have to disable it.
^C

For reference this is the config that comes with expo

~/_local/repos/betaplum/che-cha on  master! ⌚ 20:46:03
$ cat babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
danielkcz commented 3 years ago

Yea, as I said, it was just a wild shot. Maybe another blind shot could be babelrcRoots: false, other than that I don't know. I don't feel like diving into how the discovery of Babel config works.

orther commented 3 years ago

I tried xstate-codegen for the first time tonight and ran into this same issue on a react-native project.

To get around this while running the cli I could manually remove the presets: [...] from the babel config temporarily. To not have to manually add and remove the presets from the config file I hacked my babel.config.js to set no presets if the caller was name: "@rollup/plugin-babel" with the supportsStaticESM: true (which is what xstate-codegen passes in).

I haven't used or tested this much but here's the my bable.config.js in case it's helpful:

function isRollupSupportsESM(caller) {
  return caller && caller.name === "@rollup/plugin-babel" && caller.supportsStaticESM
}

module.exports = function (api) {
  const skipPresets = api.caller(isRollupSupportsESM)

  return {
    presets: skipPresets ? [] : ["module:metro-react-native-babel-preset"],
  }
}
expelledboy commented 3 years ago

@orther you da man! Works like a charm.