Question

我有一个反应应用程序，我试图使用react-jsonschema-form创建一个动态表单，我有下面的index.js文件

import React, { Component } from "react";
import { render } from "react-dom";

import Form from "react-jsonschema-form";

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: "A new task"},
    done: {type: "boolean", title: "Done?", default: false}
  }
};


const log = (type) => console.log.bind(console, type);

render((
<Form schema={schema}
    onChange={log("changed")}
    onSubmit={log("submitted")}
    onError={log("errors")} />), document.getElementById("app"));

下面的

是.babelrc文件

{
  "presets": ["react"]
}

我的webpack配置如下

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
entry: [
    './app/index.js'
],
output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
},
module: {
    loaders: [
        {
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: "babel-loader"
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file?name=assets/[name].[hash].[ext]'
        },
        {
            test: /\.html$/,
            loader: 'html'
        }
    ]
},
plugins: [HtmlWebpackPluginConfig]
}

的package.json

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "start": "webpack-dev-server"
   },
  "author": "Sample",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-router": "^2.0.0-rc5"
   },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-react": "^6.22.0",
    "html-webpack-plugin": "^2.28.0",
    "html-loader": "^0.4.3",
    "file-loader": "^0.8.5",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "axios":"0.15.3",
    "bootstrap":"3.3.7",
    "jquery":"3.1.1"
  }
}

一旦我运行应用程序，我就会收到控制台错误＆＃34; Uncaught SyntaxError：在reactjs app＆＃34;中出现意外的令牌导入。任何人都可以帮助解决这个问题，因为我有新的反应，在这里遇到困难。谢谢！

Answer 1

ECMAScript模块不是任何浏览器原生支持的东西。我相信Webpack 2可以直接处理它们，但是从您的配置来看，您似乎正在使用Webpack 1，因此您需要安装a plugin for that：

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

并扩展您的.babelrc：

{
  "presets": ["react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

未捕获的SyntaxError：reactjs应用程序中的意外令牌导入

1 个答案: