0

So the title might be a bit complicated, but I have a external component library/module build in React and am trying to convert our old webpack setup to a ESbuild setup. In our webpack setup we've set React as external and imported this inside our Rails applications which seemed to work fine.

I think I managed to set React as external through this answer: When using esbuild with external react I get Dynamic require of "react" is not supported

Which resulted in this setup:

build({
  entryPoints: ['./src/index.js'],
  bundle: true,
  format: 'esm,',
  outfile: path.join(__dirname, '../build/main.js'),
  loader: {
    '.css': 'css',
  },
  minify: true,
  minifyWhitespace: true,
  sourcemap: true,
  target: 'es2020',
  external: ['react', 'react-dom'],
  plugins: [
    externalGlobalPlugin({
      react: 'window.React',
      'react-dom': 'window.ReactDOM',
    }),
....

However, when I build it and include it inside a Rails application, which has React, React-DOM 18.0.2 it cant seem to figure out that the package is using React and fails on any React logic.

Is there something to my approach that seems off? Might it be better to include React and React-DOM inside the component library instead of including it in the Rails setup? I've tried that but when I wanted to include it I got the #321 error of React which refers to having multiple instances of React inside the application, where I was using:

'import { mountComponents } from "react-rails-ujs";' to include it inside the Rails project.

Any help would be welcome! Even if my way of thinking it totally wrong.

Greetings,

I've tried to exclude React from my component library but this resulted in my Rails application not able to spot React, even though it was included in the package.json.

I've tried to include React in my component library but that resulted in that I had multiple instances of React inside my rails application which was caused to my knowledge with react-rails-ujs

Bram Wesselink
  • 1
  • 1

0 Answers0