Question

我正在尝试在我的Windows机器上使用webpack设置React，但是我对一个非常常见的错误得到了一个非常奇怪的回应。我有一个“未捕获的SyntaxError：意外的令牌导入”错误，每个人似乎都会在stackoverflow上询问，但我想我已经查看了每个问题，并且没有一个适用于其他人的解决方案对我有效。

我已将babel-preset-es2015和es2016添加到我的package.json：

{
"name": "360",
"version": "1.0.0",
"description": "360 video viewer",
"main": "/src/index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "compile": "./node_modules/.bin/webpack",
  "build": "webpack",
  "start": "webpack-dev-server"
},
"author": "DottoraQN",
"license": "ISC",
"dependencies": {
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "jquery": "^3.2.1",
  "react": "^15.5.4",
  "react-dom": "^15.5.4"
},
"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.0.0",
  "babel-preset-es2016": "^6.24.1",
  "html-webpack-plugin": "^2.28.0",
  "webpack": "^2.6.1",
  "webpack-dev-server": "^2.4.5"
  }
}

我已将两者都添加到我的.babelrc：

{"presets": ["es2015", "es2016", "react"]}

我确保在我的webpack.config.js文件中正确指定了babel：

var webpack = require('webpack');
var path = require('path');

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

var config = {
  entry: __dirname + '/src/index.js',
  output: {
     path: __dirname + '/build',
     filename: 'bundle.js'
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
           presets: ['es2015', 'react']
        }
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
};

module.exports = config;

我的代码非常简单，我只是想在我的localhost服务器上显示“hello world”，这实际上是有效的！但是，代码仍然抛出此错误，并在其他地方导致未识别的功能。

我真的很抱歉再次提出这个问题，但就像我说的那样，其他答案对我不起作用，而且我不确定我做错了什么。我是比较新的反应和es6，我参加了一个codecademy课程并且想尝试编写我的网站，因为我喜欢模块化格式。感谢您的帮助和耐心！

修改

这是我的index.js / React模块：

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Viewer from './Viewer';

//var React = require('react');
//var ReactDOM = require('react-dom');
//var Viewer = require('./Viewer');

ReactDOM.render(
  <Viewer />,
  document.getElementById('app')
);

//Viewer.js
import React from 'react';

export default class Viewer extends React.Component {
    parseMe () {
        $.getJSON("images.json", function(images) {
            console.log(images);
        });
    }

    render () {
        return (<div>
            <p>Hello World</p>
            </div>);
    }
}

函数parseMe（）目前尚未使用，因为它实际上不能解决我目前遇到的错误。

解答：

嗯，真的没有。在关于这个问题的评论中，你可以看到另一个用户拿走了我的项目并克隆了它，它对他们来说很好。我最终只是重新安装了我的节点模块，一切都开始工作了。

Webpack配置babel错误，其他答案无效

0 个答案: