Can Aurelia CLI bundler work with React plugin? Node env issue

Help Requests
1

Hi,

I’m using a plugin that wraps a React-based UI plugin for use with aurelia (au-office-ui)

When using the CLI bundler and RequireJS (as opposed to Webpack), I get a node process error from within React:

Uncaught ReferenceError: process is not defined
    at Object.<anonymous> (scheduler.development.js:14)
    at Object.execCb (require.js:1696)
    at Module.check (require.js:883)
    at Module.enable (require.js:1176)
    at Object.enable (require.js:1557)
    at Module.<anonymous> (require.js:1161)
    at require.js:134
    at each (require.js:59)
    at Module.enable (require.js:1113)
    at Object.enable (require.js:1557)

The line in question:

if (process.env.NODE_ENV !== "production") {

Looking around, it seems that React runs in development mode by default, and checks node environment variables. Obviously this doesn’t exist running in the browser.

I have seen possibly related solutions using envify with Browserify or Webpack’s DefinePlugin to transform this check, but I can’t see how this would be done when bundling using Aurelia CLI.

1 Like
2

It’s a known problem of cli bundler. Documented in “Known problem of auto stubbing core Node.js modules”.

https://aurelia.io/docs/cli/cli-bundler/dependency-management#auto-tracing

1 Like
3

Forgot to mention, with cli-bundler, process.env.NODE_ENV always yields to undefined. So if you use cli-bundler to build react app, it always runs in dev mode.

Bundlers like webpack and parcel does special treatment on process.env, they replace process.env.NODE_ENV with the true env value at the time of build. So with webpack,

if (process.env.NODE_ENV !== "production") {

will be rewritten to something like

if ("development" !== "production") {

1 Like
4

I got it working. I am not sure if it is a hack or a solution, but anyway.

Add a file called nodeprocess.js at the root of your project. Same level as the node_modules folder.
Insert below content:

var process = {} || process;
process.browser = true;
process.env =
{
    NODE_ENV : 'production'
}

Then add below to your aurelia.json file. It is just the line refering to nodeprocess.js you need to add.

"name": "vendor-bundle.js",
    "prepend": [
      "nodeprocess.js",
      "node_modules/requirejs/require.js"
    ],

Now process is defined with enough attributes to get it running. I don’t know if it has any other side effects. This assumes that you want to run in the browser and you are using CLI for bundling with RequireJS.

P.S. Glad to hear you are using au-office-ui

1 Like