build works-ish - problem with cjs & es output

.eslintrc.yaml

@@ -0,0 +1,11 @@
+extends:
+  - prettier
+parser: babel-eslint
+plugins:
+  - babel
+rules:
+  quotes:
+    - error
+    - single
+    - avoidEscape: true
+      allowTemplateLiterals: true

.gitignore

@@ -2,6 +2,8 @@
 
 # compiled output
 /dist
+/lib
+/bundles
 /tmp
 /out-tsc
 

babel.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+  //   "@babel/plugin-transform-runtime",
+  //   "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-class-properties"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "@babel/plugin-transform-modules-commonjs",
+        "babel-plugin-istanbul"
+      ]
+    }
+  }
+}

package.json

@@ -2,9 +2,23 @@
   "name": "@rollbar/react",
   "version": "0.5.0",
   "description": "React features to enhance using Rollbar.js in React Applications",
-  "main": "dist/index.js",
+  "main": "lib",
+  "module": "dist",
+  "bundles": {
+    "browser": "bundles/browser.umd.js"
+  },
+  "sideEffects": false,
+  "directories": {
+    "lib": "dist"
+  },
+  "files": [
+    "dist",
+    "lib",
+    "bundles"
+  ],
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "build": "rollup --config"
   },
   "repository": {
     "type": "git",
@@ -23,15 +37,39 @@
   },
   "homepage": "https://github.com/rollbar/rollbar-react#readme",
   "dependencies": {
-    "rollbar": "^2.21.1",
     "tiny-invariant": "^1.1.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.15",
+    "@babel/node": "^7.13.13",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-syntax-class-properties": "^7.12.13",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@testing-library/dom": "^7.30.3",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/react-hooks": "^5.1.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
+    "jest": "^26.6.3",
+    "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
-    "rollup": "^2.44.0"
+    "rollbar": "^2.21.1",
+    "rollup": "^2.44.0",
+    "rollup-plugin-jsx": "^1.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
   },
   "peerDependencies": {
-    "react": "^16.0.0-0 || ^17.0.0-0"
+    "react": "^16.0.0-0 || ^17.0.0-0",
+    "prop-types": "^15.7.2",
+    "rollbar": "^2.21.1"
   }
 }

rollup.config.js

@@ -0,0 +1,57 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+// import jsx from 'rollup-plugin-jsx';
+import babel from '@rollup/plugin-babel';
+import pkg from './package.json';
+
+const COMMON_PLUGINS = [
+  resolve(),
+  peerDepsExternal(),
+  // jsx({ factory: 'React.createElement' }),
+  babel({ babelHelpers: 'bundled', exclude: ['node_modules/**'] }),
+]
+
+export default [
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'Rollbar.react',
+      file: pkg.bundles.browser,
+      format: 'umd',
+      sourcemap: true,
+      exports: 'named',
+      globals: {
+        react: 'React',
+        'prop-types': 'PropTypes',
+        rollbar: 'Rollbar',
+      }
+    },
+    plugins: [
+      ...COMMON_PLUGINS,
+      commonjs(),
+    ],
+  },
+
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        file: pkg.module,
+        format: 'es',
+        sourcemap: true,
+        entryFileNames: '[name].js',
+      },
+      {
+        file: pkg.main,
+        format: 'cjs',
+        sourcemap: true,
+        entryFileNames: '[name].js',
+      },
+    ],
+    plugins: [
+      ...COMMON_PLUGINS,
+    ],
+  },
+];
+

src/hooks/use-rollbar-capture-event.js

@@ -1,6 +1,6 @@
 import invariant from 'tiny-invariant';
-import VALID_LEVELS, { LEVEL_DEBUG, LEVEL_INFO, LEVEL_CRITICAL } = '../constants';
-import [ useRollbar } from './use-rollbar';
+import VALID_LEVELS, { LEVEL_DEBUG, LEVEL_INFO, LEVEL_CRITICAL } from '../constants';
+import { useRollbar } from './use-rollbar';
 
 export function useRollbarCaptureEvent(metadata, level = LEVEL_INFO) {
   invariant(VALID_LEVELS[level] <= LEVEL_CRITICAL && VALID_LEVELS[level] >= LEVEL_DEBUG, '')

src/hooks/use-rollbar-config.js

@@ -1,4 +1,4 @@
-import [ useRollbar } from './use-rollbar';
+import { useRollbar } from './use-rollbar';
 
 export function useRollbarConfiguration(config) {
   const rollbar = useRollbar();