npmtypescript95% confidence\u2191 9

Error: Illegal reassignment to import

Full error message

I am trying to import a module into a typescript file and then bundle with Rollup.js.

But I am getting an error message which prevents Rollup from completing. 

The import:

import * as mapboxgl from 'mapbox-gl';

(mapboxgl as any).accessToken = this.accessToken;
this.map = new mapbox.Map({...});

When I run tsc there is not any error messages, but then when I run:

$ rollup -c rollup.config.js

Illegal reassignment to import 'mapboxgl'
Error: Illegal reassignment to import 'mapboxgl'
at error (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\utils\error.js:2:14)
at disallowIllegalReassignment (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\nodes\shared\disallowIllegalReassignment.js:9:4)
at Node.bind (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\nodes\AssignmentExpression.js:12:3)
at C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\Node.js:6:34
at Node.eachChild (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\Node.js:21:5)
at Node.bind (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\Node.js:6:8)
at Node.bind (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\nodes\BlockStatement.js:8:9)
at Node.bind (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\nodes\FunctionExpression.js:7:13)
at C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\Node.js:6:34
at Node.eachChild (C:\Users\m.wilson\AppData\Roaming\npm\node_modules\rollup\src\ast\Node.js:21:5)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki

I've narrowed down that the error only occurs when (mapboxgl as any).accessToken = this.accessToken; is present.

My rollup.config.js looks like this:

export default {
  moduleName: "mapbox.core",
  entry: 'src/js/index.js',
  format: 'umd',
  dest: 'core/core.umd.js',
  sourceMap: true,
  globals: {
   'mapbox-gl': 'mapboxgl'
  }
};

Solutionsource: stackoverflow \u2197

Pretty annoying and not really sure why it has to be done this way, but I managed to avoid the error and still get the mapbox-gl module to work by using an assign function to set the accessToken on mapboxgl So I changed: import * as mapboxgl from 'mapbox-gl'; (mapboxgl as any).accessToken = this.accessToken; this.map = new mapbox.Map({...}); To this: import * as mapboxgl from 'mapbox-gl'; this.assign(mapboxgl, "accessToken", this.accessToken); this.map = new mapboxgl.Map({...}); /* * * credit to this answer for the assign function: * http://stackoverflow.com/a/13719799/2393347 * */ private assign(obj: any, prop: any, value: any) { if (typeof prop === "string") prop = prop.split("."); if (prop.length > 1) { var e = prop.shift(); this.assign(obj[e] = Object.prototype.toString.call(obj[e]) === "[object Object]" ? obj[e] : {}, prop, value); } else obj[prop[0]] = value; }

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/6be897706c2e57a53f3371e6e40d4eefa72afdb49244901887a909a740ea1ff9

hash \u00b7 6be897706c2e57a53f3371e6e40d4eefa72afdb49244901887a909a740ea1ff9