@nrwl/web: Rollup executor forces code output to be ES5

[layershifter]

Intro

I am using @nrwl/web executor:

{
  "targets": {
    "build": {
      "executor": "@nrwl/web:rollup",
      "options": {
        "compiler": "babel",
        "format": ["umd"]
      }
    }
  }
}

In my TS configs I am targeting ES2019:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext"
  }
}

Current Behavior

UMD and CommonJS outputs are forced to use target: "es5" by this line:

nx/packages/web/src/executors/rollup/rollup.impl.ts

Lines 312 to 313 in 5afd3d6

	...compilerOptions,
	target: 'es5',

The following code is compiled:

function borderLeft(...values: any[]): any {
  return {
    borderLeftWidth: values[0],
    ...(values[1] && { borderLeftStyle: values[1] }),
    ...(values[2] && { borderLeftColor: values[2] }),
  };
}

⬇️⬇️⬇️

That matches ES5 output 🙃

• TypeScript playground with target: es5
• TypeScript playground with target: es2019

Expected Behavior

I went through existing/closed issues (#3601, #4115) and fixes for them kept that line without changes.

As target: es2019 supports all features for that snippet I expect will not apply any transforms (as in playground):

Proposal

I think that it's reasonable to remove that line at all and respect user's configuration.

Steps to Reproduce

Manual steps

• npx create-nx-workspace --preset=react
• nx g @nrwl/react:library --publishable --importPath=test
• put a function into to libs/test/src/lib/test.tsx
• yarn nx run test:build
• check dist/libs/test/index.umd.js

Ready to go

• https://stackblitz.com/edit/github-kgn16z or clone https://github.com/layershifter/nx-issue-target-es5
• npm install
• nx run test:build
• check dist/libs/test/index.umd.js

Environment

  Node : 16.13.1
  OS   : darwin arm64
  npm  : 8.1.2
  
  nx : 13.4.6
  @nrwl/angular : undefined
  @nrwl/cli : 13.4.6
  @nrwl/cypress : 13.4.6
  @nrwl/devkit : 13.4.6
  @nrwl/eslint-plugin-nx : 13.4.6
  @nrwl/express : undefined
  @nrwl/jest : 13.4.6
  @nrwl/linter : 13.4.6
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : 13.4.6
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.4.6
  @nrwl/web : 13.4.6
  @nrwl/workspace : 13.4.6
  @nrwl/storybook : 13.4.6
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.7
  ---------------------------------------
  Community plugins:

[ndcunningham]

Hey, when you create a library the default format is both UMD and ESM.

Based on your description you want the output to be ESM.

To achieve this you can:

1. Add the ESM format to the format property of your library's project.json (for example: target: ['umd', 'esm'])
2. When creating a library add the --buildable flag nx g @nrwl/react:library --publishable --buildable --importPath=test

After you build the library check the dist/libs/[lib-name]/**.esm.js

[layershifter]

@ndcunningham Sorry, but I have a different issue 🙂

I can configure format and get umd & cjs outputs, this works ✅
The problem is that these outputs will always use es5 as target in TypeScript config and will ignore user's settings (i.e. there is no way to specify target: es2019 for these outputs).

Please check "Current Behavior" behavior section and "Steps to Reproduce".

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