Babel giving error Unexpected token, expected ";"

Question

I'm using react and typescript in my project. On runtime, babel gave an error not so understandable.

I'm getting an error like:

..src/AppContext.tsx: Unexpected token, expected ";" (11:5)

and on my visual studio code console error showing like that:

|    9 | import axios from "axios";
|   10 | 
| > 11 | type StateType = {
|      |      ^
|   12 |   data?: any;
|   13 | };

Here is my WebPack configuration:

module.exports = {
  output: {
    publicPath: "http://localhost:8082/",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 8082,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
         .....
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],

and my babelrc file:

{
  "presets": ["@babel/preset-typescript", "@babel/preset-react", "@babel/preset-env"]
}

and here my package.json:

{
  "name": "App",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "start": "webpack-dev-server --open --mode development",
    "start:live": "webpack-dev-server --open --mode development --liveReload"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.10.4",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "babel-loader": "8.1.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "1.2.1",
    "webpack": "5.0.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.11.0"
  },
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  }
}

I don't understand why it happened my other components with TSX are works but here maybe a problem in type definition?

Have you put the typescript configuration in tsconfig.json file?[link](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) — Subrato Pattanaik, Nov 16 '20 at 12:55
I don't have this file. Do I need it? I was used before create-react-app and create-react-app handle it himself I think. Actually, without this file, I created TSX files everything worked. Then this error comes suddenly — user3348410, Nov 16 '20 at 13:08
@SubratoPatnaik btw I added to tsconfig.json to my root. Do I need to import it somewhere? But error still repeat — user3348410, Nov 16 '20 at 13:18
https://stackoverflow.com/a/54633385/13847690 this might help you — Subrato Pattanaik, Nov 16 '20 at 13:33

Babel giving error Unexpected token, expected ";"

0 Answers0