React is not defined

[Nefcanto]

Hi

I used your guide to migrate to CRA + esbuild.

I have a simple component in my source:

import Dummy from './Dummy'

const jsxSingleElement = <Dummy />

export default jsxSingleElement

And after upgrading to your library I receive this error:

Uncaught ReferenceError: React is not defined
    at ./src/Components/React/JsxSingleElement.js (JsxSingleElement.js:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/Components/React/Render.js (JsxSingleElement.js:5:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/Panel/Test.js (Styles.js:3:1)
    at options.factory (react refresh:6:1)

And when I remove this file, it keeps complaining about React is not defined in all of my components one after the other.

This is my craco.config.js:

const path = require(`path`);
const aliases = {
  '@Form': 'src/Components/Form/Exports',
  '@List': 'src/Components/List/Exports',
  '@Browse': 'src/Components/Browse/Browse',
  '@Tree': 'src/Components/Tree/Exports',
  '@Tab': 'src/Components/Tab/Exports',
  '@Dashboard': 'src/Components/Dashboard/Dashboard',
  '@Panel': 'src/Panel/Panel',
};

const resolvedAliases = Object.fromEntries(
  Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
);

const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = {
  plugins: [{ plugin: CracoEsbuildPlugin }],
  // eslint: {
  //   enable: false
  // },
  webpack: {
    alias: resolvedAliases,
    // this config, causes HolismIcon to throw react error 321 for builds
    configure: {
      resolve: {
        symlinks: false,
      },
    },
  },
}

What am I doing wrong? How can I fix this bug?

[TchernyavskyDaniil]

Hi! You can use ProvidePlugin
Not sure if this is a good solution, but still

const { ProvidePlugin } = require('webpack');
...
webpack: {
        plugins: {
            add: [
                new ProvidePlugin({
                    React: 'react',
                }),
            ],
        },
...

[vjsingh]

This is a duplicate of: #7

[pradel]

Closing the issue as it's a duplicate.