203

Oke, I upgraded Angular from 6 to 8. But I stil get errors.

I found on internet a solution that for a lot of users helped. But in this case it doesn't helped me.

So my package.json file looks like this:

{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "fs": "0.0.1-security",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

And my b tsconfig.json file looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
}

But I still get these errors:

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/node-modules-paths.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'

I found a possible solution, that you have to put some configuration in one of the node_modules. But I think that is not a good solution. Because if you remove all the imports and then install again the imports your configurations are gone.

Thank you

Oke, I removed the

 "fs": "0.0.1-security",

I deleted all the packes(node_modules) and did a npm install.

But now I get this:

(node:13880) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
Binary found at C:\Source\nien\vital10-frontend\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> [email protected] postinstall C:\Source\nien\vital10-frontend
> node patch-webpack.js

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_25_46_184Z-debug.log
PS C:\Source\nien\vital10-frontend>

and my package.json file looks like this now:

{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

Still get this errrors:

(node:15956) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_59_04_891Z-debug.log
PS C:\Source\nien\vital10-frontend>

i Still get this three errros:

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'
i ｢wdm｣: Failed to compile.
Improve this question
3
  • have you tried removing "fs": "0.0.1-security", from your package.json? Commented Jul 23, 2019 at 10:20
  • can you run "npm audit fix" Commented Jul 23, 2019 at 10:24
  • Yes, I can run that, but doenst solve it Commented Jul 23, 2019 at 12:08

25 Answers 25

Reset to default
239

The error is because of angular-cli does not support modules in node like "fs" and "path". (Issue)

Add the following to the root of the "package.json" file.

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

Angular apps such as the ones Angular CLI creates are browser apps. fs isn't available on the browser, it's only available on node apps.

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Still getting the error. I'm using Angular 10. Electron 10.1 Where should I paste your code? in the root node? or within the "dependencies" node?
Did you check packages.json file?
I got this error while trying to use the firebase/testing module in Angular 10 tests. This solved it for me, except I had to include a few more libraries so it ended up being: "browser": { "fs": false, "path": false, "os": false, "net": false, "tls": false }
Isn't the file named package.json and not packages.json? (singular) - Doesn't work with Webpack 5.
didn't work for me... I am using react
|
105

For Webpack > 5
update webpack.config.js

module.exports = {
    ...
    resolve: {
        fallback: {
            "fs": false
        },
    }
}

Can't resolve 'fs' when bundle with webpack #447

Improve this answer

4 Comments

It seems to be working for some people but it's not working for me, using Next.js v10.2.
How can we configure that for karma to provide empty or simulated modules for the testing environment?
working for me with cra 5 and customize-cra
this doesn't work with newer versions of React because React controls webpack
48

For me the solution was to add this to the webpack config:

config.node = {
  fs: 'empty',
}

Another solution if you use NuxtJS:

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},

If you use NextJS (not tested, please confirm that it works in comments):

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.node = {
    fs: 'empty'
  }
  return config
},

In other cases, please refer to Anjana Silva post. An edit of your package.json file can do the job!

Improve this answer

5 Comments

This miraculously worked for me. I am using Webpack through NextJS (not NuxtJS).
It worked also for me, using webpack for storybook in a monorepo using nx and npm/yarn workspaces. Thanks!
NB: I found webpack.config.js in /node_modules/react_scripts/config/ folder.
This Nuxt solution worked for me
NextJS solution not working. Error [ValidationError]: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration[0].node has an unknown property 'fs'.
38

For NextJS 12: next.config.js

module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,

    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          "fs": false,
          "path": false,
          "os": false,
        }
      }
      return config
    },
  }
}
Improve this answer

2 Comments

For anyone trying to follow dev.to/adrai/… to achieve i18n on Nextjs's SSG, this is the fix for the can't resolve fs issue!
nextjs.org/docs/app/api-reference/next-config-js
26

tl;dr

For people transpiling for Node.js: add target: node to the webpack.config.js file.

Explanation

I know this is an Angular question but those who are transpiling for Node.js have to keep in mind that by default, Webpack transpiles for browser targets, where you don't have modules provided only by Node.js. If your environment where you will be running the transpiled code is indeed Node.js then just mark it in the config file with target: node.

