我的应用程序在桌面上运行良好,但是当我尝试部署到 Netlify 时,我发现找不到模块:错误: 我是否需要将我的 Node_modules 推送到 GitHub 才能使其工作?或者 Netlify 应该从 package.json 下载所有依赖项
感谢您的帮助,这是我第一次尝试部署 :) 谢谢!
package.json
{
"name": "portfoliofrontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"react-icons": "^4.2.0",
"react-particles-js": "^3.4.1",
"react-router-dom": "^5.2.0",
"react-typed": "^1.2.0",
"tsparticles": "^1.30.4"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.12.5",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.1.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "webpack serve",
"watch": "webpack --watch",
"build": "SET NODE_ENV=production & webpack",
"build-dev": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path");
let mode = "development";
if (process.env.NODE_ENV === "production ") {
mode = "production";
}
module.exports = {
mode: mode,
entry: "./src/index.js",
output: {
clean: true,
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
assetModuleFilename: "images/[hash][ext][query]",
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(png|pdf|jpe?g|gif)$/i,
exclude: /node_modules/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [new MiniCssExtractPlugin(), new HtmlWebpackPlugin({
template: "./src/index.html"
})],
devtool: "source-map",
devServer: {
contentBase: "./dist",
historyApiFallback: true,
hot: true,
},
};
Netlify 上的错误
ERROR in ./src/components/Portfolio.js 14:0-72
Module not found: Error: Can't resolve 'react-icons/SI' in '/opt/build/repo/src/components'
resolve 'react-icons/SI' in '/opt/build/repo/src/components'
Parsed request is a module
using description file: /opt/build/repo/package.json (relative path: ./src/components)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/opt/build/repo/src/components/node_modules doesn't exist or is not a directory
/opt/build/repo/src/node_modules doesn't exist or is not a directory
looking for modules in /opt/build/repo/node_modules
existing directory /opt/build/repo/node_modules/react-icons
using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: .)
using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: ./SI)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/SI doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/SI.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/SI.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/SI.wasm doesn't exist
as directory
/opt/build/repo/node_modules/react-icons/SI doesn't exist
/opt/build/node_modules doesn't exist or is not a directory
/opt/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/components/App.js 5:0-36 27:17-26
@ ./src/index.js 2:0-35
ERROR in ./src/components/Portfolio.js 15:0-73
Module not found: Error: Can't resolve 'react-icons/DI' in '/opt/build/repo/src/components'
resolve 'react-icons/DI' in '/opt/build/repo/src/components'
Parsed request is a module
using description file: /opt/build/repo/package.json (relative path: ./src/components)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/opt/build/repo/src/components/node_modules doesn't exist or is not a directory
/opt/build/repo/src/node_modules doesn't exist or is not a directory
looking for modules in /opt/build/repo/node_modules
existing directory /opt/build/repo/node_modules/react-icons
using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: .)
using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: ./DI)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/DI doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/DI.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/DI.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/node_modules/react-icons/DI.wasm doesn't exist
as directory
/opt/build/repo/node_modules/react-icons/DI doesn't exist
/opt/build/node_modules doesn't exist or is not a directory
/opt/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/components/App.js 5:0-36 27:17-26
@ ./src/index.js 2:0-35