React项目遇SyntaxError: Unexpected token '<'错误，求助解决方案

数据老陈

2026-7-4

解决React+Storybook中SyntaxError: Unexpected token '<'的问题

这个错误通常是JSX语法未被正确转译导致的，以下是具体排查和解决步骤：

1. 检查文件扩展名

将组件和stories文件的扩展名从.js改为.jsx（如果用TypeScript则改为.tsx）。部分配置默认不会对.js文件转译JSX，修改后重启Storybook即可。

2. 验证Babel配置

在项目根目录的babel.config.js或.babelrc文件中，确认包含@babel/preset-react预设，示例配置：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

若没有该文件，直接创建并添加上述配置，之后重新安装依赖并启动Storybook。

3. 调整Storybook配置

在.storybook/main.js中，确保配置能正确识别stories文件并处理JSX，示例配置：

module.exports = {
  stories: ["../src/**/*.stories.jsx"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/react",
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(jsx|js)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"],
        },
      },
    });
    return config;
  },
};