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

Load the files listed in chunk.imports on production mode #20

Open
wants to merge 1 commit into
base: cake5
Choose a base branch
from

Conversation

nojimage
Copy link

@nojimage nojimage commented Aug 8, 2024

Adding the process to load chunk files split by Vite.

Given the following manifest.json:

  "_vendor-CaB_GCbx.js": {
    "file": "dist/vendor-CaB_GCbx.js",
    "name": "vendor",
    "css": [
      "dist/vendor-X5Bfdti4.css"
    ]
  },
  "resources/src/main.ts": {
    "file": "dist/main.ts-CyiR19a8.js",
    "name": "main.ts",
    "src": "resources/src/main.ts",
    "isEntry": true,
    "imports": [
      "_vendor-CaB_GCbx.js"
    ],
  },

the helper must also load the files listed in the imports, but this processing was insufficient.

@passchn
Copy link
Collaborator

passchn commented Aug 8, 2024

Hi, I cannot really understand the issue as in my experience, the files listed under "imports"/"dynamicImports" are imported automatically. So what exactly is insufficient?

Could you please provide more information on how to reproduce the issue? Like how are you using vite exactly, what is your config, how do you use imports in your js files? What version of vite are you using? Do you get any console errors when browsing the site in dev mode/prod mode?

@nojimage
Copy link
Author

nojimage commented Aug 8, 2024

@passchn Thank you for your review.

This issue occurs when importing CSS within JavaScript files.

Here is my environment:

  • Vite 5.3.x
  • Vue 3.x
  • Multiple entry points (there are scripts for user-facing screens and scripts for admin screens)

I created a wrapper Vue component for a library made in JavaScript. The original JS library includes CSS, and I imported it from the Vue component.

The JS library itself was bundled into the build without any issues, but the CSS files imported within the JS (located under node_modules) were output as separate files. It seems that assets used commonly across entry points are compiled into separate files.

This issue arises specifically when assets are imported from JS. Importing CSS files from the node_modules directory within CSS files does not cause any issues. (However, importing them within the <style> tag of a Vue component is treated similarly to importing them in JS).

This issue occurs during the production build, while the imported CSS files are loaded without any problems in dev mode.

@passchn
Copy link
Collaborator

passchn commented Aug 9, 2024

Ok but then it seems more like a bug in the bundler and not of this plugin.. Everything should be imported by the files marked with "isEntry" as far as I understand. I might try to reproduce it on the weekend if I find the time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants