反应意外的令牌 <

Posted 2023-02-22

【中文标题】反应意外的令牌 <

【英文标题】：React Unexpected Token <

【发布时间】：2016-12-28 16:26:50

【问题描述】：

我正在使用我自己的自定义 webpack 构建来处理 react router tutorial，我收到“意外令牌 transpiler being incorrectly specified。但是，这里不是这种情况。我的转译器在开发构建期间按指定工作，但在生产构建的相同设置下失败。我不知道为什么。

我的 .babelrc 文件有正确的预设：

...
"presets": ["es2015", "stage-0", "react"]
...

我的 webpack.config.js 使用它为 dev 转换：

loaders: [
        test: /\.js$/,
        loaders: ['react-hot', 'babel?cacheDirectory=' + PATHS.cache],
        exclude: PATHS.node_modules
    ...

我的 webpack.config.js 使用它来编译产品：

loaders: [
        test: /\.js$/,
        loader: 'babel',
        exclude: PATHS.node_modules,
    ...

我的 package.json 有所有正确的库：

...
"devDependencies": 
  "babel-core": "^6.0.20",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.2.5",
  "babel-plugin-transform-runtime": "^6.12.0",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-react-hmre": "^1.1.1",
  "babel-preset-stage-0": "^6.0.15",
...
"dependencies": 
  "react": "^0.14.6",
  "react-d3-wrap": "^2.1.2",
  "react-dom": "^0.14.6",
  "react-redux": "^4.4.5",
  "react-router": "^2.7.0",
...

奇怪的是，Chrome 报告说 index.html 中的 html 实际上替换了主 .js 文件。因此错误。

但是，直接检查文件会发现情况并非如此：

您可以找到构建的 repo here

知道这里会发生什么吗？

编辑：当我的服务器请求捆绑包时，它会返回 html。因此，prod-server 可能有问题：

var express = require('express');
var path = require('path');
var compression = require('compression');

var app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', function (req, res) 
     res.sendFile(path.join(__dirname, 'dist', 'index.html'))
);

var PORT = process.env.PORT || 8080;
app.listen(PORT, function () 
    console.log("Production express server running at localhost: " + PORT)
);

EDIT2：我在这里解决请求的方式有问题。如果我删除：

app.get('*', function (req, res) 
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
);

然后我可以向捆绑包发送请求并取回捆绑包。加入这一行后，发送获取捆绑包的请求会返回 index.html。

【问题讨论】：

当浏览器请求捆绑包时，您的服务器会返回什么？

@DavinTryon，更新了问题。

看起来您正在以 .j​​s 的形式发出请求，这可能会导致浏览器无法访问。您需要以 .html 格式请求它，或者确保从 express 端返回正确的内容类型。

@agmcleod，将res.set('Content-Type': 'text/html'); 添加到服务器不会改变错误。它仍然是 .js 包中的 index.html。

啊，我明白了。我认为问题在于每次都返回 html 文件的 get("*") 。您有静态路径设置，但 get 可能会捕获所有请求。相反，我建议使用get("/", ... 并根据需要设置其他路由。您可能可以在 get("/dist/*" 之后使用 get("*"，它只是在回调中调用 next() 。但我还没有测试过。

【参考方案1】：

正如 agmcleod 所建议的，我需要更改我的快速路由器处理请求的方式：get('*', ... 需要切换到 get('/', ...。此外，我需要将我的 webpack 公共路径更改为 '/' 而不是 path.join(__dirname, 'dist')。 Webpack 将完全限定的目录放在我的 src 属性中，并且没有使它们相对于我的快速服务器中的静态路径。

引用的回购中还有其他问题，但我认为它们与发布的问题无关。

感谢@DavidTyron 和@agmcleod 让我走上正轨。