Missing global variable names

[xiaoxiangmoe]

I'm watching the video How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup at 26:54 / 38:50 . Such is my files:

rollup.config.js:

//Rollup plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    entry: './src/scripts/main.js',
    dest: './build/js/main.min.js',
    format: 'iife',
    sourceMap: 'inline',
    plugins: [
        // builtins(),
        resolve({
            jsnext: true,   
            main:true,
            brower:true,         
        }),
        commonjs(),
        eslint({
            exclude: 'src/styles/**',
        }),
        babel({
            exclude: 'node_modules/**',
        })
    ],
    external:['debug']
};

main.js

// Import a couple modules for testing.
import { sayHelloTo } from './modules/mod1';
import addArray from './modules/mod2';


import debug from 'debug';
const log = debug('app:log');
debug.enable('*');
log('Loging Start!!! Great!!!');
debug.disable();


// Run some functions from our imported modules.
const result1 = sayHelloTo('Jason');
const result2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName('debug__output')[0];

printTarget.innerText = `sayHelloTo('Jason') => ${result1}\n\n`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;

package.json

{
  "name": "learn-rollup",
  "version": "0.0.0",
  "description": "This is an example project to accompany a tutorial on using Rollup.",
  "main": "build/js/main.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/jlengstorf/learn-rollup.git"
  },
  "author": "Jason Lengstorf <jason@lengstorf.com> (@jlengstorf)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jlengstorf/learn-rollup/issues"
  },
  "homepage": "https://github.com/jlengstorf/learn-rollup#readme",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "rollup": "^0.49.0",
    "rollup-plugin-babel": "^3.0.2",
    "rollup-plugin-commonjs": "^8.2.0",
    "rollup-plugin-eslint": "^4.0.0",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-replace": "^1.1.1"
  },
  "dependencies": {
    "debug": "^3.0.1"
  }
}

Such is my output:

PS D:\program\rollup_playground\learn-rollup-step-0> ./node_modules/.bin/rollup -c
(!) Some options have been renamed
https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32
options.entry is now options.input
options.sourceMap is now options.sourcemap
options.dest is now options.output.file
options.format is now options.output.format

./src/scripts/main.js → ./build/js/main.min.js...
(!) Missing global variable name
Use options.globals to specify browser global variable names corresponding to external modules
debug (guessing 'debug')
created ./build/js/main.min.js in 631ms

and open in blowser(Chrome), console's output is:

main.js:21 Uncaught ReferenceError: debug is not defined
    at main.js:21
(anonymous) @ main.js:21

How can I solve it?

[yles9056]

I don't know if you still encounter the problem. Anyway, you shouldn't set debug as external.
Remove this from rollup.config.js.
external:['debug']

[Andarist]

There is also a chance that you had problems with debug and you have tried to fix it with setting it as external. If so you should probably use https://github.com/rollup/rollup-plugin-node-resolve#usage with the browser: true

[catamphetamine]

Since this is the first result in Google im posting my solution to this issue:

(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
react (guessing 'React')
react-dom (guessing 'ReactDOM')
prop-types (guessing 'PropTypes')

rollup.config.js:

{
  external: [
    'react',
    'react-dom',
    'prop-types'
  ],
  output: {
    globals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
      'prop-types': 'PropTypes'
    },
    ...
  },
  ...
}