[Bug]: failed to transform Class fields with declare modifier in TypeScript

[TechQuery]

💻

• Would you like to work on a fix?

How are you using Babel?

Other (Next.js, Gatsby, vue-cli, ...)

Input code

const decorator = (Class: new () => any, {}: ClassDecoratorContext) =>
    class SubClass extends Class {
        accessor field: Record<string, any> = {};
    }

@decorator
export class Example {
    declare field: Record<string, any>;
}

Configuration file name

No response

Configuration

module.exports = {
  presets: [
    // https://babeljs.io/docs/babel-preset-typescript
    [
      '@babel/preset-typescript',
      {
        allowDeclareFields: true,
        allowNamespaces: true,
        allExtensions: true,
        isTSX: true,
      },
    ],
    // https://babeljs.io/docs/babel-preset-react
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: process.env.BABEL_ENV === 'development',
      },
    ],
  ],
  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
  plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]],
};

Current and expected behavior

Expect this error to be fixed:

SyntaxError: Fields with the 'declare' modifier cannot be initialized here, but only in the constructor 

Environment

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - C:\Program Files\nodejs\pnpm.CMD
  npmPackages:
    @babel/plugin-proposal-decorators: ^7.23.9 => 7.23.9
    @babel/preset-react: ^7.23.3 => 7.23.3
    @babel/preset-typescript: ^7.23.3 => 7.23.3
    eslint: ^8.56.0 => 8.56.0
    webpack: ^5.90.1 => 5.90.1

Possible solution

The throw logic needs node.value existed, but my code has no value initialization with declare...

babel/packages/babel-plugin-transform-typescript/src/index.ts

Lines 143 to 148 in f856fc2

	if (node.declare) {
	if (node.value) {
	throw path.buildCodeFrameError(
	`Fields with the 'declare' modifier cannot be initialized here, but only in the constructor`,
	);
	}

Additional context

Real world code:

1. https://github.com/kaiyuanshe/kaiyuanshe.github.io/pull/304/files#diff-c2eb41018a917dc350b32b5f8633d8f7cbf1737c32bb0a4b5bfe77cab13f2fa7
2. https://github.com/kaiyuanshe/OpenHackathon-Web/pull/210/files#diff-2e17f0d5a3cb9ec641b2b936b7aaab6ac68eabb4cbc21958508ed9698b1de871R65-L73

[babel-bot]

Hey @TechQuery! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

[liuxingbaoyu]

repl
I can't reproduce it in the repl, can you try?

[TechQuery]

Additional context

Real world code: https://github.com/kaiyuanshe/kaiyuanshe.github.io/pull/304/files#diff-c2eb41018a917dc350b32b5f8633d8f7cbf1737c32bb0a4b5bfe77cab13f2fa7

@liuxingbaoyu Try this history code, you will get the error.

[liuxingbaoyu]

repl

Unfortunately I still can't reproduce it.

[TechQuery]

repl

Unfortunately I still can't reproduce it.

You should use the old version:

[liuxingbaoyu]

Oops I made a mistake, but I still can't reproduce it.🤦‍♂️

repl

[TechQuery]

Oops I made a mistake, but I still can't reproduce it.🤦‍♂️

repl

But, Real World code has Real Quirk error: https://gitpod.io/?autostart=true#https://github.com/kaiyuanshe/kaiyuanshe.github.io/pull/304

[liuxingbaoyu]

PS F:\git\kaiyuanshe.github.io> npm i
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@kaiyuanshe%2fkys-service - Not found
npm ERR! 404 
npm ERR! 404  '@kaiyuanshe/kys-service@^0.7.0' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

I can't run it locally.

[TechQuery]

PS F:\git\kaiyuanshe.github.io> npm i
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@kaiyuanshe%2fkys-service - Not found
npm ERR! 404 
npm ERR! 404  '@kaiyuanshe/kys-service@^0.7.0' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

I can't run it locally.

It's so weird! My reproduce project works well: https://gitpod.io/?autostart=true#https://github.com/idea2app/Babel-decorator-bug

[liuxingbaoyu]

It works in gitpod, but I don't see the error.

gitpod /workspace/Babel-decorator-bug (main) $ pnpm run build

> @idea2app/[email protected] build /workspace/Babel-decorator-bug
> next build

   ▲ Next.js 14.1.0
   - Environments: .env


./pages/_document.tsx
10:9  Warning: Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts  @next/next/no-sync-scripts

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
   Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled
> [PWA] Compile server
> [PWA] Compile server
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: /workspace/Babel-decorator-bug/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-pwa/register.js
> [PWA] Service worker: /workspace/Babel-decorator-bug/public/sw.js
> [PWA]   url: /sw.js
> [PWA]   scope: /
   Using external babel configuration from /workspace/Babel-decorator-bug/babel.config.js
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (5/5) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization 

[TechQuery]

It works in gitpod, but I don't see the error.

Yes, look above, I have found this weird situation: every MVP works well, but my origin project failed with Babel error...

[liuxingbaoyu]

Please try removing node_modules and *.lock.

[TechQuery]

Please try removing node_modules and *.lock.

Same error after running:

rm -rf node_modules/ pnpm-lock.yaml
pnpm i
pnpm build

[TechQuery]

Additional context

Real world code: https://github.com/kaiyuanshe/kaiyuanshe.github.io/pull/304/files#diff-c2eb41018a917dc350b32b5f8633d8f7cbf1737c32bb0a4b5bfe77cab13f2fa7

@liuxingbaoyu Try this history code, you will get the error.

@liuxingbaoyu I upgrade another project built with the same upstream scaffold, then the same error thrown:
https://github.com/kaiyuanshe/OpenHackathon-Web/pull/210/files#diff-2e17f0d5a3cb9ec641b2b936b7aaab6ac68eabb4cbc21958508ed9698b1de871R65-L73

but, another declare code in a MobX class of the same project throws no error:
https://github.com/kaiyuanshe/OpenHackathon-Web/pull/210/files#diff-3eb0f311b70ca6c8d2fc263ee21064d3f8772754bb61272d5d935b5fbd0bf315R49

[liuxingbaoyu]

Now that I can reproduce it I'll take a look.

[liuxingbaoyu]

This is a plugin order issue and as a temporary solution you can use a configuration like this.

module.exports = {
  presets: [
    // https://babeljs.io/docs/babel-preset-react
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: process.env.BABEL_ENV === 'development',
      },
    ],
  ],
  // https://babeljs.io/docs/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-transform-class-properties
  plugins: [
    [
      '@babel/plugin-transform-typescript',
      {
        allowDeclareFields: true,
        allowNamespaces: true,
        allExtensions: true,
        isTSX: true,
      },
    ],
    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
  ],
};