Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript Target Compiler Option is Silently Ignored #37271

Closed
1 task done
jasonboninger opened this issue May 28, 2022 · 6 comments · Fixed by #44567
Closed
1 task done

TypeScript Target Compiler Option is Silently Ignored #37271

jasonboninger opened this issue May 28, 2022 · 6 comments · Fixed by #44567
Labels
Developer Experience Issues related to Next.js logs, Error overlay, etc. good first issue Easy to fix issues, good for newcomers

Comments

@jasonboninger
Copy link

jasonboninger commented May 28, 2022

Verify canary release

  • I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 16.13.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.19
react: 18.1.0
react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next export

Describe the Bug

Changing the tsconfig.json -> compilerOptions -> target setting has no effect on static export builds and no error or warning occurs to indicate this.

This is my first time filing a bug report, so please let me know if I'm doing anything wrong or unhelpful!

Expected Behavior

Changing the TypeScript build target should be respected by the build engine like other TypeScript configuration settings, or an error or warning should indicate that the TypeScript target must always be a certain value.

To Reproduce

  • Create a new project: npx create-next-app@canary --typescript
  • Modify the build script in package.json to be next build && next export
    • Remove the Image import and Image tag from index.tsx because it will prevent static build from succeeding
  • Modify pages/_app.tsx with a trivial piece of functionality which uses an ES2022 feature
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { useEffect, useState } from 'react';

class Test {
  #forMeOnly = true;
  
  doSomething(): void {
    console.log("FOR ME ONLY", this.#forMeOnly);
  }
}

function MyApp({ Component, pageProps }: AppProps) {
  const [test] = useState(new Test());
  useEffect(() => test.doSomething());
  return <Component {...pageProps} />
}

export default MyApp
  • Modify compilerOptions -> target in tsconfig.json to be ES2022
  • Execute npm run build
  • Note that in the chunk exported for _app-<cache-bust>.js in out/_next/static/chunks/pages that the private field #forMeOnly is enforced using WeakMap and not using the native JavaScript feature from ES2022
  • Expected to see #forMeOnly (or a minified version) and no WeakMap
@jasonboninger jasonboninger added the bug Issue was opened via the bug report template. label May 28, 2022
@timneutkens
Copy link
Member

Feel free to open a PR to add a warning. tsc is not used to compile the code so these options don't have an effect on output, only a few options that people were using babelrc for are respected.

@balazsorban44 balazsorban44 added good first issue Easy to fix issues, good for newcomers Developer Experience Issues related to Next.js logs, Error overlay, etc. and removed bug Issue was opened via the bug report template. labels May 30, 2022
@jasonboninger
Copy link
Author

jasonboninger commented May 30, 2022

tsc is not used to compile the code so these options don't have an effect on output, only a few options that people were using babelrc for are respected.

Thanks for the quick reply! Is there another way to configure what JavaScript features the compiler considers as available? Perhaps the warning message could redirect people to that?

@balazsorban44
Copy link
Member

balazsorban44 commented May 31, 2022

We have an RFC to support Browserslist configuration: #33227

Experimental support was added in: #36584

@darshkpatel
Copy link
Contributor

darshkpatel commented Oct 20, 2022

Feel free to open a PR to add a warning. tsc is not used to compile the code so these options don't have an effect on output, only a few options that people were using babelrc for are respected.

Faced this issue recently. I agree that adding a warning would be a good idea for now.
What warning message should be added @timneutkens @balazsorban44 ?
Happy to raise a PR.

@mkayander
Copy link

Hi everyone! Please feel free to share any thoughts on the linked PR i just pushed. #43582

@kodiakhq kodiakhq bot closed this as completed in #44567 Jan 4, 2023
kodiakhq bot pushed a commit that referenced this issue Jan 4, 2023
There is [some confusion](https://twitter.com/samselikoff/status/1608840153963057152) over why `"target": "es5"` is in `tsconfig.json` and whether or not it should be changed.

The `target` property is not used by Next.js, so this PR removes it.

- Closes: #37271 
- Closes: #43582
@github-actions
Copy link
Contributor

github-actions bot commented Feb 4, 2023

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Developer Experience Issues related to Next.js logs, Error overlay, etc. good first issue Easy to fix issues, good for newcomers
Projects
None yet
5 participants