umi3 upgrade to umi4, got ' please check this file esm format'

[SagittariusZhu]

I want upgrade the project https://github.com/zuiidea/antd-admin from umi3 to umi4, but got some errors like:

Parse file /home/zhu/work/antd-admin/src/pages/dashboard/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/user/[id]/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/user/[id]/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/request/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/request/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/editor/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/editor/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/login/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/login/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/post/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/post/index.js exports error, please check this file esm format.
error - parse /home/zhu/work/antd-admin/src/pages/user/index.js failed
Parse file /home/zhu/work/antd-admin/src/pages/user/index.js exports error, please check this file esm format.

Here is my config.js:

import { defineConfig } from '@umijs/max'
import { resolve } from 'path'
const fs = require('fs')
const path = require('path')
const lessToJs = require('less-vars-to-js')

const { theme } = require('antd/lib')
const { convertLegacyToken } = require('@ant-design/compatible/lib')

const mapToken = theme.defaultAlgorithm(theme.defaultSeed)
const v4Token = convertLegacyToken(mapToken)

export default defineConfig({
  alias: {
    api: resolve(__dirname, '../src/services/'),
    components: resolve(__dirname, '../src/components'),
    config: resolve(__dirname, '../src/utils/config'),
    themes: resolve(__dirname, '../src/themes'),
    utils: resolve(__dirname, '../src/utils'),
  },
  antd: false,
  model: {},
  initialState: {},
  dva: {},
  title: 'umijs',
  // layout: {
  //   // https://umijs.org/docs/max/layout-menu#构建时配置
  //   title: 'UmiJS',
  //   locale: true,
  // },
  // https://umijs.org/zh-CN/plugins/plugin-locale
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  // a lower cost way to genereate sourcemap, default is cheap-module-source-map, could save 60% time in dev hotload
  devtool: 'cheap-module-source-map',
  //================ pro 插件配置 =================
  presets: ['umi-presets-pro'],
  hash: true,
  ignoreMomentLocale: true,
  // Webpack Configuration
  proxy: {
    '/api/v1/weather': {
      target: 'https://api.seniverse.com/',
      changeOrigin: true,
      pathRewrite: { '^/api/v1/weather': '/v3/weather' },
    },
  },
  // Theme for antd
  // https://ant.design/docs/react/customize-theme
  theme: {
    ...v4Token,
    ...lessToJs(
    fs.readFileSync(path.join(__dirname, '../src/themes/default.less'), 'utf8')
    )
  },
  mfsu: {},
});

[SagittariusZhu]

I found the reason is use @connect, such as

import React, { PureComponent } from 'react'
import { connect } from 'umi'

@connect(({ app, post, loading }) => ({ app, post, loading }))
class Post extends PureComponent {
    render() {
        return (
            <div />
        )
    }
}

export default Post

But I still don't know how to solve it.

[fz6m]

在 umi 4 中，使用 jsx 语法的文件必须以 .jsx / .tsx 结尾，不使用 jsx 节点的文件可以使用 .js / .ts 结尾。

[SagittariusZhu]

是的，我修改了文件名，没有用@connect的模块改了文件名就OK了，但用了@connect的改了文件名还是一样报错。

[pittleCheung]

yes,your are right, think you

[SagittariusZhu]

我查了一下源码，应该是这个转换的问题，是不是我没有配置正确的loader？

// packages/bundler-utils/src/index.ts
  if (opts.path.endsWith('.tsx') || opts.path.endsWith('.jsx')) {
    try {
      content = transformSync(content, {
        loader: extname(opts.path).slice(1) as Loader,
        format: 'esm',
      }).code;
    } catch (e) {
      // @ts-ignore
      prettyPrintEsBuildErrors(e.errors, opts);
      logger.error(`transform ${opts.path} failed`);
      throw e;
    }
  }

[SagittariusZhu]

同样的文件，我注释了@connect这一行就不报错了

[fz6m]

给一个最小复现看看吧。

[SagittariusZhu]

https://github.com/SagittariusZhu/umi4-esm-error-demo

[SagittariusZhu]

$ max setup
error - transform /home/zhu/demo/umi4-esm-error-demo/src/pages/index.jsx failed
Parse file /home/zhu/demo/umi4-esm-error-demo/src/pages/index.jsx exports error, please check this file esm format.

[fz6m]

计划在 #11668 中修复。

[SagittariusZhu]

居然是jsx的原因，而且现在才发现，看来大家已经很久不用js了:(
/