fix: Fix 'Cannot read properties of undefined (reading '0')'

[jwalton]

This PR contains:

• bugfix
• feature
• refactor
• documentation
• other

Are tests included?

• yes (bugfixes and features will not be merged without tests)
• no

I have no idea how to test this - suggestions welcome. But, this is hopefully a pretty obivously "safe" change.

Breaking Changes?

• yes (breaking changes will not be merged unless absolutely necessary)
• no

List any relevant issue numbers:

I was going to raise an issue, but I don't have a minimal reproduction. :P

Description

When bundling my project (via vite), I get:

Cannot read properties of undefined (reading '0')
error during build:
TypeError: Cannot read properties of undefined (reading '0')
    at Chunk.checkCircularDependencyImport (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:15363:135)
    at Chunk.setUpChunkImportsAndExportsForModule (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:15909:26)
    at Chunk.link (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:15253:18)
    at Bundle.generateChunks (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:16830:19)
    at async Bundle.generate (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:16731:28)
    at async file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:24977:27
    at async catchUnfinishedHookActions (file:///Users/jwalton/solink/video-discovery-web/node_modules/rollup/dist/es/shared/rollup.js:24066:20)
    at async doBuild (file:///Users/jwalton/solink/video-discovery-web/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:44518:22)
    at async build (file:///Users/jwalton/solink/video-discovery-web/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:44347:16)
    at async CAC.<anonymous> (file:///Users/jwalton/solink/video-discovery-web/node_modules/vite/dist/node/cli.js:808:9)

Rollup is trying to print this warning:

Export "XXX" of module "YYY.js" was reexported through module "ZZZ.js" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order.
Either change the import in "ZZZ.jsx" to point directly to the exporting module or do not use "preserveModules" to ensure these modules end up in the same chunk.

The problem here is that this snippet:

variableModule.getExportNamesByVariable().get(variable)![0]

fails, because despite the !, get(variable) does in fact return undefined in my case. This doesn't fix the underlying issue here, but it at least stops rollup from crashing.

[netlify]

❌ Deploy Preview for remarkable-travesseiro-a49bb0 failed.

Name	Link
🔨 Latest commit	bd9e057
🔍 Latest deploy log	https://app.netlify.com/sites/remarkable-travesseiro-a49bb0/deploys/63c561393b774c000969b3fa

[lukastaegert]

I suppose you cannot provide a failing test case or reproduction for this so that we can figure out and fix the root cause?

[jwalton]

I'd love to, but this is part of a pretty involved project, and I don't know a lot about the workings of rollup, so I'm not 100% sure what the minimum repro would look like. I can tell you a little about how I ran into this:

We have a private repo called which we'll call LIB, and inside LIB's package.json is:

  "exports": {
    ".": {
      "import": "./lib-esm/src/index.js",
      "require": "./lib/src/index.js",
      "default": "./lib/src/index.js"
    },
  },

/lib/src/index.js is compiled from typescript (as is this whole project). I'll write this as typescript so it's easier to understand, rather than the raw js. First, index.ts:

export * as formatters from './formatters.js';
export { LANGUAGES } from  './types.js';
// snip

And inside formatters.ts:

// formatters.ts
import { LANGUAGES } from "./index.js";
// snip
export function getFormatter(name: string): {
    formatter: (fieldValue: number | string | Date, metadata?: any) => string,
    options?: FormattingOptions
} {
    if (formatters[name]) {
        return formatters[name];
    }
    return {
        formatter: (v: number | string) => v.toString()
    };
}

(Why does this import LANGUAGES from ./index.js instead of from ./types.js? -_- But, that's off topic.)

Now, over in APP we in various places do:

import { formatters } from '@privaterepo/LIB';

And we also import other things from LIB in various places. Roll-up was trying to print something along the lines of:

Export "formatters" of module "formatters.js" was reexported through module "index.js" while both modules are dependencies of each other and will end up in different chunks by current Rollup settings. This scenario is not well supported at the moment as it will produce a circular dependency between chunks and will likely lead to broken execution order. Either change the import in "RankingWidget.jsx" to point directly to the exporting module or do not use "preserveModules" to ensure these modules end up in the same chunk.

But, of course, fails. I assume there's more to this than just having different parts of these dependencies in different chunks, or else some existing test would fail already?

[lukastaegert]

Are you using manualChunks or preserveModules in your options? i.e. what is the reason the modules ended up in different chunks?

[jwalton]

The project in question is a React application, and we're using dynamic import to split up the project. The options are whatever the defaults Vite is supplying.

[jwalton]

Looks like this is fixed in #4829, so I'll close this.

[rollup-bot]

This issue has been resolved via #4829 as part of rollup@3.12.1. You can test it via npm install rollup.