[Fixed] RollupError: "default" is not exported by "node_modules/react/index.js" – Javascript

The Problem:

A user is creating a reusable React Button component library using Rollup. They encountered an error when running rollup -c, reporting "default" is not exported by "node_modules/react/index.js". They installed @rollup/plugin-commonjs, but it didn’t resolve the issue. The user provided their package.json, Rollup configuration, and the Button component code. How can the error be fixed?

The Solutions:

Solution 1: Use Babel for Transpiling

Using Babel along with Rollup resolves the issue of importing React from node_modules. Here’s the updated configuration:

Rollup Config:

import babel from 'rollup-plugin-babel';

// ...Previous code

plugins: [
  peerDepsExternal(),
  postcss({
    inject: true
  }),
  typescript(),
  babel({
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    exclude: 'node_modules/**'
  }),
  resolve(),
  commonjs()
]

Babel Config:
Create a .babelrc file with the following content:

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

Updated Packages:
Ensure that you have the following packages installed:

"devDependencies": {
  "@babel/core": "^7.22.20",
  "@babel/preset-env": "^7.22.20",
  "@babel/preset-react": "^7.22.15",
  "@babel/preset-typescript": "^7.22.15",
  "rollup-plugin-babel": "^4.4.0"
}

This updated configuration ensures that the code undergoes Babel’s transpilation process, allowing you to import React correctly and resolving the "default" export error.

Video Explanation:

The following video, titled "Command failed with exit code 1: npm run build - Netlify fix 2020 ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Udemy Courses: - 9 React Projects on Udemy - https://bit.ly/2D83M8c - 9 React Projects on Gumroad - https://h3webdevtuts.gumroad.com/l/oOgYi ...