Не удается разрешить 'fs' в nextjs с помощью настраиваемого экспресс-сервера

Я добавляю fs в свой проект nextjs и получаю следующую ошибку:

Модуль не найден: не удается разрешить "fs" в "/ Users / neven / Development / next-js / node_modules / dotenv / lib"

Я обнаружил, что для решения этой проблемы я должен добавить config.node = {fs: 'empty'} в мой файл next.config.js. Проблема в том, что когда я добавляю этот параметр конфигурации, плагин dotenv перестает работать, то есть переменные env не загружаются на стороне клиента.

Это мой файл next.config.js, который работает без проблем.

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

А когда я добавляю fs: 'empty', это выглядит так:

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

Есть ли у вас какие-нибудь предложения, как я могу решить эту проблему?

Сообщите мне, если потребуется дополнительная информация.


webpack node.js next.js fs dotenv
person Nenson    schedule 02.04.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я выяснил, в чем проблема; Плагин dotenv работает правильно, но я пытался получить переменные на стороне клиента, и это невозможно.

Решение использовать переменные env на стороне клиента - добавить env: {ПРИМЕР: 'helloWorld'} в файл next.config.js.

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
  },
})
person Nenson    schedule 02.04.2020
comment
У меня возникла проблема с импортом '@ testing-library / jest-dom / extend-expect'; что привело к отсутствию модуля узла fs во время производственной сборки. ./node_modules/css/lib/stringify/source-map-support.js Модуль не найден: не удается разрешить 'fs'. После того, как я интегрировал конфигурацию Webpack с 1 по 1 в свой next.config.js, теперь все работает как задумано . - person scurrilus; 11.05.2020

arrow_upward
2
arrow_downward

Проблема здесь в том, что ваша клиентская сторона не может получить доступ к переменным среды.

Запущенный NextJS 9.4, вы можете использовать .env* файлы для добавьте переменные среды.

Чтобы ваша клиентская сторона могла получить доступ к переменным среды, вам просто нужно поставить перед ними префикс NEXT_PUBLIC_.

NEXT_PUBLIC_YOUR_KEY="keykeykey"

Они могут быть доступны с помощью:

process.env.NEXT_PUBLIC_YOUR_KEY
person Teej    schedule 03.02.2021
comment
Сначала я запутался, что нам нужен только доступ к переменным с префиксом, но YOUR_KEY также нуждается в префиксе NEXT_PUBLIC_ Спасибо, чувак! - person iBobb; 04.03.2021