[英]Netlify Deployment , Module not found: Error: Can't resolve 'react-icons/SI'
我的應用程序在桌面上運行良好,但是當我嘗試部署到 Netlify 時,我發現找不到模塊:錯誤:是否需要將我的 Node_modules 推送到 GitHub 才能正常工作? 或 Netlify 應該從 package.json 下載所有依賴項
我感謝任何幫助,這是我第一次嘗試部署:) 謝謝!
包.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
將react-icons/SI
和react-icons/DI
的導入更改為react-icons/si
和react-icons/di
應該可以工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.