Webpack resolve alias with shared react components outside root

I have a two projects app1 and app2.

Both these projects are different npm packages.

I have a shared set of files in shared folder.

- MyComputer
|- app1
|- app2 
|- shared

shared has set of files react files only (no npm modules or package.json or .babelrc etc).

- shared
|- index.js
|- MyComponent
  |- MyComponent.js
  |- index.js

My both webpack.config.js inside app1 and app2 has

  const sharedModule = path.resolve(__dirname, '../shared/');
  resolve: {
     alias: {
       'shared': sharedModule,
     },
   },
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: 'babel-loader',
        include: [sharedModule, path.join(__dirname, 'src')],
        query: {
          cacheDirectory: true,
        },
      },

When using this config the webpack does not know what to do with files inside shared and thus gives errors like unexpected token <MyComponent> etc

Now when im copying my shared folder inside the root of app1 and app2 it compiles without any error.

i.e like this const sharedModule = path.resolve(__dirname, 'src/shared/')

How can i have the shared components outside the root ? because i cant maintain to copy the my shared folder inside app1 and app2 everytime i make a change in shared folder.