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-packagedependency 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?