reactjs - Webpack 错误“模块构建失败:ERR_INVALID_ARG_TYPE”
问题描述
我对反应很陌生,并且在使用 web pack 时遇到了一些问题。我要做的就是将一个 SVG 文件导入到我的 react 项目中。我不知道是什么原因造成的,因为它没有给我太多关于它的信息。如果有人知道发生了什么,我将不胜感激,在此先感谢您,大声笑。
控制台中的错误代码:
ERROR in ./src/img/flag/united-kingdom.svg
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at validateString (internal/validators.js:120:11)
at Object.relative (path.js:437:5)
at Object.loader (C:\Users\Callum\Desktop\sites\csgo\mern\client\node_modules\file-loader\dist\index.js:78:72)
@ ./src/components/header.js 12:0-74
@ ./src/components/app.js
@ ./src/app.js
我的 webpack 文件 (webpack.common.js)
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
vender: [
'react', 'react-dom', 'redux',
'react-redux', 'react-router-dom',
'axios', 'prop-types']
},
output: {
path: path.resolve(__dirname, '../docs/'),
filename: "js/[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: path.resolve(__dirname, 'node_modules'),
loader: 'babel-loader'
},
{
test: /\.s?css$/,
exclude: path.resolve(__dirname, "node_modules"),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},'sass-loader'],
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name][hash].[ext]',
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=/fonts/[name].[ext]'
},
{
test: /\.(svg)$/,
exclude: /fonts/, /* dont want svg fonts from fonts folder to be included */
use: [
{
loader: 'svg-url-loader',
options: {
noquotes: true,
},
},
],
},
]
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html')}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: "manifest.js",
chunks: ['vender']
}),
new ExtractTextPlugin({
filename: 'styles/style.css'
}),
]
}
导入代码(字面上所有引用它的代码):
import { ReactComponent as UKFlag } from '../img/flag/united-kingdom.svg'
解决方案
刚遇到这个问题,把我file-loader
的改成package.json
从6.2.0
到6.1.1
并解决了
推荐阅读
- ios - 从二进制文件中破解和读取 iOS 应用程序包数据有多难?
- arrays - 为什么我的 Array 在控制台中返回 Getter & Setter?
- python - 如何在Python中将列表中的每个元素相乘
- jquery - vue.js 与 .datepicker 冲突并在更改下一个 v-model 输入后删除日期值
- node.js - Snyk 抱怨包锁中缺少 fsevents,但 fsevents 不是必需的,并且 snyk 忽略了 --strict-out-of-sync=false
- azure-active-directory - Intune 自动注册问题
- c# - 如何在操作外部组件时关闭当前表单?
- salesforce - 在 Salesforce 中使用流程构建器处理案例
- python - Pyinstaller WARNING:lib not found: api-ms-win-core-path-l1-1-0.dll 依赖于 c:\users\ymzym\appdata\local\programs\python\python39-32\python39.dll
- arrays - 是否有允许我组合 2 个图表的 R 函数?