parcel: Duplicated modules in output file

🐛 bug report

In my TypeScript + React project I’ve faced the problem with duplication of module in output JavaScript bundle. Same class imported two times. Project is monorepo maintained with Lerna.

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

.babelrc

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 1 Chrome version"
          ]
        }
      }
    ]
  ]
}

package.json

{
  "private": true,
  "version": "0.9.0",
  "description": "React Portlet",
  "keywords": [],
  "scripts": {
    "serve": "parcel main/html/index.html -d build/debug",
    "build": "parcel build main/html/index.html -d build/release",
    "test": "td"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "@monument/core": "^0.9.0",
    "@monument/react": "^0.9.0"
  },
  "devDependencies": {
    "@types/react": "^16.4.6",
    "@types/react-dom": "^16.0.6",
    "parcel-bundler": "^1.9.7"
  }
}

CLI command:

$ npm run serve

🤔 Expected Behavior

I think that all modules should accur only once in output bundle.

😯 Current Behavior

Currenly some classes are duplicated in output bundle.

💁 Possible Solution

I think root of the problem is symlink structure created by Lerna.

🔦 Context

In project I don’t use code splitting yet. At some point of time with help of logging I’ve found that some classes are duplicated in output bundle.

💻 Code Sample

In my case module with class “Class” is duplicated as well as probably some others.

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	10.5.0
npm	6.1.0
Lerna	2.11.0
Operating System	Windows 10, Ubuntu

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 36 (11 by maintainers)

Most upvoted comments

@DeMoorJasper , this bug is really blocker. Will you try to fix it in nearest future? It’s one of core features (resolving file paths) and it does not work properly. I can give more information about use-case if needed.

avchugaev on Aug 27, 2018

If someone runs into this again with Parcel 2: please open a new issue with a code sample.

mischnic on Jan 6, 2021

Now the problem is, if I also include the same file in my other module, the path will be this: ~/main_folder/project/node_modules/module_i_made/lib/much_code1.ts

We do take the realpath in Parcel 2. Or at least will do that once https://github.com/parcel-bundler/parcel/pull/5508 is merged

mischnic on Dec 31, 2020

Rule of thumb: try it with Node’s CJS behaviour or Node/browsers native ESM. This is how Parcel should behave, we are not trying to invent our own module format

mischnic on Dec 11, 2020

Possible problem is symlinks structure created by Lerna. Output javascript bundle includes same classes but under different file paths. “Unwrapping” symlinks may help in this situation. I mean paths should be pre-processed before registering a chunk to use real file path as chunk ID.

For example all these paths points to the same file

<root>/packages/core/main/reflection/Class.js
<root>/packages/react/node_modules/@monument/core/main/reflection/Class.js

but <root>/packages/react/node_modules/@monument/core is symlink that points to <root>/packages/core not a directory itself.

avchugaev on Aug 9, 2018

@bertfreudenberg @skipjack Ok, I tried something different and it works like a charm. Instead of making all the packages being linked to each other, I used yarn workspaces: https://classic.yarnpkg.com/en/docs/workspaces/

this way all the common dependencies are in the same directory and yarn symlink everything so pkg1 looks for the dep on …/node_modules and pk2 also looks there. the path is the same and the dep is added only once in the bundle. I created a new branch on my repo with the version that works well: https://github.com/lrgalego/parcel-test/tree/works-with-yarn-workspaces

lrgalego on Mar 26, 2020