在 nextJS (next.config.js) 中设置 webpack 配置
Posted
技术标签:
【中文标题】在 nextJS (next.config.js) 中设置 webpack 配置【英文标题】:setup webpack config in nextJS (next.config.js) 【发布时间】:2021-03-06 22:32:26 【问题描述】:我正在使用 NextJS 并使用 react-data-export 插件生成 xls 文件。 在它的描述中说:
这个库使用 file-saver 和 xlsx 并使用 json-loader 将为您施展魔法。
///webpack.config.js vendor: [ ..... 'xlsx', 'file-saver' ], ..... node: fs: 'empty', externals: [ './cptable': 'var cptable', './jszip': 'jszip' ]
但我不知道如何实现它并得到这样的错误:
The static directory has been deprecated in favor of the public directory. https://err.sh/vercel/next.js/static-dir-deprecated
Defining routes from exportPathMap
event - compiled successfully
> Ready on http://localhost:80 or http://localhost
> Ready on https://localhost:443 or https://localhost
event - build page: /menu_accounting/ReportGross
wait - compiling...
error - ./node_modules/react-export-excel/node_modules/xlsx/xlsx.js
Module not found: Can't resolve 'fs' in '/home/ahmadb/repos/lorry-erp/node_modules/react-export-excel/node_modules/xlsx'
Could not find files for /menu_accounting/ReportGross in .next/build-manifest.json
【问题讨论】:
【参考方案1】:我遇到了同样的问题,我的解决方案是这样的:
-
安装这个包(如果你安装了,忽略这个)
npm install file-saver --save
npm install xlsx
npm install --save-dev json-loader
-
将此添加到您的 nextjs.config.js
const path = require('path')
module.exports =
...
//Add this lines
webpack: (config, isServer ) =>
// Fixes npm packages that depend on `fs` module
if (!isServer)
config.node =
fs: 'empty'
return config
【讨论】:
以上是关于在 nextJS (next.config.js) 中设置 webpack 配置的主要内容,如果未能解决你的问题,请参考以下文章
Firebase 存储图像未显示在 nextjs 应用程序中
如何在带有 TypeScript 的 next.config.js 中使用 i18n 和 next/image?
必须使用 import 加载 ES Module:E:\projects\weblog\next.config.js