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

Failed to fetch when dynamically importing css file after built #3307

Closed
6 tasks done
zoubingwu opened this issue May 8, 2021 · 0 comments · Fixed by #3333 · May be fixed by jaesub-ahn/vite#1
Closed
6 tasks done

Failed to fetch when dynamically importing css file after built #3307

zoubingwu opened this issue May 8, 2021 · 0 comments · Fixed by #3333 · May be fixed by jaesub-ahn/vite#1

Comments

@zoubingwu
Copy link

zoubingwu commented May 8, 2021

Describe the bug

When dynamically import css files, it failed to fetch with built files being served.

It works in dev mode tho.

Reproduction

https://github.com/zoubingwu/vite-dynamic-import-css-bug

this repo was created thru yarn create @vitejs/app vite-dynamic-import-bug --template react-ts;

then simply run yarn add prismjs,

add few lines of code in App.tsx:

useEffect(() => {
    import('prismjs/themes/prism-coy.css')
    import('prismjs/themes/prism-dark.css')
    import('prismjs/themes/prism-funky.css')
    import('prismjs/themes/prism-okaidia.css')
    import('prismjs/themes/prism-solarizedlight.css')
    import('prismjs/themes/prism-tomorrow.css')
    import('prismjs/themes/prism-twilight.css')
    import('prismjs/themes/prism.css')
  }, [])

then run yarn build and yarn serve, you can find errors in console:

image

The css files were bundled,

image

But it requires js in the tranpiled code, and they are missing in the output:

image

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8705G CPU @ 3.10GHz
    Memory: 1.33 GB / 23.41 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0
  npmPackages:
    vite: ^2.2.3 => 2.2.4 

Used package manager:

yarn

Logs


Before submitting the issue, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the docs.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Provide a description in this issue that describes the bug.
  • Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants