Ejecting from CRA to share components the shared directory are not linted

Question

I'm experimenting with ejecting from CRA 4 app to enable simple sharing of react components among multiple modules in a monorepo:

|-react_project_a
|-react_project_b
|-shared

After ejecting, all I had to do is to add the shared module path to two places in the webpack.config file:

 new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.clientShared //*******here
          reactRefreshOverlayEntry,
        ]),

and

test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: [paths.appSrc, paths.clientShared],
              loader: require.resolve('babel-loader')

works a treat, I even get hot reload. The only problem is that only the main app gets linted and so compilation errors and warnings for the shared module appear only in the browser developer tool console, like this:

The EslintWebpackPlugin used by CRA doesn't support multiple contexts for the plugin. Is there an alternative? I'm trying to provide my developers with an experience as close as possible to what they had with CRA.

Answer 1

Since my goal was sharing jsx components among CRA/react apps, the way simpler solution was to create a symbolic link in each react project pointing to the shared directory:

|-react_project_a
  |-shared=>shared 
|-react_project_b
  |-shared=>shared
|-shared

And to add this to the webpack.config

  resolve: {
             symlinks: false
            }

Since this was the only change I required, I wound up using CRACO instead of ejecting to handle the override. I'd close the question, but think folks might find this useful.