I use ViteJS integrated with PHP as a backend.

I would like to ‘separate’ EditorJS from the main asset file. I build it, even though I’m not using EditorJS directly.

However, when I try to use ‘manualChunks’ in ‘roolupOPtions’ during the build, I end up with an empty file ‘editorjs-l0sNRNKZ.js”:

    import { defineConfig } from "vite"

    export default defineConfig({
    server:{
        //port: '2424',
        origin: 'http://localhost:5173'
    },
    base: '/assets',
    build: {
      copyPublicDir:false,
      outDir: 'public/assets/tpl_1',
      assetsDir:'',
      manifest: true,
      rollupOptions: {
        input: 'rsc/tpl_1/main.js',
        //external: ['@editorjs/editorjs'],
        output: {
          manualChunks: {
           editorjs: ["@editorjs/editorjs"]
          }
        },
        
      },
    },
  }) 

✓ 62 modules transformed.
Generated an empty chunk: "editorjs".
public/assets/tpl_1/.vite/manifest.json     0.28 kB │ gzip:  0.17 kB  
public/assets/tpl_1/main-9kx3olKa.css     225.60 kB │ gzip: 30.40 kB  
public/assets/tpl_1/editorjs-l0sNRNKZ.js    0.00 kB │ gzip:  0.02 kB  
public/assets/tpl_1/main-T4ghkc16.js       81.75 kB │ gzip: 24.65 kB 

I think it’s because I’m not using it in my ‘main.js file’, so ViteJS/Rollup doesn’t include it in the asset.

//import EditorJS from '@editorjs/editorjs';
//const editor = new EditorJS();

const EditorJS = () => import('@editorjs/editorjs');

Here I use dynamic import. I followed these intrcutions: https://github.com/vitejs/vite/discussions/17730

So I ‘fake’using it by adding ‘console.log()’:

const EditorJS = () => import('@editorjs/editorjs');
console.log(EditorJS)

Now when I run the ‘build’ command, the file is no longer empty:

✓ 62 modules transformed.
public/assets/tpl_1/.vite/manifest.json     0.48 kB │ gzip:  0.22 kB  
public/assets/tpl_1/main-9kx3olKa.css     225.60 kB │ gzip: 30.40 kB  
public/assets/tpl_1/main-CpMGCOVV.js       82.76 kB │ gzip: 25.11 kB  
public/assets/tpl_1/editorjs-C0ZxgI3C.js  216.88 kB │ gzip: 59.16 kB

I would like to have this asset generated ‘manually’ because I will import ‘editorjs-C0ZxgI3C.js’ later in my html file like this:

    <script type="module">
        
        import EditorJS from '/public/assets/tpl_1/editorjs-C0ZxgI3C.js';
        const editor = new EditorJS();
        
    </script>

Is there a way to tell to rollup to include EditorJS even if it’s not use in main.js file?

I hope my message is understandable, it’s quite hard to explain what I want. Additionally, I’m not fluent in English. Thanks for your understanding.

Update

I find a solution by editing rollupOPtions like this:

rollupOptions: {
  input: {
    main: './src/js/main.js',
    styles: './src/css/styles.css',
    page1: './src/js/page1.js',
    page2: './src/js/page2.js',
  }