OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I configure Rollup for a React Component Library?

  • Thread starter Thread starter Ian
  • Start date Start date
I

Ian

Guest
I'm trying to configure Rollup for a React component library (using v3), and am having a real fight. I don't know exactly what I'm doing, but chasing each error just leads to another error. I'm confident that this should be pretty straight forward and is a common use case so I'm hoping someone might be able to help?

Originally I started just with:

Code:
const peerDepsExternal = require("rollup-plugin-peer-deps-external");
const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");
const postcss = require("rollup-plugin-postcss");

module.exports = {
  input: "src/index.js",
  output: {
    dir: "build",
    format: "esm",
    preserveModules: true,
    preserveModulesRoot: "src",
    sourcemap: true,
  },
  // external: [/@babel\/runtime/],
  plugins: [
    resolve(),
    commonjs(),
    postcss(),
    peerDepsExternal(),
  ],
};

But I hit an error where it was unable to find any JSX files:

Could not resolve "./withSVG" from "src/hoc/index.js"

So I added in the babel JSX plugin:

Code:
const jsx = require("rollup-plugin-jsx");
...
plugins: [
    resolve(),
    jsx({ factory: "React.createElement" }),
    commonjs(),
    postcss(),
    peerDepsExternal(),
]

This then led to another error, where it was unable to parse the chainable operator .?:

[!] (plugin commonjs--resolver) Error: Parse Error: Line 20: Unexpected token . src/utils/linkStores.js Error: Parse Error: Line 20: Unexpected token .

So I assumed I needed to insert babel into here somewhere:

Code:
const { babel } = require("@rollup/plugin-babel");
...
plugins: [
    resolve(),
    jsx({ factory: "React.createElement" }),
    commonjs(),
    babel({
      exclude: "node_modules/**",
      extensions: [".js", ".jsx"],
    }),
    postcss(),
    peerDepsExternal(),
]

This gave the following message:

babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers

Following the link gives the follow blurb:

'runtime' - you should use this especially when building libraries with Rollup. It has to be used in combination with @babel/plugin-transform-runtime and you should also specify @babel/runtime as dependency of your package. Don't forget to tell Rollup to treat the helpers imported from within the @babel/runtime module as external dependencies when bundling for cjs & es formats. This can be accomplished via regex (external: [/@babel/runtime/]) or a function (external: id => id.includes('@babel/runtime')). It's important to not only specify external: ['@babel/runtime'] since the helpers are imported from nested paths (e.g @babel/runtime/helpers/get) and Rollup will only exclude modules that match strings exactly.

So as I'm trying to create a component library I added:

Code:
const babelPluginTransformRuntime = require("@babel/plugin-transform-runtime");
...
plugins: [
    babelPluginTransformRuntime,
    resolve(),
    jsx({ factory: "React.createElement" }),
    commonjs(),
    babel({
      exclude: "node_modules/**",
      babelHelpers: "runtime",
      extensions: [".js", ".jsx"],
    }),
    postcss(),
    peerDepsExternal(),
]

With a babel.config.js of:

Code:
module.exports = {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
        [
            "@babel/plugin-transform-react-jsx",
            {
                runtime: "automatic",
            },
        ],
    ],
};

But now I get the following error and I can't seem to find any way to resolve this one:

[!] (plugin commonjs--resolver) RollupError: You have declared using "runtime" babelHelpers, but transforming /home/ian/src/chart-it/packages/react/src/index.js resulted in "inline". Please check your configuration.

Can anyone suggest a working rollup config for a react component library (not TypeScript)?

Here's a link to the repository if anyone wants to test an answer: https://github.com/IPWright83/chart-it/tree/fixingPackage

<p>I'm trying to configure Rollup for a React component library (using v3), and am having a real fight. I don't know exactly what I'm doing, but chasing each error just leads to another error. I'm confident that this should be pretty straight forward and is a common use case so I'm hoping someone might be able to help?</p>
<p>Originally I started just with:</p>
<pre><code>const peerDepsExternal = require("rollup-plugin-peer-deps-external");
const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");
const postcss = require("rollup-plugin-postcss");

