I am exploring making a component library using React and rollup. I'm finding that the app that is consuming the library is bundling it in the wrong order.
This is causing the below error:
bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
at webpackMissingModule (bundle.js:99)
at Module.../../../component-library/dist/index.es.js
In the Webpack CLI I also get similar errors:
ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react' in '/.../component-library/dist'
@ /.../component-library/dist/index.es.js 2:0-33 68:18-26
@ ./src/App/index.jsx
@ ./src/index.js
ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/.../component-library/dist'
@ /...component-library/dist/index.es.js 1:0-41 74:22-26
@ ./src/App/index.jsx
@ ./src/index.js
I have not published the library anywhere, so just using yarn link for now.
In my component library, my rollup config looks like:
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
const packageJson = require("./package.json")
const config = [
{
input: "./src/index.js",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
external: Object.keys(packageJson.peerDependencies || {}),
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
babel({ exclude: "node_modules/**", babelHelpers: "bundled" }),
],
},
]
export default config
My babel config
module.exports = {
presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}
My package.json
{
"name": "component-library",
"version": "0.0.0",
"description": "A component library.",
"main": "dist/index.js",
"module": "dist/index.es.js",
"repository": "https://github.com/.../component-library.git",
"private": true,
"scripts": {
"watch": "rollup -c --watch",
"build": "rollup -c"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.1.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.6.2",
"eslint": "^7.18.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.10.1",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"rollup": "^2.38.0",
"rollup-plugin-peer-deps-external": "^2.2.4"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
I can see the code that is output by rollup looks like it is correct:
import { jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
//continue...
In the bundle that my app's Webpack outputs, it adds the code for the component right near at the top, before any dependencies such as React or the actual app code.
line 76: //prior bundled code...
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "../../../component-library/dist/index.es.js":
/*!*******************************************************************!*\
!*** /.../component-library/dist/index.es.js ***!
\*******************************************************************/
/*! exports provided: Example */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Example", function() { return Example; });
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react/jsx-runtime'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
//continue...
//react/jsx-runtime is set up on line 118391
No matter where I add the component in the App, the code is bundled in the same place. I also tried to include React in my rollup bundle from the library. However, then my app complains about multiple React versions being loaded.
I am not too sure what to try next. I haven't experienced this with any other libraries I have downloaded via npm and used in my app. So this is making me think there is something wrong with my rollup config or build process.
So my setup actually was working. There was somehow a glitch in the symlink. I as able to resolve by running yarn unlink and yarn link. The package is now bundling correctly.