“const 声明中缺少初始化程序。”反应错误

Question

我的反应类有问题，它说我在 const 声明中缺少初始化程序。谷歌搜索后我不知道如何解决它。

这是我的课

import React, { useEffect, useState } from "react";
const axios = require('axios').default;
import { HttpClient } from "./services/httpClient";


export const Popup: React.FC<any> = () => {
  const [text, setText] = useState(null);
  const handleStatusInput = (e) => setText(e);
  const httpClient = new HttpClient();
  const [loaded, setLoaded] = useState<boolean>(false);

  useEffect(() => {
    prepareFileForSending();
  }, []);

  function prepareFileForSending() {


    // http request to send an email with the prepared document to sign
    httpClient.test("matej").then((responseData) => {
      if (responseData !== "") {
        setText(responseData);
      } else {
        handleStatusInput(false);
      }
      setLoaded(true);
    });
  }

  return (
    <div>
     
      {text && (
        <div >
          <span>{text}</span>
        </div>
      )}
     
    </div>
  );
};

export default Popup;

错误如下：

ERROR in ./src/popup.tsx Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\SourceCodes\Chrome\src\popup.tsx: Missing initializer in const declaration. (31:18)

问题来了：

这里是webpack.config.js，我不认为这是webpack的问题，但我发布它以防万一 随机文本只是为了涵盖试图发布有关我的 ababababa 的人的标准

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
 entry: {
   popup: './src/popup.tsx'
 },
  output: {
   filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [{
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react']
            }
        }
    }]
  },
  plugins: [new HtmlWebpackPlugin({
      template: "./src/popup.html",
      filename: "popup.html"
  }),
  new CopyPlugin({
    patterns: [
      { from: "public"},
    ],
  }),
],
};

Answer 1

你需要改变

 const axios = require('axios').default;

为此

import axios from 'axios';

并添加

import React from 'react';

和

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

Answer 2

export const Popup = (): React.FC<any> => {

Popup

是一个一般的函数，因此将其键入为函数。

UPD

export const Popup: React.FC = (): JSX.Element => {

其中

React.FC

是组件类型，

JSX.Element

- 组件返回的内容。

Answer 3

我忘了复制我的

.babelrc

！确保你这样做。