Material-UI + TypeScript gives ReferenceError: global is not defined
Material-UI + TypeScript gives ReferenceError: global is not defined
我执行了
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"
};
你有target: "node"
像 global 和 require 这样的全局变量是由环境提供的。除非另有说明,Webpack 假定浏览器环境并重写 global 以指向 window.
您可以从您的配置中删除目标:'node',或者通过将节点:{global: true} 添加到您的配置对象来明确启用全局重写。
我执行了
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
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"
};
你有target: "node"
像 global 和 require 这样的全局变量是由环境提供的。除非另有说明,Webpack 假定浏览器环境并重写 global 以指向 window.
您可以从您的配置中删除目标:'node',或者通过将节点:{global: true} 添加到您的配置对象来明确启用全局重写。