CODEWITHSUNDEEP
node.jswebpacknext.jsfsdotenv
Nenson
Nenson

Reputation: 173

Can't resolve 'fs' in nextjs with custom express server

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.

Upvotes: 2

Views: 9502

Answers (2)

Teej
Teej

Reputation: 12873

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

Upvotes: 2

Nenson
Nenson

Reputation: 173

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
  },
})

Upvotes: 2

Related Questions