Using isLibrary in browser context for React includes development dependencies in build

[nilsfr]

🐛 bug report

I am creating a bundle that is meant to be used as a library in the browser. I did this using the--gobal option in the old parcel-bundler. When I migrated to v2 parcel I did this using a target with isLibrary, browser context and esmodule output. In the browser I use <script type="module"> to import it.

<script type="module">
    import {VrtxBoxEditor} from "/path/to/box-editor/index.js";
</script>

🎛 Configuration package.json

{
  "name": "@vrtx/box-editor",
  "version": "1.0.1-rc.6",
  "description": "Editor for content-boxes in Vortex",
  "source": "src/index.ts",
  "targets": {
    "default": {
      "context": "browser",
      "isLibrary": true,
      "outputFormat": "esmodule",
      "includeNodeModules": {
        "events": true
      },
      "optimize": true,
      "publicUrl": "/vrtx/__vrtx/static-resources/box-editor/"
    }
  },
  "scripts": {
    "prebuild": "rm -fr dist;",
    "build": "parcel build",
    "check": "tsc --noEmit",
    "prepare": "npm run build;"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@types/react": "^18.3.19",
    "@types/react-dom": "^18.3.5",
    "events": "^3.3.0",
    "parcel": "^2.14.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^5.8.2"
  },
  "browserslist": [
    "fully supports es6-module"
  ]
}

🤔 Expected Behavior

A production-ready bundle is generated not including development dependencies. The bundle exports VrtxBoxEditor.

This did work when I first migrated to Parcel version 2.12. Later I updated Parcel to 2.14 and it's dependencies and this stopped to work as I expected, as explained below.

$ npx parcel build --detailed-report
✨ Built in 1.10s

dist/index.js                                                                                               208.52 kB    356ms
├── node_modules/react-dom/cjs/react-dom.production.min.js                                                  128.44 kB    106ms
├── ../vrtx-components/dist/esm/node_modules/@stencil/core/internal/client/index.js?app-data=conditional        14 kB      0ms
├── Code from unknown sourcefiles                                                                             7.47 kB      0ms
├── node_modules/react/cjs/react.production.min.js                                                            6.04 kB     12ms
├── ../vrtx-components/dist/utils/node_modules/events/events.js                                               5.94 kB      0ms
├── ../utils/node_modules/events/events.js                                                                    5.93 kB     12ms
├── src/CK4Field.tsx                                                                                          5.56 kB     16ms
├── ../vrtx-components/dist/esm/src/lib/image-alt-labels.ts                                                   3.69 kB      0ms
├── node_modules/scheduler/cjs/scheduler.production.min.js                                                    3.31 kB     12ms
└── src/FrontPageBoxEditor.tsx                                                                                 3.3 kB    103ms
└── + 34 more assets

😯 Current Behavior

It includes development dependencies for React. And inside the generated bundle a check "production"===process.env.NODE_ENV is done which do not work in the browser.

$ npx parcel build --detailed-report
✨ Built in 1.63s

dist/index.js                                                                                               519.15 kB    787ms
├── node_modules/react-dom/cjs/react-dom.development.js                                                     265.92 kB    307ms
├── node_modules/react-dom/cjs/react-dom.production.min.js                                                  128.43 kB    164ms
├── node_modules/react/cjs/react.development.js                                                              25.52 kB     27ms
├── ../vrtx-components/dist/esm/node_modules/@stencil/core/internal/client/index.js?app-data=conditional        14 kB      0ms
├── node_modules/react/cjs/react-jsx-runtime.development.js                                                  12.01 kB     28ms
├── Code from unknown sourcefiles                                                                            10.29 kB      0ms
├── node_modules/react/cjs/react.production.min.js                                                            6.03 kB     18ms
├── ../vrtx-components/dist/utils/node_modules/events/events.js                                               5.94 kB      0ms
├── ../utils/node_modules/events/events.js                                                                    5.92 kB     12ms
└── src/CK4Field.tsx                                                                                          5.56 kB     19ms
└── + 38 more assets

💁 Possible Solution

Remove isLibrary and change outputFormat to global. Then I explicitly add VrtxBoxEditor to the global window object so it is available outside the bundle.

window.VrtxBoxEditor = new VrtxBoxEditor();

[lorenzogrv]

I'm experiencing a possible related problem while evolving a poc for a dev server which enables component-based testing on cypress with parcel. Can't add much more, still researching what's going on with missing code at spec builds