Блог

Главная - Вопросы по программированию - ОШИБКА в [at-loader] ./src/components/App.tsx:1:8

ОШИБКА в [at-loader] ./src/components/App.tsx:1:8

#javascript #node.js #reactjs #typescript #build

#javascript #node.js #reactjs #машинопись #сборка

Вопрос:

Ну, я просто пытаюсь создать простое приложение react с функциональностью walletconnect. но я получаю кучу ошибок, не могли бы вы, ребята, оказать некоторую поддержку и помочь мне устранить эти ошибки.

трассировка.

 ERROR in [at-loader] ./src/components/App.tsx:1:8 
    TS1259: Module '"C:/Users/AHMED/Downloads/Webpack-React-Setup-master/Webpack-React-Setup-master/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag

ERROR in [at-loader] ./src/components/App.tsx:10:10 
    TS2339: Property 'state' does not exist on type 'App'.

ERROR in [at-loader] ./src/components/App.tsx:45:12 
    TS2339: Property 'setState' does not exist on type 'App'.

ERROR in [at-loader] ./src/components/App.tsx:46:24 
    TS2339: Property 'state' does not exist on type 'App'.

ERROR in [at-loader] ./src/components/App.tsx:47:18 
    TS2339: Property 'state' does not exist on type 'App'.

ERROR in [at-loader] ./src/components/index.tsx:10:5 
    TS2605: JSX element type 'App' is not a constructor function for JSX elements.
  Type 'App' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.
i ｢wdm｣: Failed to compile.

index.tsx

 import * as React from 'react'
import * as ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

App.tsx

 import React from 'react';
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";


class App extends React.Component<any, any> {

  constructor(props:any) {
    super(props)
    this.state = {
      address: ''

    }
    var connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });
  }

  walletConnectFunc = async () => {
    var connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });
    if (connector.connected) {
      alert("already connected")
      return
    }
    connector.createSession();
    connector.on("connect", async (error, payload) => {
      console.log("connect")
      if (error) {
        throw error;
      }

      // Get provided accounts and chainId
      const { accounts, chainId } = payload.params[0];
      console.log("connect account", accounts)
      console.log("chainid account", chainId)

      const obj = {
        "address": accounts[0],

      }
      this.setState({ address: obj.address })
      console.log(this.state.address)
      alert(this.state.address)
    })


  }
  render() {
    return (
      <div className="App">

        <body>
          <div>
            <button className="btn btn-primary my-4" type="button" onClick={() => this.walletConnectFunc()}>WalletConnect</button>
          </div>
        </body>
      </div>
    );
  }
}

export default App;

У меня есть приложение в другом проекте с именем App.js . И я просто хочу использовать тот же код, но в файле App.tsx с синтаксисом типа script. У меня проблема с тем, что я совершаю кучу ошибок. Вы, ребята, можете это исправить. Я ничего не знаю о машинописи.

Просто для ссылки (App.js )

 import React, { Component } from 'react'
import './App.css';
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      address: ''

    }
    this.connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });
  }


  walletConnectFunc = async () => {

    if (this.connector.connected) {
      alert("already connected")
      return
    }
    this.connector.createSession();
    this.connector.on("connect", async (error, payload) => {
      console.log("connect")
      if (error) {
        throw error;
      }

      // Get provided accounts and chainId
      const { accounts, chainId } = payload.params[0];
      console.log("connect account", accounts)
      console.log("chainid account", chainId)

      const obj = {
        "address": accounts[0],

      }
      this.setState({ address: obj.address })
      console.log(this.state.address)
      alert(this.state.address)
    })


  }
  render() {
    return (
      <div className="App">

        <body>
          <div>
            <button class="btn btn-primary my-4" type="button" onClick={() => this.walletConnectFunc()}>WalletConnect</button>
          </div>
        </body>
      </div>
    );
  }
}

export default App;

если требуется больше кода, сообщите мне об этом в разделе комментариев. Я дополню свой вопрос этой информацией. большое вам спасибо.

Комментарии:

1. Похоже, вы используете Typescript, и это ошибки типа — у вас установлены типизации для React? npm i @types/react

2. @jnotelddim теперь готово. но трассировка все та же

3. еще пара вопросов: 1) как вы создали проект? 2) как вы запускаете приложение?

4. Кроме того, это как бы в стороне от сути, но если вы просто делаете это как упражнение для изучения Typescript — я бы рекомендовал вам начать с учебника по typescript.

5. ну, я скачал эту [ссылку] github.com/krofax/Webpack-React-Setup проект react с уже настроенной конфигурацией webpack и пытается преобразовать мой старый App.js файл в файл App.tsx, чтобы я мог использовать его в этом проекте.