exports in package.json break dynamic imports with webpack

[azul]

Describe the issue/behavior that seems buggy

Webpack currently does not understand wildcard exports when processing dynamic imports.
This is a bug in webpack.

Trying to build a package that uses dynamic imports from highlights.js from version 11 on will result in

Module not found: Error: Package path ./lib/languages is not exported from package <path_to_proj>/node_modules/highlight.js (see exports field in <path_to_proj>/node_modules/highlight.js/package.json)

Sample Code or Instructions to Reproduce

This was already reported here but i think it's unrelated to the bug report it was submitted to.

Attempting to build this code with webpack will result in the error emssage mentioned above:

await import(
  /*
   webpackInclude: /(java|javascript|latex|markdown|python|ruby|typescript|xml|yaml)/,
   webpackChunkName: "lang-[request]"
   */
   `highlight.js/lib/languages/${lang}.js`
)

Expected behavior
The build should succeed providing the languages as separate artifacts to be dynamically imported.

Additional context

It looks like webpack currently does not implement handling the combination of exports specified in package.json and dynamic imports at all. So it might take some time until this is fixed on the webpack side of things. That's why i am proposing to look into a workaround in highlight.js as dynamic imports seem very relevant given the large number of language files.

[joshgoebel]

@azul What about your own easy workaround you posted in the other thread? Did you find an issue with it? I would have expected to have seen it attached to this issue if it's a work-around.

[joshgoebel]

What are all other Webpack uses doing? We have been using exports since v11, seems hard to believe no one has successfully upgrade until now? As a work-around (if there are no others) I would suggest using a pre-built version of Highlight.js and just throwing that into the build system whole rather than trying to let webpack understand the entire structure of the library of 250 independent files.

Of course as mentioned this is truly a Webpack bug and needs to just be fixed on that side.

[joshgoebel]

Ping.

[azul]

Thanks for the reminder.
I found a workaround for the builds by using relative paths in the import statement: nextcloud/text#1942 (review).
It's ugly but it did the trick.

There are other dependency issues between version 11 of highlight js and tiptap1 that mean we need to stick to version 10 until we managed to migrate to tiptap 2. But that's unrelated so i'll close this issue.

[Hypnosphi]

@azul unfortunately this doesn't work for libraries, because npm can flatten packages:

App
  node_modules
    library (depends on highlight.js)
      node_modules
        // no highlight.js here
    highlight.js

[Hypnosphi]

We have been using exports since v11, seems hard to believe no one has successfully upgrade until now?

I can't upgrade because I use dynamic imports: https://github.com/JetBrains/ring-ui/blob/master/components/code/code.js#L15. It works with v10 but not with v11

[joshgoebel]

@Hypnosphi Have you commented on the bug/issue over in webpack?

I'm also potentially assuming there is a good/reasonable workaround (since this issue is so quiet), but that no one has popped up yet to tell us what it is.

[Hypnosphi]

@joshgoebel no, but they weren't asking how people deal with it