error "Could not resolve entry (<module>)" when using manualChunks

[reinaldoarrosi]

When using the following rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

export default [
    {
        experimentalCodeSplitting: true,
        input: [
            './index.jsx', 
            './page1.jsx'
        ],
        output: {
            dir: './dist',
            format: 'system'
        },
        manualChunks: {
            'vendor': ['react']
        },
        plugins: [
            resolve({ extensions: ['.jsx', '.js'] }),
            commonjs(),
            babel({ exclude: 'node_modules/**' })
        ]
    }
];

Rollup gives the error "Could not resolve entry (react)". If I remove the manualChunks option everything works fine.

I'm opening this issue because of the discussion in rollup/rollup#2248

[guybedford]

As discussed there, the issue seems to be here that top-level imports are not necessarily supported through this plugin - input: 'node-package-name'.

[samjacoby]

As best as I can figure, this is the recommended way to make a vendor bundle with, say, react — using Rollups chunk support (rollup/rollup#2084).

Wonder if anyone has any thoughts/guidance on fixing this issue (happy to take a look, but I'll need some guidance, as I'm new to the rollup world). Or is there another supported pathway anyone's aware of? This seems like a fairly common use case.

[guybedford]

@samjacoby I believe the fix would be to ensure that this plugin can resolve properly handle the resolution scenario - resolveId('package-name', undefined). If you're willing to work on this that would be great - I'd be happy to review.

[isao]

@guybedford thanks for the pointer. I having the exact issue, except with preact.

I took a quick, dumb pass at this, and inserted these lines at the top of the resolveId function:

// dumb hack begin
console.log(`importee ${importee}, importer: ${importer}`);
if (importee === 'preact') {
    importer = '.'
}
// dumb hack end

...right before these lines:

// disregard entry module
if ( !importer ) { return null; }

...which worked! Output looked like:

./src/app.tsx → dist/bundle.js...
importee ./src/app.tsx, importer: undefined
importee preact, importer: undefined
importee preact, importer: /path/to/repo/src/app.tsx
importee preact, importer: /path/to/repo/src/HelloWorld.tsx
created dist/bundle.js in 192ms

...for this config:

// /path/to/repo/rollup.config.js
import typescript from 'rollup-plugin-typescript'
import resolve from 'rollup-plugin-node-resolve'

export default {
    input: './src/app.tsx',
    output: {
        format: 'esm',
        file: 'dist/bundle.js',
    },
    experimentalCodeSplitting: true,
    manualChunks: {
        vendor: ['preact'],
    },
    plugins: [
        typescript(),
        resolve(),
    ],
}

I don't have a real solution, but thought I'd share in case someone (or myself if I find more time) can find this useful...

[isao]

Also, with only the logging statement, the output is:

./src/app.tsx → dist/bundle.js...
importee ./src/app.tsx, importer: undefined
importee preact, importer: undefined
[!] Error: Could not resolve entry (preact)

[LeeeeeeM]

not friendly to use

[seanpoulter]

I was having a look at this earlier today. Do we need any more information from rollup to know when we're looking at these entries? Is that the only time the importer is undefined here?

I tried something like @isao suggested but my "bs-platform" still wasn't resolved. 😭