Rollup Error: 'default' is not exported by node_modules/react/index.js

Question

I have a project where I use webpack and want to switch to rollup.js but I have trouble regarding the plugin @rollup/plugin-commonjs.

My rollup.conf.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';

const config = {
    input: 'site/templates/scripts/master.js',
    output: [
        {
            file: 'site/templates/scripts/master.min.js',
            format: 'cjs'
        }
    ],
    plugins: [
        nodePolyfills(),
        resolve({
            browser: true
        }),
        commonjs({
            include: /node_modules/,
            namedExports: {
                'react': ["useState", "useEffect"],
                '@apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
                'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
            }
        }),
        babel({
            babelrc: true,
            exclude: 'node_modules/**'
        }),
        terser()
    ]
};

export default config;

The Error I'm getting and don't know to solve

site/templates/scripts/master.js → site/templates/scripts/master.min.js...
[!] Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js (3:7)
1: 'use strict';
2: 
3: import React from "react";
          ^
4: 
5: const FredhopperProduct = ({
Error: 'default' is not exported by node_modules/react/index.js, imported by site/templates/scripts/src/BgProductRecommendations/FredhopperProduct.js
    at error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:10152:30)
    at Module.error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14487:16)
    at handleMissingExport (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14388:28)
    at Module.traceVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:14871:24)
    at ModuleScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:13448:39)
    at FunctionScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
    at ChildScope.findVariable (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8661:38)
    at MemberExpression.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11285:49)
    at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:8746:23)
    at CallExpression$1.bind (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:11473:15)

The https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module page does not really help, since I have all named exports which I use in my config.

Community · Accepted Answer · 2020-06-20 09:12:55Z

19

Finally I found what was wrong. I needed the @rollup/plugin-replaceplugin to replace process.env.NODE_ENV

Here's the working code

It needed also some more namedExports.

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import replace from '@rollup/plugin-replace';

import React from 'react';
import ReactIs from 'react-is';
import ReactDOM from 'react-dom';

const config = {
    input: 'site/templates/scripts/master.js',
    output: [
        {
            file: 'site/templates/scripts/master.min.js',
            format: 'cjs'
        }
    ],
    plugins: [
        replace({
            "process.env.NODE_ENV": JSON.stringify("development")
        }),
        nodePolyfills(),
        resolve({
            browser: true
        }),
        commonjs({
            include: /node_modules/,
            namedExports: {
                'react-is': Object.keys(ReactIs),
                'react': Object.keys(React),
                'react-dom': Object.keys(ReactDOM),
                '@apollo/client': ['ApolloProvider', 'ApolloClient', 'HttpLink', 'InMemoryCache', 'useQuery', 'gql'],
                'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
            }
        }),
        babel({
            babelrc: true,
            exclude: 'node_modules/**'
        }),
        terser()
    ]
};

export default config;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 15, 2020 at 20:07

tiefenb

123 gold badges18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike S. Over a year ago

Hmm. I must be doing something wrong because I have all of the identified changes and still get that error.

Raphael Bossek Over a year ago

@MikeS. Check your packages.json file and add react at least for peerDependencies not only in devDependencies. This may help.

dmbaughman Over a year ago

You're a life-saver--this combination of plugins fixed my issue!

Akshay Vijay Jain · Accepted Answer · 2022-10-19 14:09:21Z

10

The solution for this problem is to update commonjs option to make it as below

import commonjs from '@rollup/plugin-commonjs';
// rollup.config.js
export default {
  input: 'src/app.ts',
  output: [
    {
...
    commonjs({
      include: /node_modules/,
      requireReturnsDefault: 'auto', // <---- this solves default issue
    }),

documentation link: https://www.npmjs.com/package/@rollup/plugin-commonjs search for requireReturnsDefault

answered Oct 19, 2022 at 14:09

Akshay Vijay Jain

16.3k9 gold badges73 silver badges85 bronze badges

2 Comments

Raul Rene Over a year ago

For me the issue was that I needed it to work for external packages as well (e.g. lodash), so I had to switch to requireReturnsDefault: 'esmExternals'. But your answer got me to that setting, so thanks!

Dolphin May 3 at 10:06

how about with esm, I do not want to output cjs.

alanionita · Accepted Answer · 2022-01-27 17:03:50Z

4

As of the latest @rollup/plugin-commonjs version, namedExports are handled by default.

Also try using this rollup babel config, requires the @babel/preset-react module to be installed

     babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-react"],
        babelHelpers: "bundled",
      }),

And since the date of the issue most rollup plugins have been namespaced so try to reinstall @rollup/plugin-babel

answered Jan 27, 2022 at 17:03

alanionita

1,4731 gold badge18 silver badges38 bronze badges

Comments

microJ · Accepted Answer · 2024-11-13 14:49:57Z

0

My project based on vite，use @vitejs/plugin-react-swc replace @vitejs/plugin-react works for me

answered Nov 13, 2024 at 14:49

microJ

1738 bronze badges

Collectives™ on Stack Overflow

Rollup Error: 'default' is not exported by node_modules/react/index.js

My rollup.conf.js

The Error I'm getting and don't know to solve

4 Answers 4

Here's the working code

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My rollup.conf.js

The Error I'm getting and don't know to solve

4 Answers 4

Here's the working code

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related