[SOLVED] NX Can't import local Typescript library

NX Can't import local Typescript library

I'm trying to follow the "NX and Typescript" doc. I have run the following (with Node 16.16.6 and NX 14.5.8):

npx create-nx-workspace happynrwl --preset=ts
cd happynrwl
npm install @nrwl/web
nx generate @nrwl/js:library --name=hello-tsc --buildable
nx generate @nrwl/web:app demoapp

From here, I'm able to serve the web app with nx serve demoapp and it works fine. However when I try to import from the local hello-tsc library, I get this error:

ERROR in ../hello-tsc/src/lib/hello-tsc.ts
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
SyntaxError: /Users/james/projects/happynrwl/packages/hello-tsc/src/lib/hello-tsc.ts: Unexpected token, expected "{" (1:26)

> 1 | export function helloTsc(): string {
    |                           ^
  2 |   return 'hello-tsc';
  3 | }
  4 |
    at instantiate (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:366:12)
    at Parser.raise (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:3453:19)
    at Parser.unexpected (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:3491:16)
    at Parser.expect (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:4128:28)
    at Parser.parseBlock (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:15389:10)
    at Parser.parseFunctionBody (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:14085:24)
    at Parser.parseFunctionBodyAndFinish (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:14069:10)
    at /Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:15570:12
    at Parser.withSmartMixTopicForbiddingContext (/Users/james/projects/happynrwl/node_modules/@babel/parser/lib/index.js:14457:14)

webpack compiled with 1 error (b022fd9df31b7e7f)

This error seems to mean the web app is trying to import TS but expects it to be JS. Why is this happening? How can I fix it?

All of the details are available in the repo here: https://github.com/jmeyers91/nx-hello-world

Solution

Fixed by adding "presets": ["@nrwl/web/babel"] to the root babel.config.json file.

See: https://github.com/nrwl/nx/issues/10819#issuecomment-1178404861

{
  "presets": ["@nrwl/web/babel"],
  "babelrcRoots": ["*"]
}