fs dependency not found

[ferdiesletering]

I've follow the instructions to add the dotenv module. When I run npm run dev I'm getting the following error:

This dependency was not found:

• fs in ./node_modules/@nuxtjs/dotenv/dist/index.js

To install it, you can run: npm install --save fs

Digging into this npm package its seems to be a security-holder package. How to solve the error?

_{This question is available on Nuxt.js community (#c11)}

[tobiasfrei]

same issuse here for fs '0.0.1-security':

`This dependency was not found:

• fs in ./modules/read-dir.js

To install it, you can run: npm install --save fs Server listening on http://127.0.0.1:3000`

node 8.9.4 npm 5.7.1

[JulienTant]

Can you guys help me reproduce this ? I've just tried with npm & yarn, I just can't reproduce :(

[phikhi]

@s-ferdie @tobiasfrei

You could try updating node.

I had that issue a while ago. Not in a nuxt project, but in a classic webpack app. I found that trick somewhere on github that worked for me.

So try adding a config.node object inside the build.extend function of your nuxt.config.js :

build: {
    extend (config, { isDev, isClient }) {

       config.node = {
            fs: 'empty'
        }

       // ....
    }
}

After that if you get the same error, but for other dependencies, like net or tls. You can add them as well in the same config.node

[JulienTant]

@phikhi thank you so much for helping on this! ❤️

[JulienTant]

If you need more help about that, please reopen.

[ChristopherDosin]

I solved this because i added dotenv to the devDependencies instead of to the dependencies.

[nicroto]

The snippet above is not syntactically correct. To save someone some time, here it is (of course the ... are also not syntactically correct, they're just there to guide you where you place this):

// nuxt.config.js

export default {

    ...

    build: {

        ...

        extend: function (config, {isDev, isClient}) {

            config.node = {

                fs: "empty"
            };
        }
    },

    ...
};

[phikhi]

@nicroto

The snippet above is not syntactically correct.

Why ?

[valdoryu]

@phikhi Because you wrote config.node: { while correct syntax would be config.node = {

[ktiedt]

Seeing this same error with latest Node LTS + Nuxt 2.20 and the above mentioned config change does not fix it.

[gomezmark]

@ktiedt

same on my end. im using nuxt 2.4

Have you solve this?

[ktiedt]

@gomezmark I dropped Nuxt like it was hot.. have gotten very little support from the nuxt community regarding typescript, so it just wasn't worth my time to add a 3rd party project dependency into my workflow that has potential for massive delays in moving forward with upgrades.

[ascottmccauley]

Same error here when doing build. nuxt 2.4.0 @nuxt/dotenv 1.3.0 ( as dependency, not devDependency)

adding config.node = { fs: "empty" }; did not fix it.

[Samuelfaure]

Same error with nuxt 2.4.0 The trick up there config.node={fs:empty} helped but I still have one warning from vuetify-loader

[drewbaker]

I got this today on a fresh install too.

* fs in ./node_modules/dotenv/lib/main.js                                                                                       friendly-errors 12:16:43

[J0ssue]

this sucks I cant seem to figure it out have the same issue and theres no information about it anywhere im using gridsome with vue and for some reason it doesnt work

[chadwtaylor]

Am hitting the same issue. npm-installing fs does not work and it's because it's already part of the node package. I also need fs to load a text file (eg: graphql schema).

[jhull]

Any word on this? Getting the same problem - trying to call fs within a plugin...

[drewbaker]

The solution by @nicroto above solved it for me.

[nirokun]

I had to restart the server after changing the config and it works for me. But, i have a problem calling "fs" functions on one node_modules. "fs.writeFileSync is not a function"

[jaslocum]

I used the solution by @nicroto above as well. However, fs.readFileSync was needed to read a cert in my nuxt.config.js. fs.readFileSync was not defiled when the code was being run in the browser, but it worked fine when being executed on the node server. I used the following to determine if the code was being executed on the server. I couldn't use this.$isServer because it wasn't defined yet when nuxt.config.js file is being executed.

if (typeof fs.readFileSync === 'function') { ... do stuff here }

[abernh]

via https://github.com/webpack-contrib/css-loader/issues/447 this seems not to be a nuxt issue but a webpack issue and it is "solved" by adding the "node:fs:empty" solution to the webpack config parameters.

This also means @J0ssue that this issue is solved for gridsome by adding the following to the gridsome.config.js

module.exports = {
  ...
  configureWebpack: {
    node: {
      fs: "empty"
    }
  }

[KentChun33333]

Just having a similar issue, and solve it by adding config.node = { fs: "empty"} into the build section in nuxt.config.js. Thanks ~ @nicroto, @abernh

   build: {
    /*
    ** You can extend webpack config here
    */

    extend (config, ctx) {
        config.node = {
            fs: "empty"
        };
    }
  }

[bitttttten]

Also this happens if you just try and use dotenv in nuxt.config.js, like:

import { config } from 'dotenv'

const { parsed } = config()

Which is also solved with the "fs empty" fix.

Is this a safe patch? What if some nuxt modules need fs? Is it better to guard this with:

if (!ctx.isServer) config.node.fs = "empty"

Or something similar?

[heavenkiller2018]

I have the same problem, and fixed it by KentChun33333's resolution.

[anh-collab]

I have tried all the solutions mentioned but I still get fs.readFileSync() not a function error, which prevents my app from loading correctly. Anyone can help?

[donmb1]

after adding to build block I also get

dotenv.js?3b0e:10 Uncaught TypeError: fs.existsSync is not a function
    at Object.eval (dotenv.js?3b0e:10)
    at eval (dotenv.js:20)
    at Object../plugins/dotenv.js (app.js:1334)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (index.js:56)
    at Module../.nuxt/index.js (app.js:251)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at Module.eval (client.js:55)

[nisharmultani]

add this in your nuxt-config.js build: { extend (config, { isDev, isClient }) {

config.node = {
     fs: 'empty'
 }

}},