Question

我在运行应用程序时遇到意外的令牌导入错误。请查看我的网络包配置设置 -

- Webpack.config.js -

var path = require("path");

module.exports = {
    entry: ['./main.js'],
    output: {
      path: path.join(__dirname, 'build'),
      filename: "bundle.js",
      publicPath: '/build'
    },
    resolve: {
      modules: [
        path.resolve('./src'),
        path.resolve('./node_modules')
      ],
      extensions: ['.js','.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
        },
      ]
    },
    devServer: {
      inline: true,
      port: 3000
   }

  };

.babelrc

{
  "presets": ["es2015"],
  "plugins": [
    ["transform-object-rest-spread"],
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
  ]
}

--- ---的package.json

{
  "name": "pagination",
  "version": "1.0.0",
  "description": "about table pagination",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "material-ui": "^0.16.7",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "install": "^0.8.7",
    "npm": "^4.2.0"
  }
}

正如您在代码中看到的那样，我已经设置了webpack.So尽管服务器成功启动，但它出错了

＆＃39;未捕获的SyntaxError：意外的令牌导入＆＃39;。

Answer 1

因此，我建议您删除.babelrc文件中的预设，因为您已将它们包含在webpack中，这可能会导致问题，因为您未将react preset包括在内babelrc。

<强> .babelrc

{
    "plugins": [
    ["transform-object-rest-spread"],
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
  ]
}

其次要确保你的所有导入都有适当的加载器，如css，svg等

module: {
   loaders: [
    { test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    },
    { test: /\.css$/, loader: "style!css" },
    { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
    { test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
    { test: /\.svg$/, loader: "file" }
  ],
}

根据您的要求，您可以排除上述部分加载程序，并确保在使用之前安装loaders

Webpack - 未捕获的SyntaxError：意外的令牌导入

1 个答案: