panic: interface conversion: js_ast.E is *js_ast.EIdentifier, not *js_ast.EString

[OleksandrKucherenko]

I got an error with esbuild: 0.15.15

✘ [ERROR] panic: interface conversion: js_ast.E is *js_ast.EIdentifier, not *js_ast.EString (while printing "src/hoc/withFeatureProp.tsx")

  debug.Stack (runtime/debug/stack.go:24)
  helpers.PrettyPrintedStack (internal/helpers/stack.go:9)
  bundler.(*linkerContext).recoverInternalError (internal/bundler/linker.go:6098)
  panic (runtime/panic.go:884)
  js_printer.(*printer).printExpr (internal/js_printer/js_printer.go:1616)
  js_printer.(*printer).printExpr (internal/js_printer/js_printer.go:2079)

Content of the file: withFeatureProp.tsx:

import { FeatureKey, useFeature } from 'hooks/useFeatureToggle'
import { wrapDisplayName } from 'recompose'

export function withFeatureProp<K extends string>(feature: FeatureKey, propKey: K) {
  return function <T>(BaseComponent: React.FC<T>) {
    const WithFeature = (props: Omit<T, K>) => {
      const show = useFeature(feature)

      return show !== undefined ? (
        <BaseComponent {...(props as T)} {...{ [propKey]: show }} />
      ) : null
    }

    WithFeature.displayName = wrapDisplayName(BaseComponent, 'WithFeatureProp')

    return WithFeature
  }
}

Background info:

• migrating from webpack 4 to esbuild
• typescript 4.5.5 / webpack 4 / react-app - passing build without any issue

esbuild.js, which I execute as yarn ts-node esbuild.ts:

import esbuild, { BuildOptions } from 'esbuild'
import { sassPlugin } from 'esbuild-sass-plugin'
import cssModulesPlugin from 'esbuild-css-modules-plugin'

import postcss from 'postcss'
import autoprefixer from 'autoprefixer'
import postcssPresetEnv from 'postcss-preset-env'

const isWatch = process.argv.includes('--watch')

const buildOptions: BuildOptions = {
  color: true,
  entryPoints: ['src/index.tsx'],
  loader: {
    '.ts': 'ts',
    '.json': 'json',
    '.png': 'file',
    '.jpeg': 'file',
    '.jpg': 'file',
    '.svg': 'file',
  },
  assetNames: 'assets/[name]-[hash]',
  outdir: 'build',
  minify: !isWatch,
  format: 'cjs',
  bundle: true,
  sourcemap: isWatch,
  platform: 'browser',
  logLevel: 'debug',
  incremental: isWatch,
  plugins: [
    cssModulesPlugin(),
    sassPlugin({
      async transform(source) {
        const { css } = await postcss([autoprefixer, postcssPresetEnv({ stage: 0 })]).process(
          source,
          {
            from: undefined,
          }
        )
        return css
      },
    }),
    {
      name: 'resolve-assets',
      setup(build) {
        build.onResolve({ filter: /.scss$/ }, ({ path, resolveDir, importer, namespace }) => {
          // console.log('resolve:', path, resolveDir, importer, namespace)
          return null
        })
      },
    },
  ],
}

esbuild
  .build(buildOptions)
  .then(() => {
    console.log('Build finished')
  })
  .catch(() => {
    console.log('Build failed')
  })

  Binaries:
    Node: 16.14.0 - /var/folders/xt/1n5g37v56tbfgx2_8sjcdct40000gp/T/yarn--1669204738883-0.4477197173066372/node
    Yarn: 1.22.10 - /var/folders/xt/1n5g37v56tbfgx2_8sjcdct40000gp/T/yarn--1669204738883-0.4477197173066372/yarn
    npm: 8.3.1 - ~/.volta/tools/image/node/16.14.0/bin/npm
    Watchman: 2022.10.31.00 - /usr/local/bin/watchman

[evanw]

Thanks for the report. I can reproduce the issue. The specific problem is using --minify with --jsx=preserve with input that looks like <Foo {...{ [a]: b }} />. Normally esbuild's minifier turns {...{ [a]: b }} into { [a]: b } but the code that prints JSX elements back out expects properties to be strings, since they always are strings outside of this one edge case. I'll fix this.