React+TypeScript项目tsx文件<Container>报意外标记错误如何解决？

修复方案 #

1. 修正tsconfig的jsx配置
   将tsconfig.json中compilerOptions.jsx的值从react修改为preserve，保留JSX语法交给Next.js的Babel链路处理，避免TS提前转译导致解析冲突。

{
  "compilerOptions": {
    // 其他配置不变
    "jsx": "preserve"
  }
}

2. 补全缺失的DEFAULT_SEO配置
   当前定义的DEFAULT_SEO缺少代码中引用的openGraph字段，会引发后续运行时错误，同步补全：

const DEFAULT_SEO = {
  title: "Title",
  description: "description", 
  twitter: {
    handle: "@acom",
    cardType: "summary",
  },
  // 新增openGraph配置项，按业务需求修改对应值
  openGraph: {
    url: "你的站点正式地址",
    type: "website",
    title: "Title",
    description: "description",
    image: "默认OG图片地址",
    locale: "zh-CN"
  }
}

3. 修正webpack中tslint-loader的执行优先级
   在next.config.js的tslint-loader规则中新增enforce: "pre"配置，避免tslint-loader覆盖原有TS/JS转译逻辑：

cfg.module.rules.push({
  test: /\.[jt]sx?$/,
  use: [
    {
      loader: "tslint-loader",
      options: {
        isServer: false,
      },
    },
  ],
  exclude: /node_modules/,
  enforce: "pre"
})

4. 校验文件路径
   确认自定义App文件存放路径为项目根目录下的pages/_app.tsx，Next.js仅会识别pages目录下的_app.tsx作为全局应用配置，路径错误会导致JSX语法无法被正确解析。

生效步骤 #

执行以下命令清除缓存后重启服务即可：

rm -rf .next
npm run dev

调整前可先执行npm run type-check确认TypeScript语法层面无错误。

内容的提问来源于stack exchange，提问作者Maq