Discussion on: Invoking React components from your Ember apps

[Rajkiran KB]

Thanks for sharing. Have you tried to use module css on the react component ?

[Rajasegar Chandran]

Haven't tried that.
Why, is there any particular issue with module css?

[Rajkiran KB]

Yes. It didn't work. Not gone into the details of it.

Also, in one of the cons you have mentioned that Hot module reloading won't work if you change code in React components since it is a separate dependency via npm

But if you add the watchDependencies config to autoImport config in ember-cli-build.js, changes in react app will cause the ember app dev server to reload.

    autoImport: {
      webpack: {
        module: {
          rules: [
            {
              test: /some-react-lib\/.*\.jsx/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: [
                    ['@babel/preset-react', { runtime: 'automatic' }],
                  ],
                  plugins: ['@babel/plugin-proposal-optional-chaining']
                },
              },
            },
          ],
        },
      },
      watchDependencies: [
        // trigger rebuilds if "some-react-lib" changes during development
        'some-react-lib',
      ],
    },

Related issues that led me to identifying this

https://github.com/embroider-build/ember-auto-import/issues/163
https://github.com/embroider-build/ember-auto-import/pull/350

[Rajasegar Chandran]

Hey thanks Rajkiran for putting the effort in identifying the issues, much appreciated