Parcel: "process" not defined for babel-plugins (emotion)

[sebald]

🐛 bug report

I was trying out emotion @ version 10.0.0-beta.7 with the babel-plugin.
With the default config:

{
  "plugins": ["emotion"]
}

the plugin seems to try to access process to determine if it should run in production or development mode (to add labels or minify), but fails since it can not access the variable.

Uncaught ReferenceError: process is not defined
    at Object.parcelRequire.src/ui/SomeComponent/SomeComponent.tsx.@emotion/styled-base

Note: I am not 100% sure that this is an issue wie Parcel, could also be that the plugins does something it shouldn't do?

🎛 Configuration (.babelrc, package.json, cli command)

// .babelrc
{
  "plugins": ["emotion"]
}

// package.json
{
  "main": "src/index.ts",
  "dependencies": {
    "@emotion/core": "^10.0.0-beta.7",
    "@emotion/styled": "^10.0.0-beta.7",
    "react": "^16.7.0-alpha.0",
    "react-dom": "^16.7.0-alpha.0"
  },
  "devDependencies": {
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "parcel-bundler": "^1.10.3",
    "typescript": "^3.1.6"
  },
  "scripts": {
    "start": "parcel index.html"
  }
}

🤔 Expected Behavior

emotion can not access required ENV vars:

Uncaught ReferenceError: process is not defined
    at Object.parcelRequire.src/ui/SomeComponent/SomeComponent.tsx.@emotion/styled-base

😯 Current Behavior

emotion can not access the process var and throws.

🔦 Context

Trying the next version of emotion (v10).

💻 Code Sample

SomeComponent.tsx

import * as React from 'react';
import styled from '@emotion/styled';

export const SomeComponent = styled.div`
  color: hotpink;
`;

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.3
| Node | v10.8.0
| Yarn | 1.9.4
| Operating System | MacOS Mojave

[XGHeaven]

Same error here.

I found a relative issue in emotion repo, https://github.com/emotion-js/emotion/issues/1132#issuecomment-449936286

Im pretty sure I tested this sometime and I think that parcel is replacing process.env.NODE_ENV before babel runs so when we insert process.env.NODE_ENV for source maps parcel never replaces it.

[DeMoorJasper]

Inlining Environment variables is being done before anything else runs, see this line: https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/assets/JSAsset.js#L158

Not sure if moving it to after user transforms would have a big impact or not. But feel free to experiment with it and open a PR if it actually works better :)

[alflennik]

There is a PR here that will ~resolve~ simplify the resolution of this issue (not merged yet) https://github.com/parcel-bundler/parcel/pull/2695

Edit: Thanks for the clarification @mischnic.

[mischnic]

There is a PR here that will resolve this issue (not merged yet)

@alflennik I think you misunderstood this comment: that PR only fixes the JSX pragma overriding (which is why I listed transform-node-env-inline as a plugin). This bug is caused by an unusual babel plugin implementation by emotion.

Not sure if moving it to after user transforms would have a big impact or not. But feel free to experiment with it and open a PR if it actually works better :)

@DeMoorJasper

The issue is that the emotion babel plugin injects process.env.NODE_ENV into the generated code (but it seems to be the first plugin to do this, otherwise this would have been way reported earlier).
Reason: await babel(this); adds env expressions but ENV_RE.test(this.contents) doesn't use the babel output but rather the original asset input.
But doing the AST->code conversion twice seems very expensive (either explicitly or by letting babel.transform create it alongside the AST)
https://github.com/parcel-bundler/parcel/blob/27f769a02ad9a54f8c1bac13961068cd34cdfd03/packages/core/parcel-bundler/src/assets/JSAsset.js#L153-L159

[alflennik]

@devongovett I saw that the PR fixing this issue was closed because of work on Parcel 2. What are we expected to do right now regarding this issue?

[mischnic]

I saw that the PR fixing this issue was closed because of work on Parcel 2. What are we expected to do right now regarding this issue?

(Again, we are really talking about #2470. This issue is not about the JSX pragma.)

Yes, the PR was considered too big of a potential breaking chance. Parcel 2 is going to use a .babelrc unmodified if provided (no strange overrides). I guess you'll have to use the workaround described in #2470.

[mischnic]

This will be fixed in Parcel 2 (#3334)