CODEWITHSUNDEEP
rollupjs
citykid
citykid

Reputation: 11122

How can I prevent rollup from leaving an import statement to a external library in the bundle?

I have such web app:

All is fine, the only problem is that the bundle.js includes a wrong

import { Map } from 'mapbox-gl';
// why is this import here, although rollup.config declares mapbox-gl external?

... bundle code follows as expected

at its head.

rollup.config.js:

export default {
    input: './js/app.tsx',
    output: [
        {
            file: 'dist/bundle.js',
            format: 'es'
        },
    ],
    external: ['mapbox-gl'], // this should prevent imports from mapbox-gl in the bundle
    plugins: [
        typescript()
    ],
}

I searched all stackoverflow and through endless github repos but that did not reveal why this import statement is left. I opened a feature request in rollup to allow plain js bundle creation, as I believe that rollup is correct as it assumed that the bundle is used as a module - for format is set to "es" in the end.

https://github.com/rollup/rollup/issues/3868

Upvotes: 5

Views: 3012

Answers (2)

worldender
worldender

Reputation: 1

The external config is supposed to leave the import statements as they are so that the runtime can resolve those imports. You are telling rollup to not try to import that library during buildtime as it will be "external" to your bundle.

Upvotes: 0

trusktr
trusktr

Reputation: 45504

I had this problem. @rollup/plugin-node-resolve fixed it.

Rollup will not find and bundle Node dependencies by default. By default, Rollup follows the vanilla ES Module specification which knows nothing about Node.js dependencies inside of node_modules. Adding this plugin makes Rollup look for packages in node_modules and hence it will no longer consider them "external" and will bundle them instead of considering them to be external.

OP: You don't want mapbox to be "external". In Rollup's perspective, an "external" module is a module that will not be included in your bundle. In your case, mapbox already is external, but you want to make it internal to (included in) your bundle, which is what this plugin does.

Upvotes: 1

Related Questions