`Can't find module` when using monorepo / yarn workspaces

I’m trying to setup yarn workspaces with my docker instance. This is my directory structure:

/monorepo/
  /node_modules/
        @libs/common
        @services/common
        @services/project-A
        ...OTHER DEPS...
  package.json
  /services/
      /common/
         index.jsx
         package.json
      /project-A/  
           webpack.base.config.js
           **REACT project with babel, webpack, etc**
 
  /libs/
     /tools/
         /common/
            index.jsx
            package.json

To simplify my docker setup I just configured this volume within my docker compose that maps the entire monorepo directory:

volumes:
      - '../../../monorepo:/monorepo'

From there in my Project-A I import @libs/common and @services/common. This works fine when the common libraries are exporting simple functions like:

export const Add = (a,b) => a+b

Webpack has no issue resolving this and building Project-A.

However when I try to import a component from one of the common libraries like this:

/libs/tools/common: 

      import React from 'react' 
      export MySharedComponent = () => <>HELLLO</>

I get an error in the build process:

 Error: Cannot find module '/monorepo/libs/tools/common/webpack.base.config.js'
Require stack:
- /monorepo/node_modules/eslint-import-resolver-webpack/index.js
- /monorepo/node_modules/eslint-module-utils/resolve.js
- /monorepo/node_modules/eslint-plugin-import/lib/rules/no-unresolved.js
- /monorepo/node_modules/eslint-plugin-import/lib/index.js

The eslint file under Project-A:

{
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "cypress/globals": true
    },
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "webpack.base.config.js"
        }
      }
    }
  }

The babel.rc under Project-A

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "env": {
    "test": {
      "plugins": [
        [
          "babel-plugin-webpack-alias",
          {
            "config": "./webpack.base.config.js"
          }
        ]
      ]
    }
  }
}

My Question:

• Is the main issue that there’s no webpack config set up in the common repositories. Therefore the workspace does not know how to compile my shared resources?

• Should there only be 1 webpack build config in my workspace used by all projects within the workspace? Currently I only have 1 config under Project-A?

• What happens if I have specific webpack needs per project, does 1 config (if that’s the answer) make sense?

[simkessy]

Yea I’m realizing now that it’s babel related and likely with my set up and not directly related to this plugin. Just not entirely sure how to fix it yet. Feel free to close if not relevant anymore.

[dirkpostma]

Not sure if it helps in this particular case, but I solved a similar issue by adding "types": property to the package.json of the dependency. Similar to the "main" prop, but for types.

Example:

"types": "src/types.d.ts",

Reference: https://stackoverflow.com/questions/66081171/lerna-yarn-and-typescript-cannot-find-module-or-its-corresponding-type-declar