From 86ef7b2c7c9e8258743db7fedb7a25d6d57c3d15 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 10:02:52 -0700 Subject: [PATCH 1/6] Remove browser key --- package.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/package.json b/package.json index 490bd81b..a2f8921b 100644 --- a/package.json +++ b/package.json @@ -55,12 +55,6 @@ "tar": "^6.1.11", "typescript": "^4.8.4" }, - "browser": { - "fs": false, - "path": false, - "os": false, - "crypto": false - }, "engines": { "node": ">=12" } From 7968a7f520b31113bada007a91027c152ae7c966 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 10:19:14 -0700 Subject: [PATCH 2/6] Update README --- CHANGELOG.md | 6 ++++++ README.md | 14 ++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89208a99..925d2fc3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. See [standa ## [Unreleased](https://github.com/motdotla/dotenv/compare/v16.1.0...master) +## [16.1.3](https://github.com/motdotla/dotenv/compare/v16.1.2...v16.1.3) (2023-05-31) + +### Removed + +- Removed `browser` key in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, `fs`, and `crypto`. [Browserify](https://browserify.org/) provides these. + ## [16.1.2](https://github.com/motdotla/dotenv/compare/v16.1.1...v16.1.2) (2023-05-31) ### Changed diff --git a/README.md b/README.md index 3348581c..0c89d20f 100644 --- a/README.md +++ b/README.md @@ -525,6 +525,20 @@ There are two alternatives to this approach: 1. Preload dotenv: `node --require dotenv/config index.js` (_Note: you do not need to `import` dotenv with this approach_) 2. Create a separate file that will execute `config` first as outlined in [this comment on #133](https://github.com/motdotla/dotenv/issues/133#issuecomment-255298822) +### Why am I getting the error `Module not found: Error: Can't resolve 'crypto|fs|os|path'`? + +You are using dotenv on the front-end. Webpack < 5 used to include polyfills for core Node.js modules like `crypto`, `fs`, `os`, and `path`. So today, you need to install and configure a polyfill for it. + +```bash +npm install crypto-browserify +``` + +And then configure it in your webpack config. + +```json +resolve.fallback: { "crypto": require.resolve("crypto-browserify") } +``` + ### What about variable expansion? Try [dotenv-expand](https://github.com/motdotla/dotenv-expand) From ec5eef88cdadea534f452ec1355c5df5a9fe5a18 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 10:21:22 -0700 Subject: [PATCH 3/6] Update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0c89d20f..99be4e28 100644 --- a/README.md +++ b/README.md @@ -527,7 +527,7 @@ There are two alternatives to this approach: ### Why am I getting the error `Module not found: Error: Can't resolve 'crypto|fs|os|path'`? -You are using dotenv on the front-end. Webpack < 5 used to include polyfills for core Node.js modules like `crypto`, `fs`, `os`, and `path`. So today, you need to install and configure a polyfill for it. +You are using dotenv on the front-end. Webpack < 5 used to include polyfills for core Node.js modules like `crypto`, `fs`, `os`, and `path`. It doesn't any longer, so these days you need to install and configure a polyfill for it. ```bash npm install crypto-browserify @@ -535,7 +535,7 @@ npm install crypto-browserify And then configure it in your webpack config. -```json +```js resolve.fallback: { "crypto": require.resolve("crypto-browserify") } ``` From bf7e6262470e62159321b15e236849b9d91eeaae Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 11:41:59 -0700 Subject: [PATCH 4/6] Default fs to false as it cannot be duplicated in the browser --- CHANGELOG.md | 2 +- package.json | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 925d2fc3..7311398f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file. See [standa ### Removed -- Removed `browser` key in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, `fs`, and `crypto`. [Browserify](https://browserify.org/) provides these. +- Removed `browser` key in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, and `crypto`. [node-polyfill-webpack-plugin](https://github.com/Richienb/node-polyfill-webpack-plugin) provides these. ## [16.1.2](https://github.com/motdotla/dotenv/compare/v16.1.1...v16.1.2) (2023-05-31) diff --git a/package.json b/package.json index a2f8921b..fb3258b9 100644 --- a/package.json +++ b/package.json @@ -57,5 +57,8 @@ }, "engines": { "node": ">=12" + }, + "browser": { + "fs": false } } From 0ab684dc0a41bccad853e3a29f699b0a6f329127 Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 11:58:10 -0700 Subject: [PATCH 5/6] Update README --- README.md | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 99be4e28..13f7e05a 100644 --- a/README.md +++ b/README.md @@ -525,19 +525,43 @@ There are two alternatives to this approach: 1. Preload dotenv: `node --require dotenv/config index.js` (_Note: you do not need to `import` dotenv with this approach_) 2. Create a separate file that will execute `config` first as outlined in [this comment on #133](https://github.com/motdotla/dotenv/issues/133#issuecomment-255298822) -### Why am I getting the error `Module not found: Error: Can't resolve 'crypto|fs|os|path'`? +### Why am I getting the error `Module not found: Error: Can't resolve 'crypto|os|path'`? -You are using dotenv on the front-end. Webpack < 5 used to include polyfills for core Node.js modules like `crypto`, `fs`, `os`, and `path`. It doesn't any longer, so these days you need to install and configure a polyfill for it. +You are using dotenv on the front-end and have not included a polyfill. Webpack < 5 used to include these for you. Do the following: ```bash -npm install crypto-browserify +npm install node-polyfill-webpack-plugin ``` -And then configure it in your webpack config. +Configure your `webpack.config.js` to something like the following. ```js -resolve.fallback: { "crypto": require.resolve("crypto-browserify") } -``` +require('dotenv').config() + +const path = require('path'); +const webpack = require('webpack') + +const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') + +module.exports = { + mode: 'development', + entry: './src/index.ts', + output: { + filename: 'bundle.js', + path: path.resolve(__dirname, 'dist'), + }, + plugins: [ + new NodePolyfillPlugin(), + new webpack.DefinePlugin({ + 'process.env': { + HELLO: JSON.stringify(process.env.HELLO) + } + }), + ] +}; +``` + +Alternatively, just use [dotenv-webpack](https://github.com/mrsteele/dotenv-webpack) which does this and more behind the scenes for you. ### What about variable expansion? From 080779a71aa7edf3f01f3abf13d158f6c66da79b Mon Sep 17 00:00:00 2001 From: Scott Motte Date: Wed, 31 May 2023 11:59:05 -0700 Subject: [PATCH 6/6] Update CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7311398f..6d380567 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ All notable changes to this project will be documented in this file. See [standa ### Removed -- Removed `browser` key in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, and `crypto`. [node-polyfill-webpack-plugin](https://github.com/Richienb/node-polyfill-webpack-plugin) provides these. +- Removed `browser` keys for `path`, `os`, and `crypto` in package.json. These were set to false incorrectly as of 16.1. Instead, if using dotenv on the front-end make sure to include polyfills for `path`, `os`, and `crypto`. [node-polyfill-webpack-plugin](https://github.com/Richienb/node-polyfill-webpack-plugin) provides these. ## [16.1.2](https://github.com/motdotla/dotenv/compare/v16.1.1...v16.1.2) (2023-05-31)