Improve this answer

Comments

7

Just add {node:'empty'} to your webpack.config file.

Improve this answer

2 Comments

What if I don't have a webpack.config file lol
I did exactly as you said. I added a new line at the bottom of my webpack config file and put { node: 'empty' } on the last line. Somehow this didn't work! :-P Think you could give us a little more instruction there?
5

For anyone using laravel 8 with laravel-mix ^5

mix.webpackConfig({
    resolve: {
        fallback: { fs: false }
    }
});

This one is for webpack < 5 : mix.webpackConfig({ node: { fs: 'empty', } })

add this on your webpack.mix.js

Improve this answer

Comments

4

I'm using Nuxt.JS What worked for me was using @thisismyname solution, and adding it to nuxt.config.js, like this:

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},
Improve this answer

Comments

4

I was getting the same error, but it was due to my mistake, since I am using axios for a network request, but a some point in my app I typed redirect and pressed enter and my code completion imported the 'import {redirect} from "next/dist/next-server/server/api-utils";' Removing this line allowed me to continue with 'next build'.

See this link for reference: https://github.com/vercel/next.js/issues/9768

Improve this answer

1 Comment

well, this just saved me a ton of time. Apparently VSCode autocompletion added "import { response } from "express"; " at the top of my file and I didn't notice. Thank you!!
4

Can you try these steps?

  1. Delete node_modules
  2. Delete package-lock.json
  3. Remove "fs": "0.0.1-security" from package.json
  4. npm install --save
Improve this answer

6 Comments

Oke, I did that all. But still get the errors. See my updated post
And I see that the package-lock.json also don re created anymore
Do you have other suggestions?
There is some change in updated version of fs, can you share the line which uses fs? It is supposed to be in gulp build file, also please specify the version of node JS you use, even that could be a problem
@mightycodeNewton Did you ever figure this out? I'm having the same issue and having found a way around it yet.
|
3

For those who are using react or next js. It might happen due to an auto import for json from express!

import { json } from 'express'

So, just make sure that this line was not auto imported.

Improve this answer

1 Comment

Well I did not import json from express but response form express!. And man I did everything like config-overrides and node modules webpack configs but as soon as i removed response. It worked. That one line only made me go into 7 hours of debugging mode. Because it helped so upvoting it. Thank you Mohammad :)
3

Use fs server-side so if you're using NextJS you can use it in functions such as getStaticProps.

Improve this answer

1 Comment

I'm getting this in nextjs after installing glsl plugin for babel npmjs.com/package/babel-plugin-glsl
2

Add somewhere close to the bottom directly above

devtool: options.devtool ...

node: { fs: 'empty' },

This will cause the webpack to ignore fs dependencies.

i.e.

resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  node: { fs: 'empty' },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
});
Improve this answer

1 Comment

i.e. add node: { fs: 'empty' }, in webpack config
2

For the Electron's renderer process, change your target in the webpack config file like this:

target: 'electron-renderer'

for more about target option of webpack for the Electron, refer to this page: https://webpack.js.org/configuration/target/

Improve this answer

Comments

1

An issue I've encountered was someone added node to the tsconfig.spec.json.

Removing that resolved the issue.

{
  "compilerOptions": {
     "types": [
        ...
        "node", // Remove this line
     ]
  }
}
Improve this answer

1 Comment

Thank you! This worked for me in combination with adding "browser": { "fs": false } to package.json.
1

I simply fixed the application (the root cause) and the error was gone.

E.g. vscode inserted at the top of my index.tsx (CSR) some thing like import register from './api/register' probably by "auto-completion" because there is actually a pages/api/register.ts, which in turn pulls in a module (here nodemailer), which requires the 'fs' module. I removed this wrong line and the error was gone.

The reported error was

...
wait  - compiling / (client and server)...
error - ./node_modules/nodemailer/lib/dkim/index.js:10:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/nodemailer/lib/mailer/index.js
./node_modules/nodemailer/lib/nodemailer.js
...
./pages/api/register.ts
./pages/index.tsx

