React application fails to compile when using a JS library

Current Behavior

A freshly generated react application in a brand new Nx repo will fail to compile when attempting to use a library from the same repo that was generated using the “@nrwl/js” package.

Expected Behavior

I would expect that a js package would work in any application. Library packages generated this way work fine in Node applications.

Steps to Reproduce

1. Generate a new Nx repo
2. Generate a new React application with Nx: nx g @nrwl/react:application react-app
3. Generate a new JS library with Nx: nx g @nrwl/js:library js-lib
4. Add some exported method with a type signature to the library
5. Import and use the method of the library in the React application
6. Run nx serve <react app>
7. Build fails because it’s trying to load TS files from the lib as plain JS (see Failure Logs section)

Failure Logs

Environment

$ nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : darwin x64
   yarn : 1.22.17

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

Edit: After comparing the differences between a lib generated with @nrwl/js and one generated with @nrwl/react, it seems the key difference is that the js one doesn’t include a .babelrc file. Is this intentional?

[ajwootto]

Fixed by https://github.com/nrwl/nx/pull/10055

[ajwootto]

Yeah, the problem is that the JS lib is set up to use “tsc” as its compiler and thus doesn’t include a babelrc, but React applications are compiled with babel and don’t know what to do with those files when the babelrc is missing. You can get a successful production build going by turning off the “buildLibsFromSource” option which will then cause the JS lib to be built separately using its own compiler, but that solution doesn’t help you in dev mode. When serving the React app with the dev server it tries to bundle the whole thing together and ignores the buildLibsFromSource option, so the babelrc is required for dev mode.

I think that’s also an interesting broader question as well, shouldn’t “buildLibsFromSource: false” also affect how running the application in dev mode works?