Broken Chunks

[eMerzh]

Hello i'm using vite,
i'm triyng to group a bit the produced chunks because rollup is generating a bunch of very small files...
i can for example say that "X,Y,Z" are a nececity for all the pages in the app thus might be bundled in a vendor chunk.

If i understand correctly i should (did) use manualChunks.
i did add a few deps in given chunks like that... but if i try to group more of then
i end up with non functioning app.... like trying to get undefined var, ... not sure why it's happening ....

what am i doing wrong ?

manualChunks: id => {
	if (id.includes('node_modules/react/') || id.includes('node_modules/react-dom')) {
         // that work
		return 'vendor-react'
        }
        if (id.includes('....')) {
        return 'other-chunk' // this might break
        }

what can i look at?

[lukastaegert]

Very likely your chunking introduced a cyclic dependency, which can cause exactly the issue you mentioned.

[eMerzh]

hum 🤔 ok... is there a way to report that, or to avoid? (without testing every chunks manually ad stuff? )

[lukastaegert]

Not really. manualChunks is a crude and unsafe tool. experimentalMinChunkSize is a first attempt to provide something better, but it is still not ideal.

[lukastaegert]

It is usually safe to put the entire node_modules into a single manual chunk because stuff in node_modules does not import from your regular code, so no danger of cycles. Other than that, you need to figure out the dependencies between your dependencies and should put the dependencies of your dependencies into the same chunk as the original dependency.

[eMerzh]

ok, thanks....
unfortunately that's not really possible, as i have a few big deps that are only used in some parts of the app.. maybe i can isolate those ... i'll check

[lukastaegert]

Only bundling one npm dependency per manual chunk should also be ok. Only when several are put into the same chunk, problems can occur. I.e. if A depends on B and B depends on C, putting A and C into the same chunk but B into a different chunk will create a cycle

[zhanglolo]

It seems that I also had the same issue and I created a demo that can be reproduced.

package.json

  "dependencies": {
    "element-ui": "2.15.10",
    "vue": "2.7.14"
  },

vite.config.js

export default defineConfig({
  build: {
    minify: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.match(/node_modules\/(element-ui)/)) return 'element-ui'
          if (id.match(/node_modules\/(vue)/)) return 'vue'
        },
      },
    },
  },
  plugins: [vue()],
})

vue-chunk and element-ui-chunk have a cyclic dependency.

and app can't run

but if i change vite.config.js like this:

export default defineConfig({
  build: {
    minify: false,
    rollupOptions: {
      output: {
+        manualChunks: {
+          "vue": ["vue"],
+          "element-ui": ["element-ui"],
+        },
-        manualChunks(id) {
-          if (id.match(/node_modules\/(element-ui)/)) return 'element-ui'
-          if (id.match(/node_modules\/(vue)/)) return 'vue'
-        },
      },
    },
  },
  plugins: [vue()],
})

it work fine. vue-chunk is clean.

is there an equivalent way to write manualChunks?

[zhanglolo]

I find why. Because 'virtual module', some vite plugin like '\0commonjsHelpers.js' may change pacakge behaviour.

{
  ast: Node {
    type: 'Program',
    start: 0,
    end: 1163,
    body: [ [Node], [Node], [Node], [Node], [Node] ],
    sourceType: 'module'
  },
  code: '\n' +
    "export var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n" +
    '\n' +
    'export function getDefaultExportFromCjs (x) {\n' +
    "\treturn x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;\n" +
    '}\n' +
    '\n' +
    'export function getDefaultExportFromNamespaceIfPresent (n) {\n' +
    "\treturn n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;\n" +
    '}\n' +
    '\n' +
    'export function getDefaultExportFromNamespaceIfNotNamed (n) {\n' +
    "\treturn n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;\n" +
    '}\n' +
    '\n' +
    'export function getAugmentedNamespace(n) {\n' +
    '  var f = n.default;\n' +
    '\tif (typeof f == "function") {\n' +
    '\t\tvar a = function () {\n' +
    '\t\t\treturn f.apply(this, arguments);\n' +
    '\t\t};\n' +
    '\t\ta.prototype = f.prototype;\n' +
    '  } else a = {};\n' +
    "  Object.defineProperty(a, '__esModule', {value: true});\n" +
    '\tObject.keys(n).forEach(function (k) {\n' +
    '\t\tvar d = Object.getOwnPropertyDescriptor(n, k);\n' +
    '\t\tObject.defineProperty(a, k, d.get ? d : {\n' +
    '\t\t\tenumerable: true,\n' +
    '\t\t\tget: function () {\n' +
    '\t\t\t\treturn n[k];\n' +
    '\t\t\t}\n' +
    '\t\t});\n' +
    '\t});\n' +
    '\treturn a;\n' +
    '}\n',
  dynamicallyImportedIdResolutions: [Getter],
  dynamicallyImportedIds: [Getter],
  dynamicImporters: [Getter],
  hasDefaultExport: [Getter],
  id: '\x00commonjsHelpers.js',
  implicitlyLoadedAfterOneOf: [Getter],
  implicitlyLoadedBefore: [Getter],
  importedIdResolutions: [Getter],
  importedIds: [Getter],
  importers: [Getter],
  isEntry: false,
  isExternal: false,
  isIncluded: [Getter],
  meta: {},
  moduleSideEffects: true,
  syntheticNamedExports: false
}

so ignore id start with '\0'.

export default defineConfig({
  build: {
    minify: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
+         if (!id.startsWith('\0')) {
            if (id.match(/node_modules\/(element-ui)/)) return 'element-ui'
            if (id.match(/node_modules\/(vue)/)) return 'vue'
+         }
        },
      },
    },
  },
  plugins: [vue()],
})

[pokemotor]

Good job!