importing a component shared via npm throwing error

Question

I am trying to export a component to npm and then import in my react application

my export application webpack config looks like this

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/export.js'),
  mode: "production",
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader'
          }
        ],
      },
    ]
  },
  resolve: {
    extensions: ['.js']
  },
  externals: {
    'react': 'react',
    'react-dom': 'react-dom'
  },
  output: {
    path: path.resolve(__dirname, './dest'),
    filename: 'bundle.js',
  },
  devServer: {
    static: path.resolve(__dirname, './dist'),
  },
};

My export.js file looks like this

import Checkbox from './components/Checkbox/Checkbox';

export {
    Checkbox
}

It creates a bundle.js file which is then imported in another react application.

import Checkbox from "common_ui_utils";
export default function App() {
  return (
    <>
      <h1>Hello!</h1>

      <Checkbox />

    </>
  );
}

Checkbox component look like this

import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

function Checkbox(props) {
   --Checkbox code here --
}

I am getting this error while react is working perfectly fine in that repo

Answer 1

Referring to this answer can you try this in your webpack config file

externals: {
    'react': 'React'
},