Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack error: cannot dynamically import styles #3634

Closed
thet opened this issue Oct 10, 2022 · 3 comments
Closed

Webpack error: cannot dynamically import styles #3634

thet opened this issue Oct 10, 2022 · 3 comments
Labels
bug help welcome Could use help from community parser

Comments

@thet
Copy link

thet commented Oct 10, 2022

Describe the issue/behavior that seems buggy
When trying to dynamically import a theme, webpack fails with an error saying that ./styles is not in the exported field of package.json.

Sample Code or Instructions to Reproduce

With a webpack setup try to import a style in an async methods like so:

    test() {
        const theme = "github";
        import(`highlight.js/styles/${theme}.css`);
    }

Webpack fails with this error:

ERROR in ./src/pat/syntax-highlight/syntax-highlight.js 35:4-46
Module not found: Error: Package path ./styles is not exported from package /home/_thet/data/dev/syslab/REPOS/patternslib/Patterns/node_modules/highlight.js (see exports field in /home/_thet/data/dev/syslab/REPOS/patternslib/Patterns/node_modules/highlight.js/package.json)
 @ ./src/patterns.js 54:0-49
 @ ./src/index.js 5:0-20

webpack 5.74.0 compiled with 1 error in 769 ms

This does work though:

    test() {
        import(`highlight.js/styles/github.css`);
    }

Removing the exports field in package.json also lets me to import the styles dynamically.

Expected behavior
I expect to be able to import anything within highlight.js dynamically.

@thet thet added bug help welcome Could use help from community parser labels Oct 10, 2022
@thet
Copy link
Author

thet commented Oct 10, 2022

Same goes for dynamically importing languages:

async function test() {
    const language = "xml";
    const lang = (await import(`highlight.js/lib/languages/${language}`)).default;
}

Here webpack fails with:


WARNING in ./src/pat/syntax-highlight/syntax-highlight.js 71:37-86
Module not found: Error: Package path ./lib/languages is not exported from package /home/_thet/data/dev/syslab/REPOS/patternslib/Patterns/node_modules/highlight.js (see exports field in /home/_thet/data/dev/syslab/REPOS/patternslib/Patterns/node_modules/highlight.js/package.json)
 @ ./src/patterns.js 54:0-49
 @ ./src/index.js 5:0-20

webpack 5.74.0 compiled with 1 warning in 15060 ms

thet added a commit to Patternslib/Patterns that referenced this issue Oct 10, 2022
highlight.js version 11 does not allow dynamic imports of languages and styles with webpack due to an exports field in package.json.

See: highlightjs/highlight.js#3634
thet added a commit to Patternslib/Patterns that referenced this issue Oct 10, 2022
highlight.js version 11 does not allow dynamic imports of languages and styles with webpack due to an exports field in package.json.

See: highlightjs/highlight.js#3634
thet added a commit to Patternslib/Patterns that referenced this issue Oct 11, 2022
highlight.js version 11 does not allow dynamic imports of languages and
styles with webpack due to an exports field in package.json.

See: highlightjs/highlight.js#3634
@joshgoebel
Copy link
Member

I'm current considering this a bug in webpack (until someone can link me to an issue filed against webpack that says otherwise). We already do wildcard exports for these paths.. It seems so far to only be webpack can't figure it out when the paths are dynamic...

https://github.com/highlightjs/highlight.js/blob/main/tools/build_node.js#L104_

Closing as a dup of #3384. Please file an issue against webpack and link to this issue.

@thet
Copy link
Author

thet commented Oct 17, 2022

Thanks for pointing that out!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug help welcome Could use help from community parser
Projects
None yet
Development

No branches or pull requests

2 participants