esri-leaflet throws error when bundled with Rollup

• Browser and version: n/a

• Version of Leaflet (L.version): 1.5.1

• Version of esri Leaflet (L.esri.VERSION): 2.3.0

• Version of Rollup: 1.21.2

• Steps to reproduce the error:

  1. yarn add esri-leaflet
  2. Write some code to import { tiledMapLayer } from ‘esri-leaflet’
  3. rollup

• What happens is [X]. I get an error:

[!] (plugin buble) SyntaxError: Unexpected token (2:8)
node_modules/esri-leaflet/package.json (2:8)
1 : {
2 :   "name": "esri-leaflet",
            ^
SyntaxError: Unexpected token (2:8)
    at Object.pp$4.raise (/node_modules/acorn/dist/acorn.js:2825:15) was expecting [Y].

[jgravois]

Esri-leaflet isn’t a CommonJS library. it’s written in ES6.

you may have other problems, but at a minimum, you need to tell rollup-plugin-commonjs about that (or omit the plugin entirely if you aren’t actually trying to bundle any CJS dependencies).

plugins: [
  cjs({ exclude: [ 'node_modules/esri-leaflet/**' ] }),
]

[gavinr]

I am trying to follow your replication steps, I do not get the error:

1. Create new directory
2. npm install --global rollup (this installs v1.21.4)
3. npm init -y
4. npm install esri-leaflet
5. create main.js with contents:

import { tiledMapLayer } from 'esri-leaflet';

1. rollup main.js --format iife --name "myBundle" --file bundle.js

Outputs:

main.js → bundle.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
esri-leaflet (imported by main.js)
(!) Unused external imports
tiledMapLayer imported from external module 'esri-leaflet' but never used
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
esri-leaflet (guessing 'esriLeaflet')
created bundle.js in 33ms