將使用 CDN 鏈接創建的 React App 導入 App.js 時出現“未捕獲的 ReferenceError：require is not defined”

Question

我創建了一個 React 應用程序，它向瀏覽器呈現帶有“Hello World”的 h1 標記。 我使用 CDN 鏈接而不是 npm 設置了應用程序。 該應用程序包含三個文件：

index.html 帶有一個 id 為“root”的 div 標簽
App.js 將我的 jsx 呈現給名為 root 的 div 標簽
我打算將其用於某些 styles

現在的挑戰是當我在我的 App.js 頂部添加import './styles.css'時，應用程序中斷並且瀏覽器上沒有顯示任何內容。 檢查瀏覽器控制台后，我發現錯誤消息：

“App.js:1 Uncaught ReferenceError: require is not defined”-這是來自瀏覽器控制台的錯誤消息截圖

我的問題是如何將腳本/其他反應組件導入我的 App.js 而不會收到此錯誤消息？ 為什么 babel 給我這個錯誤？

下面是index.html、style.css和App.js代碼：

 class App extends React.Component{ render(){ return( <div> <h1 className="heading">Hello World</h1> </div>) } } ReactDOM.render(<App/>, document.getElementById('root'))

 .heading{ display: flex; text-align: center; font-size: 30px; color: blueviolet; }

 <:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" src="style:css"> <script src='https.//unpkg.com/react@16.3.1/umd/react.production.min:js'></script> <script src='https.//unpkg.com/react-dom@16.3.1/umd/react-dom.production.min:js'></script> <script src='https.//unpkg.com/babel-standalone@6.26.0/babel.js'></script> </head> <body> <div id="root"></div> <script src="App.js" type="text/babel"> </script> </body> </html>

Answer 1

我終於發現最簡單的解決方案是像這樣鏈接到我的 index.html ：

<link rel="stylesheet" href="styles.css">

將使用 CDN 鏈接創建的 React App 導入 App.js 時出現“未捕獲的 ReferenceError：require is not defined”

問題描述

1 個解決方案

解決方案1
0 2021-01-23 19:59:24

將使用 CDN 鏈接創建的 React App 導入 App.js 時出現“未捕獲的 ReferenceError：require is not defined”

問題描述

1 個解決方案

解決方案1 0 2021-01-23 19:59:24

解決方案1
0 2021-01-23 19:59:24