2

I add fs to my nextjs project and received the following error:

Module not found: Can't resolve 'fs' in '/Users/neven/Development/next-js/node_modules/dotenv/lib'

I found that to resolve this issue, I should add config.node = { fs: 'empty' } to my next.config.js file. The problem is that when I add that config param, dotenv plugin stops working, that is env variables are not loaded on client side.

This is my next.config.js file, which works without any issues.

const withCSS = require('@zeit/next-css')
const dotenv = require('dotenv')
const path = require('path')
const Dotenv = require('dotenv-webpack')

dotenv.config()

module.exports = withCSS({
  webpack: config => {
    config.plugins = config.plugins || []

    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    ]

    return config
  },
})

And then when I add fs: 'empty', it looks like this:

const withCSS = require('@zeit/next-css')
const dotenv = require('dotenv')
const path = require('path')
const Dotenv = require('dotenv-webpack')

dotenv.config()

module.exports = withCSS({
  webpack: config => {
    config.plugins = config.plugins || []

    config.node = {
      fs: 'empty'
    }

    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    ]

    return config
  },
})

Do you have any suggestions on how I could work this thing out?

Let me know in case additional details are needed.

2 Answers 2

2

I found out what the issue was; dotenv plugin is working correctly, but I was trying to get the variables on client side, and that is not possible in this way.

The solution to use env variables on client side is to add env: { EXAMPLE: 'helloWorld' } to next.config.js file.

const withCSS = require('@zeit/next-css')
const dotenv = require('dotenv')
const path = require('path')
const Dotenv = require('dotenv-webpack')

dotenv.config()

module.exports = withCSS({
  env: { EXAMPLE: 'helloWorld' },
  webpack: config => {
    config.plugins = config.plugins || []

    config.node = {
      fs: 'empty'
    }

    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true,
      }),
    ]

    return config
  },
})
1
  • I had the problem with import '@ testing-library / jest-dom / extend-expect'; which led to a missing node module fs during production build. ./node_modules/css/lib/stringify/source-map-support.js Module not found: Can't resolve 'fs' After I had integrated the Webpack configuration 1 to 1 into my next.config.js everything now works as intended.
    – scurrilus
    May 11, 2020 at 19:30
2

The issue here is that your client-side can't access the environment variables.

Started NextJS 9.4, you can use .env* files to add your environment variables.

For your client-side to get access access to the environment variables, you just need to prefix them with NEXT_PUBLIC_

NEXT_PUBLIC_YOUR_KEY="keykeykey"

These can be accessible with:

process.env.NEXT_PUBLIC_YOUR_KEY
1
  • I initially got confused that we only need to access the variables with the prefix but YOUR_KEY also needs the prefix NEXT_PUBLIC_ Thanks man!
    – iBobb
    Mar 4, 2021 at 0:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.