Rollup build IIFE with bundled dependency: missing global variable name still

186 Views Asked by At

Using Rollup.js, I need to build a package that needs to be imported using a tag.

This package has a few dependencies such as React and ReactDOM, and another interal dependency, let's call it my-own-package.

I would like:

  • to have React, and ReactDOM to be external dependencies: the final user will need to import these dependencies on its own.

  • the my-own-package dependency to be bundles to the final build so that the final user must not import it on its own.

this is my current rollup.config.js:

import commonjs from '@rollup/plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import resolve from '@rollup/plugin-node-resolve'
import scssVariable from 'rollup-plugin-sass-variables'
import json from '@rollup/plugin-json'
import url from '@rollup/plugin-url'
import svgr from '@svgr/rollup'
import typescript from 'rollup-plugin-typescript2'
import pkg from './package.json'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'iife',
      sourcemap: false,
      name: 'myFinalPackage',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
    },
  ],
  external: ['react', 'react-dom'],
  plugins: [
    external(),
    postcss({
      modules: true,
      use: [
        [
          'sass', {
            includePaths: [
              './node_modules',
            ],
          },
        ],
      ],
    }),
    url(),
    json(),
    svgr(),
    scssVariable(),
    resolve({
      jsnext: true,
      preferBuiltins: true,
      browser: true,
      include: ['node_modules/my-own-package'],
    }),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true,
    }),
    commonjs(),
  ],
}

I would expect that after defining external as ['react', 'react-dom'], rollup will bundle the remaining dependency, but it looks like I keep getting this warning:

(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
my-own-package (guessing 'myOwnPackage')

How can I tell rollup to bundle this package so that I don't need to map it to a global variable name?

0

There are 0 best solutions below