Module not found: Error: Can't resolve '@emotion/styled'

[dstoyanoff]

Describe the bug

Hello folks,
I am having a strange issue with bit starting from today. I had to install some additional Material-UI packages, which seems to cause issues with the build process.

I am using material-uinext (v.5 alpha) and I am getting the following error during build for every component

ModuleNotFoundError: Module not found: Error: Can't resolve '@emotion/styled' in '/Users/danielstoyanoff/Library/Caches/Bit/capsules/5f69860134deacfe9e036bbeedb971ee647702ee/node_modules/@material-ui/styled-engine'
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/Compilation.js:1735:28
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:727:13
    at eval (eval at create (/Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:273:22
    at eval (eval at create (/Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:402:22
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:117:11
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:642:24
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:797:8
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:917:5
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/neo-async/async.js:6883:13
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/lib/NormalModuleFactory.js:900:45
    at finishWithoutResolve (/Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:296:11)
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:362:15
    at /Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:410:5
    at eval (eval at create (/Users/danielstoyanoff/.bvm/versions/0.0.431/bit-0.0.431/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

Found 36 errors in 36 components

What is interesting is that indeed I can't find the emotion/styled package in the capsule folder's node_modules, although it's listed as a dependency in my workspace and I can also see it in my local node_modules folder

Here is my workspace config

{
"$schema": "https://static.bit.dev/teambit/schemas/schema.json",
"teambit.workspace/workspace": {
  "name": "Spodio Bits",
  "icon": "https://static.wixstatic.com/media/cd80e1_abd45dd16c304e62a9e3686c93c34a95%7Emv2.png/v1/fill/w_32%2Ch_32%2Clg_1%2Cusm_0.66_1.00_0.01/cd80e1_abd45dd16c304e62a9e3686c93c34a95%7Emv2.png",
  "defaultDirectory": "{scope}/{name}",
  "defaultScope": "spodio-bits.bits"
},
"teambit.dependencies/dependency-resolver": {
  "packageManager": "teambit.dependencies/yarn",
  "policy": {
    "dependencies": {
      "@emotion/cache": "11.4.0",
      "@emotion/react": "11.4.0",
      "@emotion/server": "11.4.0",
      "@emotion/styled": "11.3.0",
      "@material-ui/core": "5.0.0-alpha.38",
      "@material-ui/styles": "5.0.0-alpha.36",
      "@material-ui/system": "5.0.0-alpha.38",
      "@testing-library/react": "11.2.7",
      "@types/jest": "26.0.23",
      "@types/react": "17.0.8",
      "@types/react-dom": "17.0.5",
      "@typescript-eslint/eslint-plugin": "4.25.0",
      "@typescript-eslint/parser": "4.25.0",
      "clsx": "1.1.1",
      "eslint": "7.27.0",
      "eslint-plugin-import": "2.23.4",
      "eslint-plugin-jest": "24.3.6",
      "eslint-plugin-react": "7.23.2",
      "eslint-plugin-react-hooks": "4.2.0",
      "eslint-plugin-sonarjs": "0.7.0",
      "eslint-plugin-testing-library": "4.6.0",
      "jss-plugin-vendor-prefixer": "10.6.0",
      "typescript": "4.3.2"
    },
    "peerDependencies": {
      "eslint": "7.27.0",
      "eslint-plugin-import": "2.23.4",
      "eslint-plugin-jest": "24.3.6",
      "eslint-plugin-react": "7.23.2",
      "eslint-plugin-react-hooks": "4.2.0",
      "eslint-plugin-sonarjs": "0.7.0",
      "eslint-plugin-testing-library": "4.6.0",
      "next": "^10.2.3",
      "react": "17.0.2",
      "react-dom": "17.0.2"
    }
  },
  "packageManagerArgs": [],
  "devFilePatterns": [
    "**/*.spec.ts"
  ],
  "strictPeerDependencies": true,
  "installFromBitDevRegistry": true
},
"teambit.workspace/variants": {
  "*": {
    "teambit.react/react": {}
  }
}
}

Let me know if any other info is needed.

Specifications

• Bit version: 0.0.431
• Workspace type: harmony
• Node version: 14.17.0
• yarn version: 1.22.10
• Platform: macOS 11.5 Beta

[dstoyanoff]

Moving @emotion/styled to peerDependencies seems to solve the issue for now

[GiladShoham]

that's what I was about to suggest.
That's fine, it's by design.
In the capsules (during bit build/tag) we only install dependencies mentioned by the components and not from the workspace, to simulate a real use case when consumed by others.
We do install peers from the workspace because these dependencies are expected to be installed by the consumer.

[GiladShoham]

Another option you have is to specify this as a dependency of your components via the variants in workspace.jsonc instead.

[dstoyanoff]

Hey @GiladShoham,
Thanks for that. This might solve another issues that I have too, thanks.

Can you help me understand how it works exactly? I am trying to set different dependencies on my bits, but eventually I get some deps I don't need.

My default yarn config looks like this:

  "teambit.dependencies/dependency-resolver": {
    "packageManager": "teambit.dependencies/yarn",
    "packageManagerArgs": [],
    "devFilePatterns": [
      "**/*.spec.ts"
    ],
    "strictPeerDependencies": true,
    "installFromBitDevRegistry": true
  },

I am then adding an override for one of my directories. It's a component that contains eslint configuration, so I only need the eslint deps. Here is what I did under teambit.workspace/variants:

"bits/dev-tools/eslint": {
      "teambit.harmony/node": {
        "teambit.dependencies/dependency-resolver": {
          "policy": {
            "dependencies": {
              "eslint-plugin-import": "2.23.4",
              "eslint-plugin-jest": "24.3.6",
              "eslint-plugin-react": "7.23.2",
              "eslint-plugin-react-hooks": "4.2.0",
              "eslint-plugin-sonarjs": "0.7.0",
              "eslint-plugin-testing-library": "4.6.0"
            },
            "peerDependencies": {
              "eslint": "7.27.0"
            }
          }
        }
      }
    }

When I build with that config, I am getting the following output of show:
dependencies,
dev dependencies
@babel/[email protected] (package)
@types/[email protected] (package)
@types/[email protected] (package)
peer dependencies

Is there some mode details documentation I can read? I believe I have followed the official docs on this