feat(js): add `--includeBabelRc` flag for @nrwl/js:library generator (#8793, #8600) #10055

floroz · 2022-04-29T08:13:46Z

Current Behavior

When generating a new TypeScript library using @nrwl/js:library and not using swc, a .babelrc configuration is not generated by default.

This behaviour conflicts when importing such libraries within application that require the compilation step to have occurred, throwing errors for unsupported syntax (TS syntax when expecting JS).

Expected Behavior

With this PR, the new --includeBabelRc flag is introduced when using the @nrwl/js:library generator.

If you selectswc as compiler, this flag won't affect the output.
if you enable the flag, it will create a .babelrc
if you disable the flag, it will prevent creating a .babelrc
if you don't pass any value, the generator will check whether you have @nrwl/web installed, and if so, automatically generates a .babelrc for your new library

Related Issue(s)

Fixes #8600
Fixes #8793

ISSUES CLOSED: nrwl#8600, nrwl#8793 ISSUES CLOSED: nrwl#8600, nrwl#8793

nx-cloud · 2022-04-29T08:13:48Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 63dfa8b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

✅ Successfully ran 13 targets

Sent with 💌 from NxCloud.

vercel · 2022-04-29T08:13:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nx-dev	✅ Ready (Inspect)	Visit Preview	May 4, 2022 at 3:30PM (UTC)

floroz · 2022-04-29T13:17:04Z

E2E seems to have passed correctly: https://app.circleci.com/pipelines/github/nrwl/nx/17064/workflows/ee98bcea-88f3-4640-90cc-7220d6f1eb80/jobs/168611

However there is a timeout in the main-macos-e2e: https://app.circleci.com/pipelines/github/nrwl/nx/17064/workflows/ee98bcea-88f3-4640-90cc-7220d6f1eb80/jobs/168606

It seems I don't have permission to re-run the pipeline, so will wait for some input about my PR before pushing a reset commit :)

nartc · 2022-04-30T05:52:20Z

@floroz Thank you for your contribution. I'm wondering if this is more suitable under a flag in the generator schema instead of making it the default. If I was just building a CLI with different buildable js libs, I wouldn't need .babelrc file in every js lib would I?

floroz · 2022-04-30T08:26:02Z

@floroz Thank you for your contribution. I'm wondering if this is more suitable under a flag in the generator schema instead of making it the default. If I was just building a CLI with different buildable js libs, I wouldn't need .babelrc file in every js lib would I?

Hey @nartc thanks for your feedback!

I guess having the option for a flag would make sense, however, I would argue that the flag should only be used to disable the creation of the .babelrc.

It is a far more common use case to create an NX library within a workspace for consumption within other web-apps, and I feel having to ask developers to remember to add a flag, without which they would not be able to bundle their app, could still create friction.

--skipBabelConfig would be my suggestion, what do you think?

…neration ISSUES CLOSED: nrwl#8600, nrwl#8793 ISSUES CLOSED: nrwl#8600, nrwl#8793

nartc

Just one quick question

packages/js/src/generators/library/library.ts

nartc

LGTM

Edit: I dismissed the review as I think we can make it a little less awkward for people who don't use/care about babel (web)

Maybe there's a better way

nartc

guard the PR from being merged prematurely

floroz · 2022-05-03T06:58:40Z

I wanted to take some time to investigate the issue a bit more in-depth, before jumping to another implementation.

Setup

I have created this repository to reproduce the issue.

The repo contains 5 NX workspaces (using the latest NX package version) and each of them contains an application, and a js:library called my-lib.

Each application has been generated through its corresponding NX CLI (@nrwl/angular, @nrwl/next, etc).

my-lib is generated without any .babelrc configuration.

Testing the compilation of each application

App	compiles `my-lib`
Node	✅
Express	✅
Next.js (Babel compiler)	✅
Angular	✅
React	⛔

For the React application, we encounter the error highlighted in the open issues:

ERROR in ../../libs/my-lib/src/lib/my-lib.ts
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
SyntaxError: /Users/danieletortora/Repository/nrwl-js-babel-config/react/libs/my-lib/src/lib/my-lib.ts: Missing semicolon. (1:4)
> 1 | type Custom = void;
    |     ^
  2 |
  3 | export function myLib(): Custom {
  4 |   console.log('my-lib hello world');
    at instantiate (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:3335:19)
    at Parser.semicolon (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:3996:10)
    at Parser.parseExpressionStatement (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:15134:10)
    at Parser.parseStatementContent (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:14681:19)
    at Parser.parseStatement (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:14533:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:15176:25)
    at Parser.parseBlockBody (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:15167:10)
    at Parser.parseProgram (/Users/danieletortora/Repository/nrwl-js-babel-config/react/node_modules/@babel/parser/lib/index.js:14451:10)

Conclusion

It's interesting to notice that

@nrwl/web is not installed in most projects where my-lib is compiled successfully
my-lib compiles in Next.js apps without any .babelrc

@nartc it's starting to look like the issue is within the @nrwl/web webpack setup.

What do you think?
Before I get into the webpack rabbit hole, I'd like to do a sanity check to make sure I am not off-track here

nartc · 2022-05-04T04:15:49Z

Thanks for digging in @floroz. Out of all 5 cases you're testing, only react one uses @nrwl/web/babel. nextjs uses next/babel (from next itself) and that seems to handle typesript in libraries correctly.

nrwl/web/babel fails to transpile type Custom because my-lib doesn't have babelrc and it does not go through the transpilation of babel hence the type makes it the final bundle which fails.

That said, I think checking for nrwl/web in package.json is a sensible solution. You can go ahead and proceed with the fix. Let me know if you have more questions

packages/js/src/generators/library/library.ts

nartc · 2022-05-04T14:22:47Z

packages/js/src/generators/library/library.ts

+ * You can find more details on why this is necessary here:
+ * https://github.com/nrwl/nx/pull/10055
+ */
+function shouldAddBabelRc(tree: Tree, options: NormalizedSchema) {


question: what if I have nrwl/web installed and I want to generate a nrwl/js:lib BUT I do not want to have .babelrc generated by explicitly use --includeBabelRc=false?

Thinking of a monorepo with both web and an api

@nartc good point, I just pushed a refactor and added unit tests to cover that scenario, so that now we correctly handle

user explicitly setting the flag to true

user explicitly setting the flag to false

user not setting the flag

You can just remove the default in the schema and it will come through as undefined (as long as the flag isn't in the required array in the schema)

docs/generated/packages/js.json

nartc

LGTM! Thank you for your contribution

adds the --includeBabelRc flag to the library generator, and a mechanism to automatically detect the nrwl/web plugin, which requires auto-generation of the babelrc even when not explicitly set by the user ISSUES CLOSED: nrwl#8600, nrwl#8793

floroz · 2022-05-04T15:24:41Z

LGTM! Thank you for your contribution

forgot a typo in a test name and did quick amend 😄

github-actions · 2023-03-18T17:05:25Z

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

fix(js): fix(js): adding missing babelrc for tsc compiled libraries

5c5eb4d

ISSUES CLOSED: nrwl#8600, nrwl#8793 ISSUES CLOSED: nrwl#8600, nrwl#8793

FrozenPandaz assigned nartc Apr 29, 2022

feat(js): adds the --skipBabelConfig flag to prevent .babelrc file ge…

74032d5

…neration ISSUES CLOSED: nrwl#8600, nrwl#8793 ISSUES CLOSED: nrwl#8600, nrwl#8793

vercel bot deployed to Preview April 30, 2022 09:01 View deployment

nartc reviewed May 2, 2022

View reviewed changes

packages/js/src/generators/library/library.ts Show resolved Hide resolved

nartc previously approved these changes May 2, 2022

View reviewed changes

nartc requested changes May 2, 2022

View reviewed changes

floroz mentioned this pull request May 3, 2022

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

Closed

floroz changed the title ~~fix(js): add missing .babelrc for @nrwl/js:library generator (#8793, #8600)~~ feat(js): add --includeBabelRc flag for @nrwl/js:library generator (#8793, #8600) May 4, 2022

floroz force-pushed the master branch from f73d88e to f81a79f Compare May 4, 2022 10:48

floroz commented May 4, 2022

View reviewed changes

packages/js/src/generators/library/library.ts Show resolved Hide resolved

vercel bot deployed to Preview May 4, 2022 10:55 View deployment

nartc reviewed May 4, 2022

View reviewed changes

floroz force-pushed the master branch from f81a79f to f693b73 Compare May 4, 2022 15:11

vercel bot deployed to Preview May 4, 2022 15:16 View deployment

floroz force-pushed the master branch from f693b73 to 29a6bf5 Compare May 4, 2022 15:17

floroz commented May 4, 2022

View reviewed changes

docs/generated/packages/js.json Show resolved Hide resolved

nartc approved these changes May 4, 2022

View reviewed changes

vercel bot deployed to Preview May 4, 2022 15:23 View deployment

floroz force-pushed the master branch from 29a6bf5 to 63dfa8b Compare May 4, 2022 15:23

vercel bot deployed to Preview May 4, 2022 15:30 View deployment

nartc merged commit 664df0e into nrwl:master May 4, 2022

ajwootto mentioned this pull request May 16, 2022

React application fails to compile when using a JS library #9275

Closed

github-actions bot locked as resolved and limited conversation to collaborators Mar 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(js): add `--includeBabelRc` flag for @nrwl/js:library generator (#8793, #8600) #10055

feat(js): add `--includeBabelRc` flag for @nrwl/js:library generator (#8793, #8600) #10055

floroz commented Apr 29, 2022 •

edited

nx-cloud bot commented Apr 29, 2022 •

edited

vercel bot commented Apr 29, 2022 •

edited

floroz commented Apr 29, 2022

nartc commented Apr 30, 2022

floroz commented Apr 30, 2022

nartc left a comment

nartc left a comment •

edited

nartc left a comment

floroz commented May 3, 2022 •

edited

nartc commented May 4, 2022

nartc May 4, 2022

floroz May 4, 2022 •

edited

nartc May 4, 2022

nartc left a comment

floroz commented May 4, 2022

github-actions bot commented Mar 18, 2023

feat(js): add --includeBabelRc flag for @nrwl/js:library generator (#8793, #8600) #10055

feat(js): add --includeBabelRc flag for @nrwl/js:library generator (#8793, #8600) #10055

Conversation

floroz commented Apr 29, 2022 • edited

Current Behavior

Expected Behavior

Related Issue(s)

nx-cloud bot commented Apr 29, 2022 • edited

☁️ Nx Cloud Report

vercel bot commented Apr 29, 2022 • edited

floroz commented Apr 29, 2022

nartc commented Apr 30, 2022

floroz commented Apr 30, 2022

nartc left a comment

Choose a reason for hiding this comment

nartc left a comment • edited

Choose a reason for hiding this comment

nartc left a comment

Choose a reason for hiding this comment

floroz commented May 3, 2022 • edited

Setup

Testing the compilation of each application

Conclusion

nartc commented May 4, 2022

nartc May 4, 2022

Choose a reason for hiding this comment

floroz May 4, 2022 • edited

Choose a reason for hiding this comment

nartc May 4, 2022

Choose a reason for hiding this comment

nartc left a comment

Choose a reason for hiding this comment

floroz commented May 4, 2022

github-actions bot commented Mar 18, 2023

feat(js): add `--includeBabelRc` flag for @nrwl/js:library generator (#8793, #8600) #10055

feat(js): add `--includeBabelRc` flag for @nrwl/js:library generator (#8793, #8600) #10055

floroz commented Apr 29, 2022 •

edited

nx-cloud bot commented Apr 29, 2022 •

edited

vercel bot commented Apr 29, 2022 •

edited

nartc left a comment •

edited

floroz commented May 3, 2022 •

edited

floroz May 4, 2022 •

edited