JSDOM 觸發 webpack polyfill 問題

Question

我有一個 MERN 項目。 作為我將前端部署到服務器的嘗試的一部分，我試圖讓它在節點環境中工作。

第一期：

當我嘗試在終端中運行以下命令時：

node ./build/static/js/index.js

我收到以下錯誤：

Error: Automatic publicPath is not supported in this browser
    at file://Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:2:249085
    at file://Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:2:249226
    at /Users/123/JAN30/123reporter/front/dashboard/build/static/js/index.js:152:80876
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

Node.js v18.12.1

這很有意義，因為我正在嘗試運行 a.js 代碼，它應該在瀏覽器的環境中運行，並且我試圖強制它在節點環境中運行。

所以，為了解決這個問題，我試圖通過以下方式使用jsdom ：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import { JSDOM } from "jsdom";
const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>');
(global as any).window = dom.window;
global.document = dom.window.document;
const root: ReactDOM.Root = ReactDOM.createRoot(
  window.document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

這導致我...

第二期：

嘗試使用上面寫的 JSDOM 觸發了以下新問題

Module not found: Error: Can't resolve 'fs' in '/Users/123/JAN30/123reporter/front/dashboard/node_modules/jsdom/lib'

好吧。 這是有道理的，因為我在 Nodejs 環境中模擬 DOM 環境，但它沒有找到 Nodejs 期望的模塊。

為了解決這個問題，我在 webpack.config 文件的 module.export 中添加了以下字段：

  node: {
    fs: "empty",
  },

現在我嘗試重建，這讓我..驚喜..

第三期：

Module not found: Error: Can't resolve 'path' in '/Users/123/JAN30/123reporter/front/dashboard/node_modules/jsdom/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

我嘗試通過在 webpack.config 中添加以下內容來解決該問題：

  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    fallback: {
      path: require.resolve("path-browserify"),
    },
  },

然而，什么都沒有改變。 也嘗試修改為

路徑：假；

同樣的結果。

有任何想法嗎？

編輯：

添加 webpack 配置

const path = require("path");
const webpack = require("webpack");
const dotenv = require("dotenv");
dotenv.config();

module.exports = {
  entry: {
    index: "./src/index.tsx",
  },
  mode: "production",
  node: {
    fs: "empty",
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: { noEmit: false },
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    fallback: {
      path: require.resolve("path-browserify"),
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "build/static/js"),
  },
};

問候：_）

Answer 1

讓我們修改 (webpack.config.js) 中的 publicPath，因為它看起來是一個空字符串。

output: {
           path: path.resolve(__dirname, 'path/to/output'),
           filename: 'fileName.[ext]'
       }

JSDOM 觸發 webpack polyfill 問題

問題描述

第一期：

第二期：

第三期：

編輯：

添加 webpack 配置

1 個解決方案

解決方案1
0 2023-01-31 10:34:09

JSDOM 觸發 webpack polyfill 問題

問題描述

第一期：

第二期：

第三期：

編輯：

添加 webpack 配置

1 個解決方案

解決方案1 0 2023-01-31 10:34:09

解決方案1
0 2023-01-31 10:34:09