Rollup: wants me to create global variables. How can I use 'export default'?

javascript es6-modules rollup
mikemaccana picture mikemaccana · Jul 17, 2018 · Viewed 7k times · Source

I have a small app I am converting to use rollup. It uses ES6 modules - when I run rollup -c, it complains about one of my ES6 modules:

/js/monogram.js (imported by src\main.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
/js/monogram.js (guessing 'drawMonogram')
created public\js\bundle.js in 311ms

The module monogram.js uses: 

export default drawMonogram

I am importing it with:

import drawMonogram from '/js/monogram.js';

Both of these worked before rollup. Is this now not OK?

Should I actually make output.globals to specify a global name?

Why do I need a global variable? Is the global requirement from ES6 modules (I'd have thought modules would be in a functional scope) or rollup?

Answer

mikemaccana picture mikemaccana · Jul 18, 2018

Rollup's error is completely unrelated to the problem. It's simply not able to import the module at that path. Using ES6 modules in browser,

import drawMonogram from '/js/monogram.js';

Was relative to the web server root. However using rollup on the developmnt box, 

import drawMonogram from '/js/monogram.js';

is considered relative to / on the hard disk. Using a relative import fixed the errror.

import drawMonogram from './monogram.js';

Related questions

Is it possible to import modules from all files in a directory, using a wildcard?

With ES6, I can import several exports from a file like this: import {ThingA, ThingB, ThingC} from 'lib/things'; However, I like the organization of having one module per file. I end up with imports like this: import ThingA from …

Read More
How can I alias a default import in JavaScript?

Using ES6 modules, I know I can alias a named import: import { foo as bar } from 'my-module'; And I know I can import a default import: import defaultMember from 'my-module'; I'd like to alias a default import and I had …

Read More
Using import fs from 'fs'

I want to use import fs from 'fs' in JavaScript. Here is a sample: import fs from 'fs' var output = fs.readFileSync('someData.txt') console.log(output) The error I get when I run my file using node main.js …

Read More