意外的令牌提供者答案

【问题标题】：Unexpected token Provider意外的令牌提供者
【发布时间】：2018-02-16 18:36:10
【问题描述】：

我正在尝试创建一个同构反应应用程序，下面是我的一些文件，在我的 server.js 中，当我尝试使用 <Provider> 时，我收到一条错误消息，提示 Unexpected token。

我认为这是因为我试图在我的 server.js 中使用 jsx，但是，我不确定这一点。

在我的 index.js 中，我需要 require('babel-core/register')({});

这不能转换后续的 Jsx 语法吗？我在这里错过了什么吗？

Package.json

  "main": "index.js",
  "scripts": {
    "start": "node --harmony .",
    "build": "rimraf build && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",

index.js

'use strict';

require('babel-core/register')({});
require('babel-polyfill');

var server = require('./server').default;

const PORT = process.env.PORT || 3000;

server.listen(PORT, function () {
  console.log('Server listening on: ' + PORT);
});

server.jsx

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')
var serveStatic = require('serve-static');
var path = require('path');
var bodyParser = require('body-parser');
var app = new (require('express'))()
var express = require('express');
var request = require('request');
import React from 'react'
import createLocation            from 'history/lib/createLocation';
import { renderToString }        from 'react-dom/server'
import { RoutingContext, match } from 'react-router';
import { Provider }              from 'react-redux';
import routes from './src/routes'


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


var isDeveloping = process.env.NODE_ENV !== 'production';
var port = isDeveloping ? 7000 : process.env.PORT;


if(isDeveloping){
  const compiler = webpack(config);
  const middleware = webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
    contentBase: 'src',
    stats: {
      colors:true,
      hash: false,
      timings:true,
      chunks:false,
      chunkModules:false,
      modules: false
    }
  });

  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));
}
app.use(express.static(__dirname + '/build'));
app.use((req, res) => {
  const location = createLocation(req.url);
  const reducer  = combineReducers(reducers);
  const store    = createStore(reducer);

  match({ routes, location }, (err, redirectLocation, renderProps) => {
    if (err) {
      console.error(err);
      return res.status(500).end('Internal server error');
    }
    if (!renderProps) return res.status(404).end('Not found.');

    const InitialComponent = (
      <Provider store={store}>
        <RoutingContext {...renderProps} />
      </Provider>
    );

    // const initialState = store.getState();

    const componentHTML = renderToString(InitialComponent);
    const HTML = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Isomorphic Redux Demo</title>
          <script type="application/javascript">
          </script>
      </head>
      <body>
        <div id="react-view">${componentHTML}</div>
        <script type="application/javascript" src="/bundle.js"></script>
      </body>
  </html>
`
    res.end(HTML);
  });
});


export default app;

webpack.config

var path = require('path')
var webpack = require('webpack')
var autoprefixer = require('autoprefixer')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

var assetPath = '/assets/'
var absolutePath = path.join(__dirname, 'build', assetPath)

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, 'src/index.js')
  ],
  output: {
    path: absolutePath,
    filename: 'bundle.js',
    publicPath: assetPath
  },
  plugins: [
    new webpack.DefinePlugin({
    'process.env':{
      'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader:  'babel' ,
        exclude: /node_modules/,
        include: [
          path.join(__dirname, 'src'),
          path.join(__dirname, 'settings')
        ],
        query: {
          presets: ['es2015']
        }
      },
      // fonts and svg
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      {
        // images
        test: /\.(ico|jpe?g|png|gif)$/,
        loader: "file"
      },
      {
        // for some modules like foundation
        test: /\.scss$/,
        exclude: [/node_modules/], // sassLoader will include node_modules explicitly
        loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css!postcss")
      }
    ]
  },
  postcss: function(webpack) {
    return [
      autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']})
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "node_modules")]
  }
}

【问题讨论】：

你的 package.json 对 react-redux 有依赖吗？
您好，感谢您的回复。是的，它有。我相信我在转译器中遗漏了一些东西，它是同构实现。
是否有 .babelrc 文件，其中包含为 es2015 定义的预设并做出反应？

标签： javascript reactjs babeljs isomorphic-javascript

【解决方案1】：

我遇到了类似的问题，使用这些预设创建 .babelrc 文档解决了我的问题：

{
  "presets": ["env", "react"]
}

【讨论】：