与弹出的create-react-app项目共享的组件

Question

我有几个用create-react-app创建并退出的项目。现在，我在每个项目中都有一些重复的组件。相反，我想在项目目录上方的目录中有一个共享组件。

目录结构如下：

 - shared_components
     - MySharedComponent.js
 - project1
 - project2
 - project3

我更新了项目中的webpack.config.js文件，以允许通过将src目录添加到shared_components来导入ModuleScopePlugin目录之外的文件：

{
   resolve: {
      plugins: [
         new ModuleScopePlugin([paths.appSrc, paths.mySharedComponents], [paths.appPackageJson]),
      ],
   }
}

这可以成功导入文件，但是shared_components似乎并没有编译我的babel-loader目录。

我遇到以下错误：

SyntaxError: /path/to/shared_components/MySharedComponent.js: Unexpected token <

此错误发生在我组件中的JSX开头，可能是因为它从未编译为纯Javascript。

我尝试更新babel-loader配置以包含共享目录，但是它不起作用：

{
   test: /\.(js|mjs|jsx|ts|tsx)$/,
   include: [paths.appSrc, paths.mySharedComponents],
   loader: require.resolve("babel-loader"),
   // ...the rest of the config is just the defaults
}

如何使我的JSX组件成功编译？