在 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

NextJS 无法在域上禁用重定向

在带有 sass、css 和语义 ui 的 nextjs 中使用谷歌字体

如何从 nextjs 中的自定义服务器 console.log