在NextJS中,当引用包含SVG的外部npm包时,如何构建?
我的下一个TJS项目(我们称之为主机)引用了另一个npm包(我们称之为包) svg在主机中定义时加载良好,但导入包失败,因为next尝试将svg解释为javascript。。。因此,在执行下一次构建时,我会遇到以下错误:在NextJS中,当引用包含SVG的外部npm包时,如何构建?,svg,webpack,babeljs,next.js,Svg,Webpack,Babeljs,Next.js,我的下一个TJS项目(我们称之为主机)引用了另一个npm包(我们称之为包) svg在主机中定义时加载良好,但导入包失败,因为next尝试将svg解释为javascript。。。因此,在执行下一次构建时,我会遇到以下错误: SyntaxError: Unexpected token '<' 很多细节: 下一个生成堆栈跟踪是: > Using external babel configuration > Location: "/Users/w/dev/TheHost/.babel
SyntaxError: Unexpected token '<'
很多细节:
下一个生成堆栈跟踪是:
> Using external babel configuration
> Location: "/Users/w/dev/TheHost/.babelrc"
Creating an optimized production build
Compiled successfully.
> Build error occurred
/Users/w/dev/TheHost/node_modules/ThePackage/build/assets/card_background.svg:1
<svg viewBox="0 0 860 382" fill="none" xmlns="http://www.w3.org/2000/svg">
^
SyntaxError: Unexpected token '<'
at Module._compile (internal/modules/cjs/loader.js:895:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/Users/w/dev/TheHost/node_modules/TheProject/build/card/style.js:14:47)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32) {
type: 'SyntaxError'
}
Automatically optimizing pages .%
下一个.config.js文件:
const withSourceMaps = require("@zeit/next-source-maps");
const withImages = require("next-images");
module.exports = withImages(
withSourceMaps({
env: { *** redacted *** },
publicRuntimeConfig: { *** redacted *** },
webpack: (config, options) => {
if (!options.isServer) {
config.resolve.alias["@sentry/node"] = "@sentry/browser";
}
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
})
);
nextjs svgr软件包版本如下:
var _mysvg = require("../path/to/the-svg.svg");
"next": "^9.2.1",
"next-images": "^1.3.0",
"@svgr/webpack": "^5.1.0",
"babel-eslint": "^10.0.3",
"babel-plugin-inline-react-svg": "^1.1.1",
该软件包使用以下输出配置(网页包)构建:
默认情况下,NextJS忽略
node\u模块
,因此您需要特别允许您的配置能够传输您的包。幸运的是,有人已经创建了一个NextJS插件来实现这一点:
我还建议使用来整理配置。最后,您的next.config.js将如下所示:
const withSourceMaps = require("@zeit/next-source-maps");
const withImages = require("next-images");
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['ThePackage']);
module.exports = withPlugins([
withTM,
[
withImages,
{
exclude: /\.svg$/
}
],
withSourceMaps
],
{
env: { *** redacted *** },
publicRuntimeConfig: { *** redacted *** },
webpack: (config, options) => {
if (!options.isServer) {
config.resolve.alias["@sentry/node"] = "@sentry/browser";
}
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
});
我还将svg排除在图像处理的
之外
为什么要使用babel插件内联svg
&@svgr/webpack
?@felixmosh,babel内联插件试图解决这个问题,希望它能从包中内联svg。但似乎没有什么不同。
entry: './src/index.js',
output: {
path: buildFolder,
filename: 'ThePackage.js',
library: 'ThePackage',
libraryTarget: 'umd', /* Note: umd */
umdNamedDefine: true
},
const withSourceMaps = require("@zeit/next-source-maps");
const withImages = require("next-images");
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['ThePackage']);
module.exports = withPlugins([
withTM,
[
withImages,
{
exclude: /\.svg$/
}
],
withSourceMaps
],
{
env: { *** redacted *** },
publicRuntimeConfig: { *** redacted *** },
webpack: (config, options) => {
if (!options.isServer) {
config.resolve.alias["@sentry/node"] = "@sentry/browser";
}
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
});