nx build says Module not found: Error: Can't resolve '@example/ui-comp1'

Current Behavior

nx build when used with a @nrwl/react:application consuming a @nrwl/react:lib errors out

Expected Behavior

Expecting 0 error

Steps to Reproduce

The following steps were taken to set up a new workspace -

• First run the following commands to set up the workspace

  npm i -g nx@9.3.0
  yarn create nx-workspace --name=example --preset=empty --cli=nx
  cd example
  yarn add -D @nrwl/react
  nx g @nrwl/react:application --name=example-app --style=none --routing=false
  nx g @nrwl/react:lib --name=ui-comp1 --publishable
  

• Next edit apps\example-app\src\app\app.tsx file per this diff -

  import React from 'react';
  
  import { ReactComponent as Logo } from './logo.svg';
  import star from './star.svg';
  + import { UiComp1 } from "@example/ui-comp1";
  
  export const App = () => {
    /*
      * Replace the elements below with your own.
      */
    return (
      <div>
  +      <UiComp1 />
        <header className="flex">
          <Logo width="75" height="75" />
          <h1>Welcome to example-app!</h1>
        </header>
        ...
    )
  }
  

Git repo - https://github.com/sushruth/nx-issue-repro

Failure Logs

Starting type checking service...
Using 6 workers with 2048MB memory limit
Hash: a8586d4c8e9e268e229e
Built at: 06/07/2020 12:56:35 PM
Entrypoint main = runtime.js runtime.js.map vendor.js vendor.js.map main.js main.js.map
Entrypoint polyfills = runtime.js runtime.js.map polyfills.js polyfills.js.map
chunk {main} main.js, main.js.map (main) 14.8 KiB ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 239 KiB ={runtime}= [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={vendor}= [entry] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 1.04 MiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

ERROR in ./app/app.tsx
Module not found: Error: Can't resolve '@example/ui-comp1' in 'C:\Users\susastry\source\projects\example\apps\example-app\src\app'

Environment

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : Not Found
  @nrwl/cli : 9.3.0
  @nrwl/cypress : 9.3.0
  @nrwl/eslint-plugin-nx : 9.3.0
  @nrwl/express : Not Found
  @nrwl/jest : 9.3.0
  @nrwl/linter : 9.3.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 9.3.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.3.0
  @nrwl/web : 9.3.0
  @nrwl/workspace : 9.3.0
  typescript : 3.8.3

[antoniojps]

I ended up with a similiar error. However my problem was unrelated, leaving the solution here since it might help someone else.

In my case I had to explicitly say the full path of an external dependency.

I was getting the following error Error during bundle: Error: 'useRouter' is not exported by node_modules/next/router.js.

Since useRouter is imported from next/router instead of only next I had to explicitly add the full import path to the external dependencies array as such in the build options.

"external": [
  "next",
  "next/router",
],

[Gbuomprisco]

I have encountered the same issue, also solved by adding ‘–buildLibsFromSource’ to my build commands