(babel plugin) Error: Rollup requires that your Babel configuration keeps ES6 module syntax intact.

[DonikaV]

Trying to build

(babel plugin) 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 ).
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 ).

My babel config

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ], '@babel/react', '@babel/typescript'
  ],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }], // storybook requirement
    ['@babel/plugin-proposal-private-methods', { loose: true }], // storybook requirement
    ['@babel/plugin-proposal-private-property-in-object', { loose: true }], // storybook requirement
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-transform-async-to-generator',
    '@babel/plugin-syntax-optional-catch-binding',
    '@babel/plugin-transform-modules-commonjs',
    '@babel/plugin-transform-object-assign',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-runtime',
    ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-runtime', 'dynamic-import-node']
    }
  }
};

[rschristian]

Why are you using so many plugins? Most of those are redundant and/or fighting Microbundle, as you see in the error message.

Comment out the entire config, only add back in the plugins you absolutely need.

[DonikaV]

@rschristian hey, I am not the author of this repo, the author left the company, I am trying to edit the procedure of build and npm publish. I commented babel plugins and now

Failed to resolve the module @styles_cnDS/index.scss imported by src/CN_Design_System/index.ts
Is the module installed? Note:
 ↳ to inline a module into your bundle, install it to "devDependencies".
 ↳ to depend on a module via import/require, install it to "dependencies".

The @styles_cnDS is just an alias in tsconfig "paths": { "@fonts_cnDS": ["src/CN_Design_System/assets/fonts"], "@images_cnDS": ["src/CN_Design_System/assets/images"], "@styles_cnDS": ["src/CN_Design_System/assets/styles"] },

[DonikaV]

semantic error TS2304: Cannot find name 'h'. now I have this If u run build command as "build": "microbundle --jsx React.createElement",

I got (56,5): semantic error TS2304: Cannot find name 'Fragment'.

UPDATE.

Now I have $ microbundle --jsx React.createElement --tsconfig ./tsconfig.json -f cjs,es --no-compress jsxFragment Error: No entry module found for "MY_MODULE"

[rschristian]

No worries, I'll try to walk you through everything, apologies if you've already discovered the solution to some of these issues.

The @styles_cnDS is just an alias in tsconfig

Microbundle does not pick up "paths" from a tsconfig.json. That's outside of its scope. Instead, use the --alias flag:

$ microbundle ... --alias @styles_cnDS=src/CN_Design_System/assets/styles

semantic error TS2304: Cannot find name 'h'. now I have this If u run build command as "build": "microbundle --jsx React.createElement",

I got (56,5): semantic error TS2304: Cannot find name 'Fragment'.

Indeed, as you found, Microbundle defaults to Preact's JSX settings. You'll need to set both the JSX pragma and the JSX fragment pragma:

$ microbundle ... --jsx React.createElement --jsxFragment React.Fragment

UPDATE.

Now I have $ microbundle --jsx React.createElement --tsconfig ./tsconfig.json -f cjs,es --no-compress jsxFragment

Setting --tsconfig ./tsconfig.json is the same as the default, it can just be removed. I'm not sure why you've appended jsxFragment onto the end of your command though, typo perhaps?

Error: No entry module found for "MY_MODULE"

I believe Microbundle will look for a src/index file or ./index. If one does not exist, you can use the "source" key in your package.json to specify the entry point.

[DonikaV]

@rschristian hey, i created another repo and put all components inside of it, I use create-react-app (typescript) and storybook I want now build the project but getting typescript errors (rpt2 plugin) Error: (44,25): semantic error TS2532: Object is possibly 'undefined'. Can I disable it somehow? Thanks.

[rschristian]

I don't follow -- are you using Microbundle or CRA?

I want now build the project but getting typescript errors (rpt2 plugin) Error: (44,25): semantic error TS2532: Object is possibly 'undefined'. Can I disable it somehow?

Standard TS procedure applies here, nothing Microbundle-specific. Just use a // @ts-ignore comment.

[DonikaV]

I want create npm module, as i understand microbundle is for this, or no? :)

[rschristian]

It is, yes. I was just struggling to see how creating a new CRA/storybook app was relevant, unless you were talking about replacing Microbundle with that (which is what I assumed).

[rschristian]

Closing this out for now as it seems your questions have been answered. Feel free to reply and we can reopen or work through anything else you're having issues with.