I guess, in the client/web browser there is no 'fs' module available and therefore the compiler excludes it from its list of known modules (or something like that).

So my conclusion: If one gets this error, it is possibly a client side rendered code snippet, which pulls in direct or indirect another module, which requires 'fs'. In this case adjusting the webpack config with "fs: empty" etc. (e.g. via next.config.js - throws an error in my case) may work, but probably hides the real problem.

Improve this answer

2 Comments

could you share your next.config.js?
Yepp: next.config.js
0

I have the same issue. But after renaming a folder of mine from c# to csharp, the problem gone.

Improve this answer

Comments

0

For Laravel Mix (^4.0), i solved with:

mix.webpackConfig({
    "node": {
        fs: 'empty',
    }
});

in webpack.mix.js

Improve this answer

2 Comments

And for Laravel Mix 6 ?
For laravel mix ^ 5 ` mix.webpackConfig({ resolve: { fallback: { fs: false } } }); `
0

its webpack behavior for non react app and you need to add any error returns to external object in webpack config. for me both 'react-native-fs' and 'fs' itself have been showing in error logs. add these then rebuild externals: { 'react-native-fs': 'reactNativeFs', 'fs': 'reactNativeFs'}

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
0

I received the error because I required electron from within Angular and tried to use an electron function. So for example instead of doing something like:

const { dialog } = require('electron');

Use IPC to send a message to the electron process:

import { IpcRenderer, IpcRendererEvent } from 'electron';
Improve this answer

Comments

0

If you're coming from a vuejs / nuxtjs project, check if you don't accidentally added this to your vue page / component:

import { debug } from "webpack";

This got accidentally added when I wanted to add debugger to my page and by removing that my build / project worked again.

Improve this answer

Comments

0

Not sure who needs to see this, I has this error in my docusaurus project, I spent a couple of hours debugging the project and found that this issue was due to one of the imports Removing this import import siteConfig from '../../../docusaurus.config'; fixed the issue.

In my project, I was using customFields and imported docusaurus.config.js as below

import siteConfig from '../../../docusaurus.config';

...
export default function FeaturedList(props) {
    var localPosts = siteConfig.customFields.allPosts;

and fixed it by using useDocusaurusContext

import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

....
export default function FeaturedList(props) {
    const { siteConfig } = useDocusaurusContext();
Improve this answer

Comments

0

In my Next.js app I too got the same error and it was hard to figure out the cause. After some analysis I found that I was using an environment variable (API_PATH) in an Effect (useEffect()) running on the Client side (on component mount):

process.env.API_PATH

I fixed it by changing the variable name to have NEXT_PUBLIC_ prefix:

process.env.NEXT_PUBLIC_API_PATH

Non-NEXT_PUBLIC_ environment variables are only available in the Node.js. Reference: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Improve this answer

Comments

0

Storybook v7

For those using Storybook v7, I was able to fix it by adding this in my .storybook/main.ts:

const config: StorybookConfig = {
  // ...your config
  async webpackFinal(config) {
    config.resolve = {
      ...config.resolve,
      fallback: {
        // add any other options you need below
        net: false,
        fs: false,
        tls: false,
        child_process: false,
      },
    }
  }
}
Improve this answer

Comments

-1

although for Next.js 14 this is the solution i got it from Google PaLM AI: The error you're encountering, "can't resolve 'fs'", is because Next.js uses a bundler called Webpack to compile your code for the browser. Webpack doesn't support Node.js built-in modules like fs out of the box. To use fs in your Next.js project, you need to install a package that provides a polyfill for fs.

Here's how you can install and use the fs polyfill:

1-Install the fs-extra package: npm install fs-extra --save 2-Install the url module: npm install url --save 3-Import the fs-extra package in your code: import fs from 'fs-extra'; 4-Use the fs-extra package instead of the Node.js built-in fs module:

const template = fs.readFileSync(path.join(__dirname, "./template.html"), 
"utf8");

5-Update the next.config.js file add the following code below:

module.exports = {
  resolve: {
    fallback: {
      url: require.resolve("url/"),
    },
  },
};

and i hope this work for you too.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.