module.exports = {
input: "src/index.js",
output: {
dir: "build",
format: "esm",
preserveModules: true,
preserveModulesRoot: "src",
sourcemap: true,
},
// external: [/@babel\/runtime/],
plugins: [
resolve(),
commonjs(),
postcss(),
peerDepsExternal(),
],
};
</code></pre>
<p>But I hit an error where it was unable to find any JSX files:</p>
<blockquote>
<p>Could not resolve "./withSVG" from "src/hoc/index.js"</p>
</blockquote>
<p>So I added in the babel JSX plugin:</p>
<pre><code>const jsx = require("rollup-plugin-jsx");
...
plugins: [
resolve(),
jsx({ factory: "React.createElement" }),
commonjs(),
postcss(),
peerDepsExternal(),
]
</code></pre>
<p>This then led to another error, where it was unable to parse the chainable operator <code>.?</code>:</p>
<blockquote>
<p>[!] (plugin commonjs--resolver) Error: Parse Error: Line 20: Unexpected token .
src/utils/linkStores.js
Error: Parse Error: Line 20: Unexpected token .</p>
</blockquote>
<p>So I assumed I needed to insert babel into here somewhere:</p>
<pre><code>const { babel } = require("@rollup/plugin-babel");
...
plugins: [
resolve(),
jsx({ factory: "React.createElement" }),
commonjs(),
babel({
exclude: "node_modules/**",
extensions: [".js", ".jsx"],
}),
postcss(),
peerDepsExternal(),
]
</code></pre>
<p>This gave the following message:</p>
<blockquote>
<p>babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: <a href="https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers" rel="nofollow noreferrer">https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers</a></p>
</blockquote>
<p>Following the link gives the follow blurb:</p>
<blockquote>
<p>'runtime' - you should use this especially when building libraries with Rollup. It has to be used in combination with @babel/plugin-transform-runtime and you should also specify @babel/runtime as dependency of your package. Don't forget to tell Rollup to treat the helpers imported from within the @babel/runtime module as external dependencies when bundling for cjs & es formats. This can be accomplished via regex (external: [/@babel/runtime/]) or a function (external: id => id.includes('@babel/runtime')). It's important to not only specify external: ['@babel/runtime'] since the helpers are imported from nested paths (e.g @babel/runtime/helpers/get) and Rollup will only exclude modules that match strings exactly.</p>
</blockquote>
<p>So as I'm trying to create a component library I added:</p>
<pre><code>const babelPluginTransformRuntime = require("@babel/plugin-transform-runtime");
...
plugins: [
babelPluginTransformRuntime,
resolve(),
jsx({ factory: "React.createElement" }),
commonjs(),
babel({
exclude: "node_modules/**",
babelHelpers: "runtime",
extensions: [".js", ".jsx"],
}),
postcss(),
peerDepsExternal(),
]
</code></pre>
<p>With a <code>babel.config.js</code> of:</p>
<pre><code>module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
[
"@babel/plugin-transform-react-jsx",
{
runtime: "automatic",
},
],
],
};
</code></pre>
<p>But now I get the following error and I can't seem to find any way to resolve this one:</p>
<blockquote>
<p>[!] (plugin commonjs--resolver) RollupError: You have declared using "runtime" babelHelpers, but transforming /home/ian/src/chart-it/packages/react/src/index.js resulted in "inline". Please check your configuration.</p>
</blockquote>
<p>Can anyone suggest a working rollup config for a react component library (not TypeScript)?</p>
<p>Here's a link to the repository if anyone wants to test an answer: <a href="https://github.com/IPWright83/chart-it/tree/fixingPackage" rel="nofollow noreferrer">https://github.com/IPWright83/chart-it/tree/fixingPackage</a></p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top