如何修复Reactjs中SyntaxError: Unexpected token '.'报错

报错根因 #

• 你贴出的代码并不是webpack配置，是用于生成站点地图的Node.js执行脚本，该脚本执行时未经过webpack的loader处理链路
• 业务代码OfferList.jsx第6行引入了reactjs-popup的css文件，Node.js原生不支持解析css格式文件，会默认当做JavaScript代码执行，css代码首行的.符号不符合JS语法规则，直接抛出语法错误
• babel-register仅能处理JS/JSX语法转译，不具备css文件处理能力，无法兼容样式文件引入场景

修复方案 #

优先推荐方案1，改动最小生效最快：

1. 安装忽略样式文件的开发依赖：

npm install --save-dev ignore-styles

2. 修改站点地图生成脚本，在最顶部优先引入ignore-styles：

// 第一行先引入，放在babel-register之前
require('ignore-styles')

require("babel-register")({
    presets: ["es2015", "react"],
    // 可选补充：忽略node_modules目录的文件转译，提升执行速度
    ignore: [/node_modules/]
});
  
const router = require('./Routes').default;
const Sitemap = require('react-router-sitemap').default;
  
(
    new Sitemap(router)
        .build('https://mi-awesome-website.com')
        .save('./public/sitemap.xml')
);

如果不想额外安装依赖，可以选择方案2：

• 将业务代码中全局/组件内的样式引入，单独抽离到仅在客户端打包入口引入的文件中，生成sitemap的服务端执行链路不会加载到样式引入代码即可解决。

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