roxiness/routify-starter

process is not defined when using @emotion/css

Closed this issue · 1 comments

lamualfa commented

Problem

process is defined in the rollup.config.js file. Then why is the process variable undefined when run in the browser?

routify-starter/rollup.config.js

Line 78 in 6598b59

code: code.replace('process.env.NODE_ENV', `"${process.env.NODE_ENV}"`),

Error in Browser

Uncaught ReferenceError: process is not defined
    at eval (node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js:232)
    at Object.__impl (main.js:1059)
    at executeModuleImpl (main.js:182)
    at resolve_module (main.js:229)
    at main.js:223
    at Array.forEach (<anonymous>)
    at resolve_module (main.js:212)
    at main.js:223
    at Array.forEach (<anonymous>)
    at resolve_module (main.js:212)

Solution

In my internal project I use the rollup-plugin-inject-process-env plugin. You can merge the #90 PR if you agree.

Why ?

Because replacing a string typically with rollup-plugin-replace works in one case :

    console.log(process.env.NODE_ENV);

...but not in all other cases :

    console.log(process.env['NODE_ENV']);
    const { NODE_ENV, NODE_PORT } = process.env;
    console.log(NODE_ENV);

Worse : sometimes, such substitution :

    if (process.env.NODE_ENV === 'production') {

...will be expand to :

    if ('production' === 'production') {

...and make some linter complain.

jakobrosenberg commented

I'm for the cleaner transform, but against adding dependencies if they can be avoided.

Would appreciate some opinions on this.

  • 👍1