Babel.js React/TypeScript意外标记

zd287kbt 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(203)

我正在构建一个react/TS应用程序，遇到了这个编译器错误。我确信这是一个配置问题，但是唉，我不知道是哪个配置。我不确定它是否与泛型有关，或者我是否会在其他情况下看到“意外令牌”错误。

ERROR in ./src/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../src/App.tsx: Unexpected token (15:4)

  13 |   const [coordinates, setCoordinates] = useState<
  14 |     CoordinatesQueryType | undefined
> 15 |   >();
     |     ^
  16 |

Webpack配置如下。FWIW我添加了“react”到module.rule.options，但随后我得到了另一个错误，说我缺少“babel-preset-react”，安装了它，然后另一个错误，然后不想进入兔子洞。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    port: 4000,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

和巴别塔。rc：

{
  "presets": ["@babel/env", "@babel/preset-react", "@babel/preset-flow"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

babeljs

来源：https://stackoverflow.com/questions/71499075/react-typescript-unexpected-token

1条答案

按热度按时间

tuwxkamq1#

是否有打印脚本设置？
我想你在巴别塔预设中漏掉了这一点：@babel/preset-typescript
而且我在你的webpack配置中看不到任何ts-loader。所以即使你编译了typescript，你也不会得到类型检查。要解决这个问题：
将当前的Babel规则更改为仅匹配js文件

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },

安装必要的工具：yarn add -D @babel/preset-typescript ts-loader
将@babel/preset-typescript添加到babel.rc预设。将ts-loader添加到webpack.config.js模块规则。

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
     // Typescript loader
     {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },

我想这应该可以解决这个问题。另外，您同时有options\presets和.babelrc，请尝试只使用其中一个进行配置。

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js React/TypeScript意外标记

1条答案

相关问题

热门标签

最新问答