rollup: PARSE_ERROR when code contains "process.env ="

[myWsq]

Describe the bug

The error caused by phaser library . And then I found: if the code contains process.env=<any> and run vite build, it will raise a rollup parserError.

Reproduction

Write process.env={} any where and run vite build.

System Info

• required vite version: 1.0.0-rc.4
• required Operating System: MacOS 10.15.7
• required Node version: 14.7.0

[underfin]

I'm not sure why you give a value to process.env. The value of process.env should comes form your env config and vite will replace it in build.It will cause confilcts with runtime becuase you overwrite it if it can be correct build.

[myWsq]

I didn't intend to do this but some libraries like phaser contain such code. Do you have a walkaround for this? @underfin

[underfin]

It is very wirely for library if it change process.env.I think you should ask the maintainer of phaser remove process.env=value .

[jbjorge]

It would be great if we could figure out a workaround together.
It might seem like process.env = {} is a byproduct from webpack (or whichever bundler the library creators use) making builds runnable in the browser.

In my project

▶ grep -iRl "process.env = {}" ./node_modules | wc -l
17 (packages)

In the source of one of the dependencies that contain it

▶ grep -iRl "process.env = {}" ./node_modules | wc -l
35 (packages)

I suspect we would need to ask a lot of maintainers to change their builds if we want to get rid of this error without using a workaround.

[ais-one]

how about downloading from CDN and using it from a script tag...

[myWsq]

how about downloading from CDN and using it from a script tag...

That's my current solution, but it can only be imported from a remote CDN. Vite will bundle all the js files, even if that's not the entry file.

[ais-one]

you can download from CDN and place it in the public folder... I think the bundler does not touch the things in there...

[hyrious]

Same problem when importing https://cdn.jsdelivr.net/npm/bizcharts/, which has falsy module field in package.json, which depends on react so its umd output cannot be put in script tag when react is imported from module.

In the end I did a hack on node_modules/that_module and apply the hack on every "postinstall":

• remove "module" field in package.json so that vite (and rollup, build) will use "browser" field
• remove "process.env = ..." in umd/BizCharts.js so that rollup won't complain about it

I don't think this issue could be resolved by vite -- it should be resolved by library authors :/

[pd4d10]

Probably caused by this process shim, which is used in webpack bundling:

https://github.com/defunctzombie/node-process/blob/master/browser.js#L157

[jonhenning]

Same problem with using mermaid
https://github.com/mermaid-js/mermaid

node_modules/mermaid/dist/mermaid.core.js

  process.title = 'browser';
  process.browser = true;
  process.env = {};
  process.argv = [];
  process.version = ''; // empty string to avoid regexp issues
  process.versions = {};

@hyrious I'd be interested on how to "apply the hack on every post install". My machine I can open up the node_modules and remove the line, but the build machines won't work that way. This webpack world is not something I am very knowledgeable on as far as my options.

[hyrious]

@hyrious I'd be interested on how to "apply the hack on every post install". My machine I can open up the node_modules and remove the line, but the build machines won't work that way. This webpack world is not something I am very knowledgeable on as far as my options.

This is quite easy, you can come up with a hack.ts:
https://gist.github.com/hyrious/6817207816032d532a10e53e4c3daac8

Then in package.json:

"postinstall": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" hack.ts",

---

BTW, I've tried mermaid in vite2, it seems there's no such issue at all.