找不到模塊：錯誤：無法解析“/node_modules/dotenv/lib”中的“fs”-創建反應應用程序

Question

我正在嘗試將 API 密鑰存儲在.env文件中。 我正在構建的應用程序是從create react app開始的，現在它拋出了這個錯誤：

Compiled with problems:X

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/x/Desktop/prog/x/node_modules/dotenv/lib'

ERROR in ./node_modules/dotenv/lib/main.js 3:13-28

Module not found: Error: Can't resolve 'path' in '/Users/x/Desktop/prog/x/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

ERROR in ./node_modules/dotenv/lib/main.js 5:11-24

Module not found: Error: Can't resolve 'os' in '/Users/x/Desktop/prog/x/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

我對 using.env 正確管理敏感數據非常陌生。 這是 my.env 文件的設置方式：

REACT_APP_key = '1234ABC'

這就是我所說的：

require('dotenv').config
const request = require('superagent')
const url = 'https://wordsapiv1.p.mashape.com/words/'

//dictionary
export function getDictionaryDefinition() {
  return request
    .get(`${url}dog`)
    .set('X-Mashape-Key', process.env.REACT_APP_key)
    .then((response) => {
      console.log(response)
    })
}

Answer 1

你不能在 React 應用程序中使用 dotenv。 瀏覽器中沒有“process.env”之類的東西。

但是，如果您堅持使用它，請查看像這樣的項目，它為 webpack 添加了 dotenv 支持。