Cannot import @nrwl/js:lib into @nrwl/react:app

[joeflateau]

Current Behavior

I experience a compiler error when trying to run the app. It appears that the app compiler tries to parse lib's index.ts as javascript rather than typescript, likely a babel/webpack misconfiguration somewhere within the generated app?

Expected Behavior

I expect to be able to import the js:lib into the react:app.

Steps to Reproduce

https://github.com/joeflateau/react-ts-lib-repro

npx create-nx-workspace
npm i -D @nrwl/react
nx g @nrwl/react:app
nx g @nrwl/js:lib
# edit app.tsx: import lib and console.log it
npm run start

Failure Logs

ERROR in ../../libs/lib/src/lib/lib.ts
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
SyntaxError: /Users/joeflateau/Projects/react-ts-lib-repro/libs/lib/src/lib/lib.ts: Unexpected token, expected "{" (1:21)

> 1 | export function lib(): string {
    |                      ^
  2 |   return 'lib';
  3 | }
  4 |
    at Parser._raise (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:506:17)
    at Parser.raiseWithData (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:499:17)
    at Parser.raise (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:460:17)
    at Parser.unexpected (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:3699:16)
    at Parser.expect (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:3683:28)
    at Parser.parseBlock (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:14536:10)
    at Parser.parseFunctionBody (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:13269:24)
    at Parser.parseFunctionBodyAndFinish (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:13253:10)
    at /Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:14712:12
    at Parser.withSmartMixTopicForbiddingContext (/Users/joeflateau/Projects/react-ts-lib-repro/node_modules/@babel/parser/lib/index.js:13623:14)

Environment

Node : 16.13.0
OS : darwin arm64
npm : 8.1.4

nx : 13.7.1
@nrwl/angular : undefined
@nrwl/cli : 13.7.1
@nrwl/cypress : 13.7.1
@nrwl/detox : undefined
@nrwl/devkit : 13.7.1
@nrwl/eslint-plugin-nx : 13.7.1
@nrwl/express : undefined
@nrwl/jest : 13.7.1
@nrwl/js : 13.7.1
@nrwl/linter : 13.7.1
@nrwl/nest : undefined
@nrwl/next : undefined
@nrwl/node : undefined
@nrwl/nx-cloud : undefined
@nrwl/react : 13.7.1
@nrwl/react-native : undefined
@nrwl/schematics : undefined
@nrwl/storybook : 13.7.1
@nrwl/tao : 13.7.1
@nrwl/web : 13.7.1
@nrwl/workspace : 13.7.1
typescript : 4.5.5
rxjs : 6.6.7

[ziacik]

For a workaround and possible solution to the bug, see #8600 (comment)

This is actually what a @nrwl/node:lib has.

[joeflateau]

@ziacik thanks for that

[floroz]

@nrwl/js:library is compiled correctly from SWC application, example @nrwl/next:app but not from web applications or react application.

The .babelrc needs to be added to the @nrwl/js:library default generator

[floroz]

Further investigation of the issue

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.