reactjs - 依赖包中没有定义进程
问题描述
最近我不得不使用 typescript / webpack 创建一个新项目来做出反应。我已经包含了包“sass-loader”,它依赖于 chalk (1.1.3)。
当我尝试 npm start 时,控制台显示此错误:
Uncaught ReferenceError: process is not defined
at Object../node_modules/chalk/index.js (main.js:62661)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/@babel/highlight/lib/index.js (main.js:403)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/@babel/code-frame/lib/index.js (main.js:19)
at __webpack_require__ (main.js:228732)
at fn (main.js:228970)
at Object../node_modules/parse-json/index.js (main.js:120631)
我不知道这是否可能是这个包的问题,或者可能是我的 webpack 配置......我是 webpack 的新手。
这是我的 webpack 配置文件:
{
mode: "development",
output: {
publicPath: "/",
},
entry: "./src/index.tsx",
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
modules: {
localIdentName: 'styles_[local]_[hash:base64:5]'
}
},
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
modules: {
localIdentName: 'styles_[local]_[hash:base64:5]'
}
},
}
],
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx"],
alias: {
'@': '/src',
},
},
plugins: [
new Dotenv(),
new HtmlWebpackPlugin({
template: "public/index.html",
}),
new webpack.HotModuleReplacementPlugin(),
new ForkTsCheckerWebpackPlugin({
async: false,
}),
new ESLintPlugin({
extensions: ["js", "jsx", "ts", "tsx"],
})
],
devtool: "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "build"),
historyApiFallback: true,
port: 4000,
open: false,
hot: true,
stats: 'errors-only'
},
}
提前致谢。
解决方案
推荐阅读
- domain-driven-design - DDD,抽象类,聚合和存储库,一个或多个存储库?
- javascript - ESLint:分配给函数参数的属性
- python - 201901 - relativedelta(weeks=1) 得到 201900
- reactjs - JSX/React 中的自定义命名空间属性
- php - Symfony 4 - 使用 ROLE_FITTER 类型的用户填充数组
- javascript - JS通过三种排序方式对数组进行排序
- javascript - 浅浅和开玩笑渲染有什么区别?
- legend - Geopandas 减小图例大小(并删除地图下方的空白)
- php - 如何通过按钮单击推送网络通知
- php - 拥有 OrderService 和 TransactionService 时我应该在哪里更新“交易”模型