javascript 控制台抛出“无效的钩子调用”和“无法读取null的属性”

w6lpcovy  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(113)

我试图将ant design链接到我的react文件时遇到了错误。我使用vite下载了react。
我当前的文件包括:
index.html

<!DOCTYPE html>
   <html lang="en">
  
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>
  
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

 </html>

App.jsx

import './App.css'
import { Button, Space } from "antd";

function App() {
  return (
    <div className="App">
      <h1>helo</h1>
      <Button type="primary">Primary Button</Button>
    </div>
  );
}

export default App

Main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

This is the screenshot of the error
我尝试使用Ant的其他替代品,但仍然不起作用

yjghlzjz

yjghlzjz1#

查看您的屏幕截图,错误引用button.js

Uncaught TypeError: Cannot read properties of null (reading 'usecontext")
  at object.useContext209 (react.development.js:1618:21)
  at InternalButton (button.js:70:13)
  ...

在antd GitHub中快速浏览引用了这个issue
深入研究这一点,建议在这里从cjs切换到esm
这不是一个完全解决你的问题,但希望能为你指出一个正确的方向。

相关问题