javascript - Webpack:ReferenceError:文档未定义

Question

关闭。这个问题需要debugging details .它目前不接受答案。












编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将帮助其他人回答问题。


2年前关闭。







Improve this question




我正在从头开始创建 React 应用程序。在某些时候，当我使用 webpack 构建我的应用程序时，我遇到了类似标题中的错误。

Here is a minimal repository to reproduce this error.

有什么问题，我该如何解决这个错误？

Answer 1

我之前提交的代码没有运行，但这在浏览器中运行并为您提供了 hello world。
我安装了名为 ejs-loader 的额外软件包
(由于 ejs 扩展，我猜，它没有得到文档 Node )
这是你的 webpack 配置 更新

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

var config = {
  entry: "./src/index.tsx",

  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.min.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Showcase",
      template: "./src/index.ejs",
      inject: true,
      filename: "./index.html"
    })
  ],

  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        include: [path.resolve(__dirname, "src")],
        exclude: /node_modules/
      },
      { test: /\.ejs$/, loader: "ejs-loader?variable=data" }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        }
      },

      chunks: "async",
      minChunks: 1,
      minSize: 30000,
      name: true
    }
  }
};
module.exports = config;

这是你的 tsconfig 更新

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "outDir": "./dist/",
    "target": "es6",
    "lib": ["es2015", "es2017", "dom"],
    "removeComments": true,
    "allowSyntheticDefaultImports": false,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "components/*": ["src/components/*"]
    }
  }
}

只需创建一个 距离 根目录中的文件夹