Microbundle: rollup.config.js

[jamieowen]

Hi,

Is it possible to define a custom rollup.config.js ( even though microbundle is meant to be zero config )

I'm having the following issue compiling a typescript/material ui library requiring me
to add some options to the rollup.config :

commonjs({
      include: 'node_modules/**',
      // left-hand side can be an absolute path, a path
      // relative to the current directory, or the name
      // of a module in node_modules
      namedExports: {
        'node_modules/react/index.js': [
          'cloneElement',
          'createContext',
          'Component',
          'createElement'
        ],
        'node_modules/react-dom/index.js': ['render', 'hydrate'],
        'node_modules/react-is/index.js': [
          'isElement',
          'isValidElementType',
          'ForwardRef'
        ]
      }
    })

Referenced from :
https://github.com/styled-components/styled-components/issues/1654#issuecomment-441151140
or
https://github.com/transitive-bullshit/react-modern-library-boilerplate/issues/29

Cheers,

[developit]

This would break the core design principles of Microbundle in order to fix a bug in React, so it's not something I would consider.

In terms of a solution to the problem you're tackling, you can alias react and react-dom to a module you write that imports React as a namespace and then re-exports it as named exports:

microbundle --alias react=./react.js

// react.js

import * as React from 'react';
const {
  cloneElement,
  createContext,
  Component,
  createElement
} = React;

export {
  cloneElement,
  createContext,
  Component,
  createElement
};

While it might seem a bit more verbose, it has the benefit of being code that actually runs according to the JS spec, rather than relying on a bundler configuration to violate the spec.

I recall Pika provides an ESM react wrapper package that essentially does what I wrote above. I don't have the link handy but that would be a cleaner automated solution - just alias react to the name of their wrapper module and you can use both named and default exports.

[jamieowen]

@developit Thanks man. Great Idea.

I managed to solve this using externals instead.
As I realised my react dependencies would be peer dependencies of the package in the end.

microbundle --external="react,react-dom,react-is"

I will keep the alias solution in mind for future!

[marvinhagemeister]

Awesome, sounds like the original problem is solved :tada:

[developit]

One note to drop here - I do think it could be feasible to add a configuration file for Microbundle, but it would be similar to how Jest's works - a file for supplying the same parameters it currently accepts as command-line arguments.

[girardiricardo]

@developit Thanks man. Great Idea.

I managed to solve this using externals instead.
As I realised my react dependencies would be peer dependencies of the package in the end.

microbundle --external="react,react-dom,react-is"

I will keep the alias solution in mind for future!

Works for me, but I chose to list react-is as a peerDeps.