Error: Illegal reassignment for import

Question

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

But I get an error message that does not allow to complete the collapse.

Import:

import * as mapboxgl from 'mapbox-gl'; (mapboxgl as any).accessToken = this.accessToken; this.map = new mapbox.Map({...}); 

When I run tsc , there are no 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 narrowed that the error only occurs when (mapboxgl as any).accessToken = this.accessToken; .

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' } }; 

Answer 1

Pretty annoying and not quite sure why this should be done this way, but I managed to avoid the error and still get the mapbox-gl module to work using the assignment function to set accessToken on mapboxgl

So I changed:

 import * as mapboxgl from 'mapbox-gl'; (mapboxgl as any).accessToken = this.accessToken; this.map = new mapbox.Map({...}); 

For this:

 import * as mapboxgl from 'mapbox-gl'; this.assign(mapbox, "accessToken", this.accessToken); this.map = new mapbox.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; }