Material-UI + TypeScript 给出 ReferenceError: global is not defined答案

【问题标题】：Material-UI + TypeScript gives ReferenceError: global is not definedMaterial-UI + TypeScript 给出 ReferenceError: global is not defined
【发布时间】：2018-11-10 02:07:34
【问题描述】：

我已经执行了

npm install --save react react-dom @material-ui/core
npm install --save-dev webpack webpack-cli typescript ts-loader @types/react @types/react-dom

并转译main.tsx:

import * as React from "react";
import * as ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';

window.onload = () => { ReactDOM.render(<Button />, document.getElementById("app")) };

此文件已成功转译，但我在 node_modules/jss/lib/utils/escape.js:6 中遇到了 ReferenceError

var CSS = global.CSS; // ReferenceError: global is not defined

如何抑制这个错误？

这是我的webpack.config.js：

module.exports = {
    mode: "development",
    entry: __dirname + "/src/main.tsx",
    output: {
        path: __dirname + "/www",
        filename: "bundle.js",
    },
    devtool: "source-map",
    module: {
        rules: [ {test: /\.tsx?$/, use: "ts-loader"} ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    target: "node"
};

【问题讨论】：

标签： reactjs typescript global material-ui referenceerror

【解决方案1】：

你有target: "node"

像 global 和 require 这样的全局变量是由环境提供的。除非另有说明，否则 Webpack 假定浏览器环境并重写全局以指向窗口。

您可以从配置中删除 target: 'node'，或者通过将 node: {global: true} 添加到配置对象来显式启用全局重写。

【讨论】：