[英]Webpack: 'Cannot find module' issue when using webpack.ignorePlugin
[英]'Cannot find module' when using webpack loaders
我通过Next.js为我的应用程序使用自定义Webpack:
const path = require('path');
const Webpack = require('webpack');
module.exports = {
webpack: (config, { dev }) => {
config.plugins.push(
new Webpack.DefinePlugin([{
__BROWSER__: "typeof window !== 'undefined'",
__NETLIFY_BRANCH__: JSON.stringify(process.env.BRANCH),
__CONFIG__: JSON.stringify({
GRAPHQL_URL: process.env.GRAPHQL_URL,
SEGMENT_WRITEKEY: process.env.SEGMENT_WRITEKEY,
}),
}])
)
config.module.rules.push(
{
test: /\.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
name: 'graphics/[name].[ext]',
},
},
},
{
test: /\.svg$/,
loader: [
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
loader: 'svg-react-loader',
},
{
loader: 'string-replace-loader',
options: {
search: ' xmlns="http://www.w3.org/2000/svg"',
replace: '',
},
},
],
},
);
return config;
},
};
但是,当我尝试将图像添加到组件中时,启动了本地主机,但收到错误消息:
Cannot find module '../assets/logo.svg'
我像往常一样将图像导入组件,没有图像,我的应用程序正在运行。 也许我应该在Webpack中添加一些内容? 所有图像均在目录资产中设置。
import logo from '../assets/logo.svg';
export default class Layout extends React.Component {
render () {
return (
<img src={logo} alt="logo" />
)
}
}
问题(据我了解: https : //github.com/zeit/next.js/issues/544 )是,Next.js不使用Webpack进行服务器端渲染,而仅用于客户端,因此您当它只是一个客户端React项目时(例如,通过为.svg
文件添加规则并通过加载程序链运行这些文件),就无法像导入SVG一样。
一种可能的解决方案是提到这里 ,其中SVG进口不通过的WebPack装载机完成,但是由巴贝尔( 其上在Next.js服务器端代码中使用)。
似乎对我有用,像这样:
npm i babel-plugin-inline-react-svg --save
将以下内容添加/合并到您的Babel配置中(有关如何在此处设置自定义Babel配置的更多信息):
"plugins": [ "inline-react-svg" ]
在您的组件/页面中,使用它(变量名称LogoSVG
很重要,不应更改):
import LogoSVG from '../assets/logo.svg';
并将其用作React组件:
return <LogoSVG alt="logo" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.