“SyntaxError: Unexpected token {”: Babel/Webpack/ES6 import 语句未编译

Question

我已经查看了this link，并且我已经为 . babelrc、.eslintrc、webpack.config.js，到目前为止，它们都不适用于我的情况。

基本上，我有这个代码：

// referencing this function
// // @flow
// export const PressurePsiToPa = (value: number): number => {
//     return value * 6894.757;
// };
// should also mention that import * ... raises the same error.
import {pressurePsiToPA} from './helpers/unit-converter.js'; 

console.log(pressurePsiToPA(70.4));

...

ERROR:

import {pressurePsiToPA} from './helpers/unit-converter.js';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

我认为这是 vscode 的一些东西，因为我已经必须禁用 TypeScript 和 JavaScript 语言功能才能让其他东西正常工作，但我在 SO 上看不到任何东西，甚至没有看到 babel 或 webpack 的条目在 settings.json 中。将东西作为 node_modules 并作为扩展安装可能是一个问题，但作为一个安全的假设，我一直都有这两种情况，因为事情对我来说很麻烦，而且它似乎按照我想要的方式工作（至少在eslint 和流）。

请帮忙，我不知所措。

相关文件：

package.json 片段

 "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.5.5",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-preset-flow": "^6.23.0",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-flowtype": "^3.13.0",
    "eslint-plugin-flowtype-errors": "^4.1.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-prettier": "^3.1.0",
    "flow-bin": "^0.95.1",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-merge": "^4.2.1"
  }

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-flow"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

.eslintrc

{
  "root": true,
  "extends": ["eslint:recommended", "plugin:flowtype/recommended"],
  "env": {
    "node": true,
    "es6": true,
    "browser": false
  },
  "plugins": ["flowtype-errors", "flowtype"],
  "parser": "babel-eslint",
  "rules": {
    "flowtype-errors/show-errors": "error",
    "flowtype-errors/show-warnings": "warn",
    "no-console": "off"
  },
  "settings": {}
}

webpack.common.js

const path = require("path");

const CleanWebpackPlugin = require("clean-webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  target: "node",
  entry: "./src/index.js",
  output: {
    filename: "xxx.js",
    path: path.join(__dirname, "dist"),
  },
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "eslint-loader",
          options: { failOnError: true },
        },
      },
      {
        test: [
          /node_modules[/\\]mqtt[/\\]mqtt.js/,
          /node_modules[/\\]mqtt[/\\]bin[/\\]sub.js/,
          /node_modules[/\\]mqtt[/\\]bin[/\\]pub.js/,
        ],
        loader: "shebang-loader",
      },
    ],
  },
});

Answer 1

我曾经遇到过类似的错误。就我而言，更新 Node 版本就足够了。