UMD bundle

[michalvadak]

I tried to export my React package as UMD package to be able to include it in HTML. But I can't get it to work. I can't access it.

This is my index.tsx

const init: InitInterface = (config, selector) => {
  return ReactDOM.render(
    <StrictMode>
      <MyComponent {...config} />
    </StrictMode>,
    selector
  )
}

export default { init }

This is my command in package.json microbundle -o umd --no-compress --format umd --name MyModule --jsx React.createElement --external none

This is my code in HTML

<script src="assets/js/my_module.umd.js" type="text/javascript"></script>
<script>
    MyModule.init({"foo": "test"});
</script>

And I get this error

index.tsx:14 Uncaught ReferenceError: process is not defined
    at index.tsx:14:5
    at index.tsx:14:5
    at index.tsx:14:5
(anonymous) @ index.tsx:14
(anonymous) @ index.tsx:14
(anonymous) @ index.tsx:14
(index):589 Uncaught ReferenceError: MyModule is not defined
    at (index):589:5

[rschristian]

So unfortunately it's pretty common in React bundles to see something like the following:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./redux-toolkit.cjs.production.min.js')
} else {
  module.exports = require('./redux-toolkit.cjs.development.js')
}

(see #824)

This results in the process is not defined error when used in the browser as process is specific to Node.

You can use Microbundle's --define flag to correct this though.

microbundle .... --define process.env.NODE_ENV=production

You should notice that this will also cut your build output roughly in half, as Microbundle can now shake out the dev-only code.

[michalvadak]

@rschristian

Thank you very much! You saved me!

Could you please help me with this also?

1. I wonder if I should use the --strict flag when compiling the UMD package. Do you think there is any major difference?
2. Is there a way to get rid of this annoying message?

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

[rschristian]

Sorry for the delay.

1) The major difference is strict mode. I'm not positive that the minification takes advantage of the lack of strict mode, but that could be a few bytes saved when not using it. Really it's just up to you and the behavior you want.

2) Are you using this at the top level? It's from Rollup, and it's a pretty valid warning as there could be issues when generating older output (I think this goes away with es2017/Microbundle's modern).

See https://rollupjs.org/guide/en/#error-this-is-undefined, https://github.com/rollup/rollup/issues/1518, and https://github.com/developit/microbundle/issues/682

[rschristian]

Closing out, seems to be resolved.