我有一個獨立的 HTML、CSS 和 js 頁面，可以獨立運行。HTML 從 cdns 和檔案加載 js 和 CSS。
我希望將其集成到 next/react 應用程式中。我現在擁有的是我的頁面的自定義 URL，它只提供靜態 HTML 檔案，它按預期作業。
然而，問題是登錄和用戶狀態。由于該檔案是靜態的，因此很難在該檔案中保留有關用戶登錄和其他狀態的資訊。
我嘗試使用 將html-loaderHTML 加載到dangerouslySetInnerHTML. 它確實加載了 HTML。但是，它不會加載從 HTML 檔案加載的任何 JS 或 CSS 檔案。我相信這是我需要解決的問題。（或者它可能只是一個 XY 問題，因此在此之前的整個解釋）。
感謝您對正確方法的任何幫助或推動。謝謝
更新：我嘗試從 react 應用程式加載我在 HTML 中匯入的所有檔案，如下所示：
import "../public/heatmap/scripts/jquery.min.js"
import "../public/heatmap/scripts/heatmap.min.js"
import "../public/heatmap/scripts/bootstrap.bundle.min.js"
import "../public/heatmap/scripts/leaflet"
import "../public/heatmap/scripts/leaflet-heatmap"
import "../public/heatmap/scripts/main"
import "../public/heatmap/scripts/fetch_data"
但這會產生這個錯誤，因為我jquery之前正在加載，所以我認為這沒有意義bootstrap。
Failed to parse source map: TypeError: Cannot read property 'line' of undefined
at getNotFoundError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:1:816)
at getModuleBuildError (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2479)
at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:562
at Array.map (<anonymous>)
at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:476
at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:8:17)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43260:38
at eval (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:14:1)
at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
at fn (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:41174:45)
at Hook.eval [as callAsync] (eval at create (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:10:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:31736:14)
at cont (/Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43234:34)
at /Users/pkoirala/Projects/csdap-frontend/node_modules/next/dist/compiled/webpack/bundle5.js:43280:10
error - ./public/heatmap/scripts/bootstrap.bundle.min.js:7:76
Module not found: Can't resolve 'jquery'
5 | */
6 | !function(t, e) {
> 7 | "object" == typeof exports && "undefined" != typeof module ? e(exports, require("jquery")) : "function" == typeof define && define.amd ? define(["exports", "jquery"], e) : e((t = "undefined" != typeof globalThis ? globalThis : t || self).bootstrap = {}, t.jQuery)
| ^
8 | }(this, (function(t, e) {
9 | "use strict";
10 | function n(t) {
uj5u.com熱心網友回復：
Next.js 有Head組件：
import Head from "next/head";
這是您為專案設定元資料的地方。此外，您可以在此處加載 CDN。例如：
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Alice&family=Great Vibes&family=Inconsolata&family=Indie Flower&family=Lobster&family=Press Start 2P&display=swap"
rel="stylesheet"
></link>
<script
src="https://kit.fontawesome.com/fbadad80a0.js"
crossOrigin="anonymous"
></script>
<Head/>
在 Header 組件或 BaseLayout 組件中使用此組件。始終在您的專案中呈現的組件，因此可以使用 cdn。
或者，您可以安裝 npm 包并將它們匯入其中pages/_app.js，這樣它們將在您的專案中全域可用。_app.js 頁面負責渲染我們的頁面。
請注意，jquery在反應內部使用可能會導致一些事件處理錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/411426.html
標籤：
上一篇：finos/perspective-viewer：css-loader在“exports”上拋出CssSyntaxError