我将自定义 webpack 与 Next.js 一起用于我的应用程序:
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 中添加一些东西? 所有图像都在目录 Assets 中设置。
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 进行服务器端渲染,仅用于客户端,因此您无法像在 SVG 渲染时那样导入 SVG纯粹是一个客户端 React 项目(即通过为 .svg
文件添加规则并通过加载器链运行这些文件)。
提到了一个可能的解决方案here ,其中 SVG 导入不是由 Webpack 加载器完成,而是由 Babel 完成(在 Next.js 的服务器端代码中使用)。
它似乎对我有用,如下所示:
npm 我 babel-plugin-inline-react-svg --save
将以下内容添加/合并到您的 Babel 配置中(有关如何设置自定义 Babel 配置的更多信息 here ):
"plugins": [ "inline-react-svg" ]
在您的组件/页面中,使用它(变量的名称
LogoSVG
很重要,不应更改):import LogoSVG from '../assets/logo.svg';
并将其用作 React 组件:
return <LogoSVG alt="logo" />
关于javascript - 使用 webpack 加载器时“找不到模块”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45348636/