React application fails to compile when using a JS library

[ajwootto]

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?

[alexberriman]

+1

Was able to resolve for now by including a .babelrc file in my libraries:

{
  "presets": ["@babel/preset-typescript"]
}

[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?

[alexberriman]

You would hope dev/testing/building was consistent. When I get a bit of time to breath I'll dig into a bit and try and get a PR out.

In the meantime, I also had to swap out the default babel-jest transformer in jest.config.js for ts-jest as I was having a similar issue when running tests:

module.exports = {
  displayName: "my-app",
  preset: "../../../../jest.preset.js",
  transform: {
    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nrwl/react/plugins/jest",
    "^.+\\.[tj]sx?$": "ts-jest",
  },
  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
  coverageDirectory:
    "../../../../coverage/packages/my-app",
};

[ajwootto]

It sounds like this may resolve the buildLibsFromSource inconsistency
#9326

[ajwootto]

Fixed by #10055

[christopher-francisco]

For any newcomers to nx, you just need to re-generate your @nrwl/js:library, but this time, check the includeBabelRc option so that you get a babelrc for free

[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.