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

The plugin doesn't work when "preserveModules" option is enabled #29

Closed
xbzhang2020 opened this issue Dec 26, 2024 · 11 comments · Fixed by #30
Closed

The plugin doesn't work when "preserveModules" option is enabled #29

xbzhang2020 opened this issue Dec 26, 2024 · 11 comments · Fixed by #30
Assignees
Labels
documentation Improvements or additions to documentation enhancement New feature or request good first issue Good for newcomers

Comments

@xbzhang2020
Copy link

When vite.config.ts is as follows:
截屏2024-12-26 15 10 13

There is no css injected in js bundles after build.
截屏2024-12-26 15 13 30

But if I set build.rollupOptions.output.preserveModules to false, it will work again.
截屏2024-12-26 15 15 59

@emosheeep
Copy link
Owner

@emosheeep emosheeep added the wontfix This will not be worked on label Dec 26, 2024
@xbzhang2020
Copy link
Author

I got it. Thanks.

@xbzhang2020
Copy link
Author

Wait! I resolved it.

The build result with build.rollupOptions.output.preserveModules is as follows.

截屏2024-12-26 18 11 55

Here is my vite.config.ts . Maybe you can have a try in the examle.

import type { Plugin } from 'vite';
import { dirname, relative } from 'node:path';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
// import { libInjectCss } from '../src/index';

function libInjectCss(): Plugin {
  return {
    name: 'vite:lib-inject-css',
    generateBundle(_, bundle) {
      for (const chunk of Object.values(bundle)) {
        if (chunk.type !== 'chunk' || !chunk.viteMetadata?.importedCss.size) {
          continue;
        }

        const { importedCss } = chunk.viteMetadata;
        const cssFiles = Array.from(importedCss).map((item) => {
          let cssFilePath = relative(dirname(chunk.fileName), item);
          if (!cssFilePath.startsWith('.')) {
            cssFilePath = `./${cssFilePath}`;
          }
          return `import '${cssFilePath}';`;
        });
        chunk.code = `${cssFiles.join('\n')}\n${chunk.code}`;
      }
    },
    enforce: 'post',
  };
}

export default defineConfig({
  plugins: [vue(), libInjectCss()],
  build: {
    lib: {
      formats: ['es'],
      entry: ['src/demo1/index.ts', 'src/demo2/index.ts'],
    },
    cssCodeSplit: true,
    rollupOptions: {
      external: ['vue'],
      output: {
        preserveModules: true,
      },
    },
  },
});

@xbzhang2020 xbzhang2020 reopened this Dec 26, 2024
@emosheeep
Copy link
Owner

🤔Is it because the new version of vite fixes this problem? I will try it later

@emosheeep
Copy link
Owner

{
  entry: [
    // 'src/index.ts',
    // 'src/common.ts',
    'src/demo1/index.ts',
    'src/demo2/index.ts',
  ],
}

@emosheeep
Copy link
Owner

Seems you just removed two lines that I commented, I don't know how it works, maybe preserveModules option can be a warning which doesn’t block the injection logic. How it performs depends on vite, as the plugin relies on viteMetaData.

export default defineConfig({
  build: {
    lib: {
      entry: [
        // 'src/index.ts',
        // 'src/common.ts',
        'src/demo1/index.ts',
        'src/demo2/index.ts',
      ],
    },
    rollupOptions: {
      output: {
        preserveModules: true,
      },
    },
  },
});

@xbzhang2020
Copy link
Author

But it also works when I add the four entries.

截屏2024-12-27 09 49 55
// vite.config.ts
export default defineConfig({
  plugins: [vue(), libInjectCss()],
  build: {
    lib: {
      formats: ['es'],
      entry: [
        'src/index.ts',
        'src/common.ts',
        'src/demo1/index.ts',
        'src/demo2/index.ts',
      ],
    },
    cssCodeSplit: true,
    rollupOptions: {
      external: ['vue'],
      output: {
        preserveModules: true,
      },
    },
  },
});

@emosheeep
Copy link
Owner

What is the version of the Vite you used ?

@xbzhang2020
Copy link
Author

vite 5.4.10

@emosheeep
Copy link
Owner

Wow, I got it, there was a historical problem has been fixed accidentally by this commit 1841f44, maybe I should remove the restrictions and then support code injection when preserveModules option is enabled.

@emosheeep emosheeep added documentation Improvements or additions to documentation enhancement New feature or request good first issue Good for newcomers and removed wontfix This will not be worked on labels Dec 27, 2024
@emosheeep emosheeep self-assigned this Dec 27, 2024
@emosheeep emosheeep pinned this issue Dec 27, 2024
@emosheeep emosheeep changed the title The Plugin doesn't work when "build.rollupOptions.output.preserveModules" is true The plugin doesn't work when "preserveModules" option is enabled Dec 27, 2024
@xbzhang2020
Copy link
Author

👍。哈哈哈,看起来是调用时机的问题,应该在 generateBundle 钩子中调用注入代码。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants