Bit cannot find module

[rap0so]

Describe the bug

I'm receiving error on tag an component containing @fortawesome

Steps to Reproduce

1. Create/edit an component by adding a @fortawesome dependency, like this:

   import { faUsers as iconGroup } from '@fortawesome/free-solid-svg-icons';
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

2. Then use it: <FontAwesomeIcon={iconGroup} />
3. Run bit tag [your-component]
4. It will return an error 😞

Expected Behavior

Bit tag my component and let it ready to export 👀

Screenshots, exceptions and logs

In my opinion all errors is caused by the first one:

start of error msg:

end of error msg:

Specifications

• Bit version: 14.7.4
• Node version: v10.16.3
• npm / yarn version: 1.21.1
• Platform: Windows 10 Pro
• Compiler / Tester (include version): "compiler": "bit.envs/compilers/typescript@3.1.39", "tester": "bit.envs/testers/jest@22.4.3"

Additional context

I updated the compiler version but it keeps returning an error ❌

[itaymendel]

What's the output of bit show <component> for the failing component?

[rap0so]

What's the output of bit show <component> for the failing component?

[itaymendel]

I tried reproducing the issue, and I think I was successful is it. When I installed the @fortawesome/free-solid-svg-icons package, it asked me to add a peer dependency @fortawesome/fontawesome-svg-core. I don't see this peerdep configured for the component.

There's a reference here that shows how to do just that - https://docs.bit.dev/docs/overrides#components-dependencies

edit

I think this requires some additional explanation. Bit builds and tests each component in an isolated environment. When this environment is created, Bit installs all dependencies and components in it, and only then runs the build. So in this case, it seems that there was a peerdependency missing for the step to complete.

[rap0so]

I tried reproducing the issue, and I think I was successful is it. When I installed the @fortawesome/free-solid-svg-icons package, it asked me to add a peer dependency @fortawesome/fontawesome-svg-core. I don't see this peerdep configured for the component.

There's a reference here that shows how to do just that - https://docs.bit.dev/docs/overrides#components-dependencies

edit

I think this requires some additional explanation. Bit builds and tests each component in an isolated environment. When this environment is created, Bit installs all dependencies and components in it, and only then runs the build. So in this case, it seems that there was a peerdependency missing for the step to complete.

Cool! can you please explain it? like i'm 5 I'm really stuck here, step-by-step if u can

[itaymendel]

Haha no worries :)

Bit defines each component's dependencies using static code analysis, meaning it reads the contents of the tracked files of each component, and logs all import and require statements. It then decides which of them is a peerDependencies, dependencies or a devDependencies according to this flow:

You can read more about it here.

When a package has a pee-dependency, and that peer-dependency is not explicitly imported in your component's source code, it's impossible for Bit to detect and add it. So what you need to do it to manually add that package to the component's peerDependencies using overrides.

In your case, the package @fortawesome/free-solid-svg-icons package requires a peer dependency to be present in order to work.. To see it, create a new project, run npm init -y and then npm i @fortawesome/free-solid-svg-icons and see that it is missing the peer dependency @fortawesome/fontawesome-svg-core.

Do add a peer-dependency to a Bit component, we use the overrides configuration. To do so, open your package.json file, and in the bit object add this entry:

{
    "overrides" : {
        "avatar": {
            "peerDependencies" : {
                "@fortawesome/fontawesome-svg-core": "+"
            }
        }
    }
}

[rap0so]

Haha no worries :)

Bit defines each component's dependencies using static code analysis, meaning it reads the contents of the tracked files of each component, and logs all import and require statements. It then decides which of them is a peerDependencies, dependencies or a devDependencies according to this flow:

You can read more about it here.

When a package has a pee-dependency, and that peer-dependency is not explicitly imported in your component's source code, it's impossible for Bit to detect and add it. So what you need to do it to manually add that package to the component's peerDependencies using overrides.

In your case, the package @fortawesome/free-solid-svg-icons package requires a peer dependency to be present in order to work.. To see it, create a new project, run npm init -y and then npm i @fortawesome/free-solid-svg-icons and see that it is missing the peer dependency @fortawesome/fontawesome-svg-core.

Do add a peer-dependency to a Bit component, we use the overrides configuration. To do so, open your package.json file, and in the bit object add this entry:

{
    "overrides" : {
        "avatar": {
            "peerDependencies" : {
                "@fortawesome/fontawesome-svg-core": "+"
            }
        }
    }
}

Hmmmm... i wrote it on package.json of avatar cmp:

  "bit": {
    "overrides": {
      "*": {
        "env": {
          "compiler": "bit.envs/compilers/typescript@3.1.39"
        },
        "peerDependencies": {
          "@fortawesome/fontawesome-svg-core": "+"
        }
      }
    }
  }

Did i do something wrong?

[itaymendel]

what's the output of bit show <component> now?