Setting up ReactFlow v11 with webpack

Question

I am trying to use ReactFlow version 11 in my existing project. I am using external react scripts in the project. I am using React 17 with react-scripts@5.0.0 and my webpack looks like this :

module.exports = {
 ....
  externals: {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom',
      umd: 'react-dom',
    },
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react',
      umd: 'react',
    }
  },
   module: {
    rules: [
        
        {
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader'
        },
        {
          test: /\.(js|ts|tsx)$/,
          include: /node_modules[\\/]@?reactflow/,
          use: {
            loader: "babel-loader",
            options: { presets: [
              '@babel/preset-env',
              '@babel/preset-react'
              ] } 
          },
        },
        ....

while this compiles fine, I face a run time error

Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
    at eval (react-jsx-runtime.development.js:52:34)
    at eval (react-jsx-runtime.development.js:1313:5)
    at ./node_modules/react/cjs/react-jsx-runtime.development.js (workflows.js?ver=90292:1908:1)
    at __webpack_require__ (workflows.js?ver=90292:20:30)
    at eval (jsx-runtime.js:4:20)
    at ./node_modules/react/jsx-runtime.js (workflows.js?ver=90292:1920:1)

any help would be greatly appreciated.

Setting up ReactFlow v11 with webpack

0 Answers0