настройка конфигурации webpack в NextJS (next.config.js )

#node.js #reactjs #webpack #next.js #export-to-excel

#node.js #reactjs #webpack #next.js #экспорт в Excel

Вопрос:

Я работаю с 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:

У меня была такая же проблема, решение для меня было таким:

  1. Установите эти пакеты (если вы установили, проигнорируйте это)

npm install file-saver -сохранить

npm установить xlsx

npm install —save-dev json-loader

  1. Добавьте это в свой 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
      }
    
    }