setup webpack config in nextJS (next.config.js)

user_14696950 0
Viewed 1192

I'm working with NextJS and using react-data-export plugin to generate xls files. in the description it says :

This library uses file-saver and xlsx and using json-loader will do the magic for you.

///webpack.config.js
vendor: [
        .....
        'xlsx',
        'file-saver'
],
.....
node: {fs: 'empty'},
externals: [
    {'./cptable': 'var cptable'},
    {'./jszip': 'jszip'}
 ]

but I have no idea how to implement it and got error like this :

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
webpack next.js reactjs node.js export-to-excel
1 Answers

I had the same problem, the solution for me was this:

  1. Install this packages (if you installed, ignored this)

npm install file-saver --save

npm install xlsx

npm install --save-dev json-loader

  1. Add this to your 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
      }
    
    }
user_52257860
Related