反应意外令牌<

时间:2016-08-22 07:59:24

标签: javascript express reactjs webpack babeljs

我正在使用我自己的自定义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使用它来转换为prod:

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实际上已经替换了<。em>主.js文件。因而错误。

enter image description here

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

enter image description here

您可以找到构建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。

1 个答案:

答案 0 :(得分:1)

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

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

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