- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 nextjs 项目(我们称之为 TheHost) 引用了另一个 npm 包 (我们称之为 ThePackage)。
在 TheHost 中定义时,SVG 加载良好,但导入 ThePackage 失败,因为 next 尝试将 svg 解释为 javascript...所以我在执行 next build
时收到以下错误:
SyntaxError: Unexpected token '<'
next build
.
var _mysvg = require("../path/to/the-svg.svg");
> 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 .%
{
"presets": [
"next/babel"
],
"plugins": [
"babel-plugin-styled-components",
"inline-react-svg"
]
}
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;
}
})
);
"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",
entry: './src/index.js',
output: {
path: buildFolder,
filename: 'ThePackage.js',
library: 'ThePackage',
libraryTarget: 'umd', /* Note: umd */
umdNamedDefine: true
},
最佳答案
NextJS 默认忽略 node_modules
,因此您需要特别允许您的配置能够转译您的包。幸运的是,有人已经创建了一个 NextJS 插件来允许这样做:https://github.com/martpie/next-transpile-modules
我还建议使用 Next Compose Plugins 来整理配置。最后,您的 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;
}
});
withImages
处理 SVG。
关于svg - 在 NextJS 中,引用包含 SVG 的外部 npm 包时如何构建?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60300372/
我已经为我的 NextJS 网站完全实现了 next-i18next。一切正常: 使用 i18next 中间件自动检测语言 使用语言选择按钮更改语言 仅在相关命名空间等中加载的翻译 但是,我想本地化路
nextjs 是如何处理 SEO 的?我试图通过从浏览器直接调用它 (localhost:8080/about) 来呈现页面,但 NGINX 返回 404。主页中嵌入的同一页面的链接有效,但无法使用
我有一个 react/nextjs 应用程序,我有 firebase.js 如下: import firebase from 'firebase/app' import 'firebase/auth'
我正在尝试将 Nextjs 与 graphql-tag/loader 集成,这是我的 next.config.js 文件: const withSass = require('@zeit/next-s
我使用的示例与文档使用的几乎相同。。我的完整代码(字面意思仅此而已):。当然,我可以使用reDirect()函数,但我需要将此重定向标记为永久重定向。。我研究了下一个/导航文件,其中没有permane
I use pretty the same example as documentation does.我使用的示例与文档使用的几乎相同。 My full code (literally no
为了部署 NodeJS,我使用 systemd 并配置/lib/systemd/system/[service_name].service 文件 ===========================
我只是尝试使用@sentry/nextjs 和 sentry 向导将 sentry 与 NextjS v12 集成,在集成 Sentry 之前在本地主机上一切正常,但是当我在 AWS Amplify
更新到 Nextjs 12.1.0 后,当我通过 api 路由调用 api 时,返回以下错误。我正在使用 aws amplify。 CloudFront 控制台返回以下错误: 我的 api 路由: c
我有一个简单的 nextjs 应用程序,在主页上我只显示一个包含 10 部电影的列表和一个按钮/链接,这会打开该电影的特定页面。在该页面上,我想显示该电影的所有内容。 我的第一种方法是像这样将电影 I
我正在开发 NextJS 应用程序,但我无法让 Image 组件正常工作。 正常的 img 元素使用与 Image 组件相同的 src 属性路径可以正常工作。 我的项目有标准的公用文件夹,里面有一个名
我是 NextJS 的新手,正在尝试弄清楚如何创建一个我可以随时分配不同值的全局变量。有人可以举一个简单的例子吗? (我知道全局可能不是最好的方法,但我仍然想知道如何设置全局变量)。 假设: _app
我有一个可通过以下 http://localhost(这是主应用程序的 url)访问的应用程序和另一个可通过 http://localhost/subapp(这是子应用程序的 url)访问的应用程序,
我在 Internet 上四处寻找解决此问题的方法,但仍未找到有效的方法。我尝试了以下状态管理工具: 使用上下文 终极版 坚持 后坐力 我希望我的 NextJS 站点在我单击一个简单按钮时更新每个页面
我在开发中发现重写代理到我的后端服务器: https://nextjs.org/docs/api-reference/next.config.js/rewrites rewrites: async (
我真的一直在努力了解如何在 nextjs 中处理环境变量,但我仍然不明白。我只是想从下面的代码中隐藏我的 API key 。据我了解,我只能通过使用 getServerSideProps 或 getS
我是 NextJS 的新手。我想知道 next/router 和 next/link 之间的典型变化和用例。 在各种情况下我应该使用哪一个?哪个做什么?例如,如果我想加载共享组件或在服务器端呈现的页面
我在 Next.js 中收到此错误: Error: The provided 'href' (/subject/[subject]) value is missing query values (su
我有外部目录 common我想将该目录中的 react 组件导入web-static .在 web-static我正在使用 nextjs。 目前我有这个错误:Module not found: Can
是否可以只为特定路由添加提供程序,而不是在下一个 js 中转到我的整个应用程序? my "pages" folder 我的上下文文件 [server.jsx] import { createConte
我是一名优秀的程序员,十分优秀!