process is not defined when using bundle with webpack 5 project

[kbrah]

Hi,

My bundle stopped working after I updated the project using it to webpack 5. I have tried --define process.env.NODE_ENV=production. It fixes that error, but a bunch of other errors appear. I do not use process in my project.

My microbundle project is React + TypeScript and the project using it is a single-spa React module.

Any ideas how to fix this?

[rschristian]

Webpack v5 no longer provides a polyfill for that (Node.JS) variable. You'll have to bring your own fix, using something like DefinePlugin or EnvironmentPlugin. The Webpack v4 to v5 docs have section dedicated to this (first item under "Level 5: Runtime Errors").

You might not be using process, but that's not to say some dependency of your app isn't.

[kbrah]

Can I somehow add it to the microbundle bundle? I would prefer not to have to include it in every client project

[rschristian]

Are you sure it's even coming from your widget? There's a lot of modules that rely on it still, and would be common place in enough apps to justify adding a plugin to handle it.

What errors/warnings are you actually seeing?

[kbrah]

The error process is not defined, only appears if I try to use my widget and the stack trace points to the bundle. If I add the define process.env.NODE_ENV the new errors are related to CSS modules. The imported CSS module is not defined.

Adding the process/browser with a plugin fixes the error, but when I try to use the umd module in the browser without any webpack etc. I still get that error with the CSS modules

[kbrah]

I got the umd working by using the microbundle-crl. Still requires the process though. Not really sure what part of microbundle-crl fixes the css modules issue.

[rschristian]

How exactly are you importing the CSS into your app? CSS Modules require a loader to process, so if you're trying to use import style from 'my-module/style.css'; in the browser then that won't work. You can just use import 'my-module/style.css'; instead.

[kbrah]

I use this import style from 'my-module/style.css';. Turns out the combo with using microbundle-crl and --define process.env.NODE_ENV=production fixes all my problems including the CSS module issue.

[rschristian]

Why are you using that style of import? Unless you're trying to reuse the CSS from your widget/library in your app, that doesn't make sense to do. CSS Modules swap out the class name at build time. Once built, there's no reason to import the styles from your module like that unless you're trying to repurpose them.

microbundle-clr is also not maintained, so I'd probably recommend against using it.

[kbrah]

I mean that I'm just using CSS modules in my source. I don't know how microbundle builds it, but the error was somehow related to that. This is an example usage I have in my code. The error would be something like cannot read property 'some-theme' of undefined

import themeCss from './themeCss.css'
// theme === "some-theme"
const comp = ({theme}) => (<div className={themeCss[theme]> <div/>)

// themeCss.css
.some-theme .colorText {
    color: #2c2c2
}

[developit]

@kbrah Microbundle supports that, but you have to call the file 'themeCss.module.css' (ending in .module.css) to enable it.

[kbrah]

I had --css-modules true so it should work without the ending right?

[rschristian]

@kbrah Should do, yeah. Any chance you could provide a repo that reproduces this? Happy to look at it but don't have more guesses as towards what your issue is.