dwmkerr commented 1 year ago

🐛 bug report

When loading the mermaid.js diagramming library, via import, the library loads correctly. However, when a command is called that leads to an async import call in the library itself, the command fails. I think this is either because:

Tree shaking is removing the required code from the dist, as the import is dynamic
Somehow module names are being changed in a way that is not properly handled by the library, such as the required module having a hash added but the source code not using the hash.

I have created a very minimal reproduction of the issue in a repository. In the same reproduction repository I have also verified that the issue does not occur if using the rollup.js bundler:

https://github.com/dwmkerr/parcel-mermaid-import-issue

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

package.json
No babelrc

🤔 Expected Behavior

When the "Render" button in the screenshot below is pressed, parcel would allow me to call the 'render' API from the mermaid.js library:

😯 Current Behavior

The call fails. Initially, it would seem like a mermaid error:

However, debugging the code shows that the root cause, at least from mermaid's perspective is here:

This code can be seen here: https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts#L22

I believe the issue is the line:

const { diagram } = await import('./flowDiagram-v2');

It seems the required file, flowDiagram-v2, is not present in the loaded code:

This file should be present - it is adjacent in the source tree:

💁 Possible Solution

I have tried the following:

Loading the mermaid.js code via the CDN (import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.2/+esm') - however contrary to the documentation (see this issue https://github.com/parcel-bundler/parcel/issues/7823)
Using --no-optimize this doesn't seem to work
Bundling the code without using @parcel/config-webextension seems to eliminate the issue

🔦 Context

I am trying to import mermaid.js into a chrome web extension - parcel is working amazingly web for the bundling, way easier than webpack, but the import of this third party module seems to be failing.

💻 Code Sample

Clone the https://github.com/dwmkerr/parcel-mermaid-import-issue repo
Follow the steps in the README - this is the most minimal reproduction I could create

🌍 Your Environment

Software	Version(s)
Parcel	2.8.3
Node	16.16.0
npm/Yarn	NPM 8.11.0
Operating System	MacOS Venture 13.2.1
Mermaid.JS	10.0.2

mischnic commented 1 year ago

So you can't reproduce this outside of web extensions?