Next.js + SVGR，尝试加载 svg 组件时出错
Next.js + SVGR, error trying to load svg component
我已经从 SVGR 游乐场页面自动转换了一个 SVG 反应组件，并将其放入我的项目中（以及安装 @svgr/webpack 并按照指示设置配置）- 尝试时加载页面，出现以下错误：
./img/PlaneIcon
Module parse failed: Unexpected token (2:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const PlaneIcon = (props) => (
> <svg
| width={687.135}
| height={687.135}
Import trace for requested module:
./pages/world.js
我试过寻找解决方案，但大多数事情似乎都集中在如何加载 .svg 文件上（这似乎也是 next.config.js 文件正在处理的内容）——我没有看到表明 jsx 中的内联 svg 甚至应该需要一个 webpack 加载器，尽管我在使用 next + react 方面还很陌生，所以我可能只是误解了 - 任何帮助都会非常感激。
SVG 组件：
const PlaneIcon = (props) => (
<svg
width={687.135}
height={687.135}
viewBox="0 0 181.804 181.804"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<defs>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="a"
x={-0.096}
y={-0.096}
width={1.191}
height={1.191}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="b"
x={-0.076}
y={-0.076}
width={1.152}
height={1.152}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="c"
x={-0.112}
y={-0.112}
width={1.225}
height={1.225}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
</defs>
<g transform="translate(-12.564 -34.15)">
<circle
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: props.c2,
strokeWidth: 1.07236,
strokeOpacity: 1,
filter: "url(#a)",
stopColor: "#000",
}}
cx={103.466}
cy={125.053}
r={65.504}
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 1.29171,
filter: "url(#b)",
stopColor: "#000",
}}
d="M103.466 46.15a78.902 78.902 0 0 0-78.902 78.903 78.902 78.902 0 0 0 78.902 78.902 78.902 78.902 0 0 0 78.902-78.902 78.902 78.902 0 0 0-78.902-78.902zm-.239 7.58a71.214 71.214 0 0 1 28.145 5.683c11.695 4.948 22.038 13.129 29.56 23.387 7.28 9.88 11.906 21.623 13.354 33.744.512 4.224.619 8.467.371 12.72a72.722 72.722 0 0 1-1.214 9.533 71.157 71.157 0 0 1-2.216 8.475 72.638 72.638 0 0 1-3.927 9.586 73.54 73.54 0 0 1-4.892 8.339 72.379 72.379 0 0 1-5.277 6.821 73.484 73.484 0 0 1-6.843 6.83c-2.226 1.913-4.544 3.726-6.99 5.351-2.787 1.894-5.725 3.56-8.749 5.044-2.887 1.378-5.854 2.592-8.898 3.581a71.154 71.154 0 0 1-8.496 2.215 72.37 72.37 0 0 1-9.513 1.206c-2.845.16-5.701.164-8.545-.015a72.136 72.136 0 0 1-9.455-1.215c-2.888-.586-5.753-1.315-8.547-2.255a71.089 71.089 0 0 1-9.574-3.948 72.68 72.68 0 0 1-8.266-4.863 71.765 71.765 0 0 1-6.812-5.285 72.684 72.684 0 0 1-6.772-6.791c-1.925-2.24-3.749-4.574-5.382-7.036-1.911-2.817-3.59-5.787-5.079-8.847a73.447 73.447 0 0 1-3.593-8.978 71.036 71.036 0 0 1-2.178-8.504c-.664-3.392-1.052-6.834-1.219-10.286-.129-3.17-.07-6.349.218-9.51a70.893 70.893 0 0 1 1.32-8.7 71.51 71.51 0 0 1 2.613-9.123 71.948 71.948 0 0 1 3.445-7.993c1.422-2.838 3.057-5.563 4.84-8.188 1.655-2.383 3.428-4.688 5.358-6.855 2.267-2.584 4.739-4.983 7.351-7.214 2.43-2.041 4.976-3.944 7.655-5.646a71.737 71.737 0 0 1 7.51-4.198 73.629 73.629 0 0 1 9.052-3.617c2.864-.912 5.782-1.673 8.74-2.21 3.142-.618 6.33-.945 9.523-1.15l3.382-.087z"
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 0.875042,
filter: "url(#c)",
stopColor: "#000",
}}
d="M103.466 71.602a53.45 53.45 0 0 0-53.45 53.45 53.45 53.45 0 0 0 53.45 53.452 53.45 53.45 0 0 0 53.45-53.451 53.45 53.45 0 0 0-53.45-53.45zm-.162 5.135a48.243 48.243 0 0 1 19.067 3.85c7.922 3.351 14.928 8.893 20.024 15.843a48.39 48.39 0 0 1 9.046 22.859c.347 2.861.42 5.735.252 8.617a48.202 48.202 0 0 1-2.324 12.199 49.208 49.208 0 0 1-2.66 6.493 49.818 49.818 0 0 1-3.314 5.65 49.033 49.033 0 0 1-3.575 4.62 49.783 49.783 0 0 1-4.635 4.627c-1.508 1.296-3.079 2.524-4.735 3.625a48.778 48.778 0 0 1-5.927 3.417 49.485 49.485 0 0 1-6.028 2.426 48.2 48.2 0 0 1-17.989 2.307c-2.15-.131-4.29-.409-6.404-.823a48.112 48.112 0 0 1-5.791-1.527 48.158 48.158 0 0 1-6.486-2.675 49.237 49.237 0 0 1-5.599-3.294 48.617 48.617 0 0 1-9.202-8.181c-1.304-1.517-2.54-3.098-3.646-4.766a48.178 48.178 0 0 1-3.44-5.994 49.756 49.756 0 0 1-2.435-6.081 48.122 48.122 0 0 1-1.476-5.761 48.443 48.443 0 0 1-.825-6.968c-.087-2.148-.048-4.301.147-6.442a48.443 48.443 0 0 1 2.664-12.074 48.74 48.74 0 0 1 2.335-5.415 48.75 48.75 0 0 1 3.279-5.547 48.818 48.818 0 0 1 3.629-4.644 48.575 48.575 0 0 1 4.98-4.887 48.618 48.618 0 0 1 5.185-3.825 48.597 48.597 0 0 1 5.087-2.843 49.878 49.878 0 0 1 6.133-2.45 47.566 47.566 0 0 1 5.921-1.498c2.128-.419 4.288-.64 6.451-.78l2.291-.058z"
/>
</g>
</svg>
)
export default PlaneIcon
我正在尝试使用它的页面：
import PlaneIcon from '../img/PlaneIcon'
export default function World() {
return(
<div>
<PlaneIcon c1="#f0dda8" c2="#fcba03" cg="#fff2cf" />
</div>
)
}
next.config.js:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
})
return config
},
}
这非常尴尬，但我想我会分享这个只是为了让任何像我一样健忘的人都能找到这个 - 组件文件只是没有 .js 文件扩展名，因此为什么 webpack 不知道要做什么用它来做。
我已经从 SVGR 游乐场页面自动转换了一个 SVG 反应组件，并将其放入我的项目中（以及安装 @svgr/webpack 并按照指示设置配置）- 尝试时加载页面，出现以下错误：
./img/PlaneIcon
Module parse failed: Unexpected token (2:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const PlaneIcon = (props) => (
> <svg
| width={687.135}
| height={687.135}
Import trace for requested module:
./pages/world.js
我试过寻找解决方案，但大多数事情似乎都集中在如何加载 .svg 文件上（这似乎也是 next.config.js 文件正在处理的内容）——我没有看到表明 jsx 中的内联 svg 甚至应该需要一个 webpack 加载器，尽管我在使用 next + react 方面还很陌生，所以我可能只是误解了 - 任何帮助都会非常感激。
SVG 组件：
const PlaneIcon = (props) => (
<svg
width={687.135}
height={687.135}
viewBox="0 0 181.804 181.804"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<defs>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="a"
x={-0.096}
y={-0.096}
width={1.191}
height={1.191}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="b"
x={-0.076}
y={-0.076}
width={1.152}
height={1.152}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
<filter
style={{
colorInterpolationFilters: "sRGB",
}}
id="c"
x={-0.112}
y={-0.112}
width={1.225}
height={1.225}
>
<feColorMatrix type="saturate" values={1} result="result91" />
<feComposite
in2="result91"
result="result15"
operator="arithmetic"
k2={0.4}
k1={0.3}
k3={0.3}
/>
<feGaussianBlur in="result15" result="result8" stdDeviation={5} />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 50 0" />
<feComposite in2="SourceGraphic" operator="in" result="result13" />
<feComposite
in2="result13"
k3={0.3}
k1={0.3}
k2={0.4}
operator="arithmetic"
in="result15"
result="result6"
/>
<feFlood floodColor={props.cg} floodOpacity={1} result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" />
</filter>
</defs>
<g transform="translate(-12.564 -34.15)">
<circle
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: props.c2,
strokeWidth: 1.07236,
strokeOpacity: 1,
filter: "url(#a)",
stopColor: "#000",
}}
cx={103.466}
cy={125.053}
r={65.504}
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 1.29171,
filter: "url(#b)",
stopColor: "#000",
}}
d="M103.466 46.15a78.902 78.902 0 0 0-78.902 78.903 78.902 78.902 0 0 0 78.902 78.902 78.902 78.902 0 0 0 78.902-78.902 78.902 78.902 0 0 0-78.902-78.902zm-.239 7.58a71.214 71.214 0 0 1 28.145 5.683c11.695 4.948 22.038 13.129 29.56 23.387 7.28 9.88 11.906 21.623 13.354 33.744.512 4.224.619 8.467.371 12.72a72.722 72.722 0 0 1-1.214 9.533 71.157 71.157 0 0 1-2.216 8.475 72.638 72.638 0 0 1-3.927 9.586 73.54 73.54 0 0 1-4.892 8.339 72.379 72.379 0 0 1-5.277 6.821 73.484 73.484 0 0 1-6.843 6.83c-2.226 1.913-4.544 3.726-6.99 5.351-2.787 1.894-5.725 3.56-8.749 5.044-2.887 1.378-5.854 2.592-8.898 3.581a71.154 71.154 0 0 1-8.496 2.215 72.37 72.37 0 0 1-9.513 1.206c-2.845.16-5.701.164-8.545-.015a72.136 72.136 0 0 1-9.455-1.215c-2.888-.586-5.753-1.315-8.547-2.255a71.089 71.089 0 0 1-9.574-3.948 72.68 72.68 0 0 1-8.266-4.863 71.765 71.765 0 0 1-6.812-5.285 72.684 72.684 0 0 1-6.772-6.791c-1.925-2.24-3.749-4.574-5.382-7.036-1.911-2.817-3.59-5.787-5.079-8.847a73.447 73.447 0 0 1-3.593-8.978 71.036 71.036 0 0 1-2.178-8.504c-.664-3.392-1.052-6.834-1.219-10.286-.129-3.17-.07-6.349.218-9.51a70.893 70.893 0 0 1 1.32-8.7 71.51 71.51 0 0 1 2.613-9.123 71.948 71.948 0 0 1 3.445-7.993c1.422-2.838 3.057-5.563 4.84-8.188 1.655-2.383 3.428-4.688 5.358-6.855 2.267-2.584 4.739-4.983 7.351-7.214 2.43-2.041 4.976-3.944 7.655-5.646a71.737 71.737 0 0 1 7.51-4.198 73.629 73.629 0 0 1 9.052-3.617c2.864-.912 5.782-1.673 8.74-2.21 3.142-.618 6.33-.945 9.523-1.15l3.382-.087z"
/>
<path
style={{
opacity: 0.61747,
fill: props.c1,
fillOpacity: 1,
stroke: "none",
strokeWidth: 0.875042,
filter: "url(#c)",
stopColor: "#000",
}}
d="M103.466 71.602a53.45 53.45 0 0 0-53.45 53.45 53.45 53.45 0 0 0 53.45 53.452 53.45 53.45 0 0 0 53.45-53.451 53.45 53.45 0 0 0-53.45-53.45zm-.162 5.135a48.243 48.243 0 0 1 19.067 3.85c7.922 3.351 14.928 8.893 20.024 15.843a48.39 48.39 0 0 1 9.046 22.859c.347 2.861.42 5.735.252 8.617a48.202 48.202 0 0 1-2.324 12.199 49.208 49.208 0 0 1-2.66 6.493 49.818 49.818 0 0 1-3.314 5.65 49.033 49.033 0 0 1-3.575 4.62 49.783 49.783 0 0 1-4.635 4.627c-1.508 1.296-3.079 2.524-4.735 3.625a48.778 48.778 0 0 1-5.927 3.417 49.485 49.485 0 0 1-6.028 2.426 48.2 48.2 0 0 1-17.989 2.307c-2.15-.131-4.29-.409-6.404-.823a48.112 48.112 0 0 1-5.791-1.527 48.158 48.158 0 0 1-6.486-2.675 49.237 49.237 0 0 1-5.599-3.294 48.617 48.617 0 0 1-9.202-8.181c-1.304-1.517-2.54-3.098-3.646-4.766a48.178 48.178 0 0 1-3.44-5.994 49.756 49.756 0 0 1-2.435-6.081 48.122 48.122 0 0 1-1.476-5.761 48.443 48.443 0 0 1-.825-6.968c-.087-2.148-.048-4.301.147-6.442a48.443 48.443 0 0 1 2.664-12.074 48.74 48.74 0 0 1 2.335-5.415 48.75 48.75 0 0 1 3.279-5.547 48.818 48.818 0 0 1 3.629-4.644 48.575 48.575 0 0 1 4.98-4.887 48.618 48.618 0 0 1 5.185-3.825 48.597 48.597 0 0 1 5.087-2.843 49.878 49.878 0 0 1 6.133-2.45 47.566 47.566 0 0 1 5.921-1.498c2.128-.419 4.288-.64 6.451-.78l2.291-.058z"
/>
</g>
</svg>
)
export default PlaneIcon
我正在尝试使用它的页面：
import PlaneIcon from '../img/PlaneIcon'
export default function World() {
return(
<div>
<PlaneIcon c1="#f0dda8" c2="#fcba03" cg="#fff2cf" />
</div>
)
}
next.config.js:
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
})
return config
},
}
这非常尴尬，但我想我会分享这个只是为了让任何像我一样健忘的人都能找到这个 - 组件文件只是没有 .js 文件扩展名，因此为什么 webpack 不知道要做什么用它来做。