How to import a compiled module from one app to another in npm workspace using webpack?

Question

I'm using npm workspaces for the first time(node version v16.15.0 and npm v8.5.5 ). I need to import components from a react app in another app with some minor updates. We still need to continue to be able to deploy the legacy app. So I'm using monorepo structure to achieve this. I can start and build the app1 and app2 individually. Later I'm planning to move shared packages out of app2. But for now even though I've build the app2 when I import components from it in app1 I get an error "You may need an additional loader to handle the result of these loaders". I guess the import is still from the src whereas I want to import compiled files. How can I do that ?

- root
  package.json
  - apps
    - app1
      package.json
      webpack.config.json
    - app2
      package.json
      webpack.config.json

Answer 1

So I finally got everything working. I had shared react components from app2 that I wanted to import in app1. I could have moved the shared components into separate package/features/Feature.js[x]. But for the time being I'm importing it directly from app2. For this I needed to update my webpack config in app1 to resolve for

  resolve: {
            alias: {
                '@scope/app2/src': path.resolve(__dirname, '../app2/src'),
            },
        },

NOTE: @scope/app2 is the package name in package.json

Additionally I added @scope/app2 as a dependency in app1 under package.json. I got the hint from this post here https://medium.com/edgybees-blog/how-to-move-from-an-existing-repository-to-a-monorepo-using-npm-7-workspaces-27012a100269#4223

By doing this I was able to teach webpack to transpile the src files imported from app2. Hope this helps anyone looking for more information on npm workspace 8