Chunk imports are undefined

[arxpoetica]

• Rollup Version: 0.66
• Operating System (or Browser): MacOS High Sierra 10.13.6 (17G65) / Google Chrome 68.0.3440.106 (Official Build) (64-bit)
• Node Version: 8.1.0

How Do We Reproduce?

This is Sapper specific, so a little hard to reproduce without a Sapper setup. So I set up a temporary repo like so for install:

git clone https://github.com/arxpoetica/rollup-ticket.git
cd rollup-ticket
npm install
npm run dev

Then go to http://localhost:3000 and see the following:

Expected Behavior

The CSS in the <Popup.../> component should show up (red background, white text).

Actual Behavior

The CSS does not show up.

To get the CSS to show, do either of the following:

• In the main routes/index.html file, remove or comment out line 10: // import debounce from './debounce.js'

or

• In the routes/alt.html file, remove or comment out lines 3 and 8: <!-- <Popup message="This is a block of text. Notice, the text always shows up, but not always the CSS styles."/> --> and // Popup: '../components/Popup.html'

FYI @Rich-Harris in the Sapper community forums had this to day:

essentially the bug is that Rollup doesn't correctly report the dependencies of each chunk, in certain cases where they are required by multiple chunks, which means Sapper fails to generate correct CSS

[Rich-Harris]

I think we can probably turn this into a repo that doesn't involve Svelte or Sapper — will try and have a crack at it soon if @arxpoetica doesn't beat me to it

[arxpoetica]

@Rich-Harris I probably won't have time in the immediate future -- sorry for the Sapper-only orientation.

[mattpilott]

Following on from our discord chat i thought id add the something here with a link to my project https://github.com/matt3224/blog in-case that helps at all

[Rich-Harris]

I've whittled the bug down to its essence: https://github.com/Rich-Harris/rollup-repro-2461

It looks like what's happening is that a chunk is registering another chunk as an import before the imported chunk has been given a name. Given modules like this...

// main.js
export default [
  () => import('./a.js'),
  () => import('./b.js')
];

// a.js
import './d.js'
import c from './c.js';

export default () => c();

// b.js
import c from './c.js';

export default () => c();

// c.js
export default () => console.log('c');

// d.js
export default {};

...we'd expect to have four chunks — one for the main.js entry point, one for each of the dynamic import entry points (a.js and b.js), and one for the shared dependency (c.js) — and we'd expect the a.js and b.js chunks to list the fourth chunk as an import:

[
  {
    fileName: 'main.js',
    imports: [],
    modules: ['main.js']
  },
  {
    fileName: 'a.js',
    imports: ['chunk.js'],
    modules: ['d.js', 'a.js']
  },
  {
    fileName: 'chunk.js',
    imports: [],
    modules: ['c.js']
  },
  {
    fileName: 'b.js',
    imports: ['chunk.js'],
    modules: ['b.js']
  }
]

We do end up with the four correct chunks, but the a.js chunk's import is undefined:

[
  {
    fileName: 'main.js',
    imports: [],
    modules: ['main.js']
  },
  {
    fileName: 'a.js',
-    imports: ['chunk.js'],
+    imports: [undefined],
    modules: ['d.js', 'a.js']
  },
  {
    fileName: 'chunk.js',
    imports: [],
    modules: ['c.js']
  },
  {
    fileName: 'b.js',
    imports: ['chunk.js'],
    modules: ['b.js']
  }
]

[Rich-Harris]

To clarify, this is true whether you're capturing the chunks with either the renderChunk hook or generateBundle.

[Rich-Harris]

The bug is here, specifically with this line:

const imports = chunk.getImportIds();

chunk.getImportIds() looks like this:

getImportIds(): string[] {
  return this.dependencies.map(module => module.id);
}

chunk.dependencies is an array of ExternalModule | Chunk. In other words, we're setting chunk.id in the same loop that depends on chunk.id for imported chunks having already been set, but the chunks aren't necessarily ordered correctly for that to work.

It's much easier to fix than I feared. Working on a PR now.

[Rich-Harris]

#2483