Module not found: Can't resolve 'fs' in 'D:\.my-folder.\node_modules\fs-extra\lib'

[faisalahmedansari20]

I am trying to make app using next js. So i installed mongodb-stitch-server-sdk. But when import in my index.js file i get

Module not found: Can't resolve 'fs' in 'D:\simpliask\node_modules\fs-extra\lib' ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in 'D:\simpliask\node_modules\fs-extra\lib' at factory.create (D:\simpliask\node_modules\webpack\lib\Compilation.js:823:10) at factory (D:\simpliask\node_modules\webpack\lib\NormalModuleFactory.js:397:22) at resolver (D:\simpliask\node_modules\webpack\lib\NormalModuleFactory.js:130:21) at asyncLib.parallel (D:\simpliask\node_modules\webpack\lib\NormalModuleFactory.js:224:22) at D:\simpliask\node_modules\neo-async\async.js:2825:7 at D:\simpliask\node_modules\neo-async\async.js:6886:13 at normalResolver.resolve (D:\simpliask\node_modules\webpack\lib\NormalModuleFactory.js:214:25) at doResolve (D:\simpliask\node_modules\enhanced-resolve\lib\Resolver.js:184:12) at hook.callAsync (D:\simpliask\node_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (D:\simpliask\node_modules\tapable\lib\HookCodeFactory.js:32:10), :15:1) at resolver.doResolve (D:\simpliask\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:37:5) at hook.callAsync (D:\simpliask\node_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (D:\simpliask\node_modules\tapable\lib\HookCodeFactory.js:32:10), :15:1) at hook.callAsync (D:\simpliask\node_modules\enhanced-resolve\lib\Resolver.js:238:5) at _fn0 (eval at create (D:\simpliask\node_modules\tapable\lib\HookCodeFactory.js:32:10), :12:1) at resolver.doResolve (D:\simpliask\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)

on console it says

Failed to compile. ./node_modules/fs-extra/lib/index.js Module not found: Can't resolve 'fs' in 'D:\simpliask\node_modules\fs-extra\lib'

[phillipmalboeuf]

Hey @faisalahmedansari20, I believe this relates to SSR and the balance between the mongodb-stitch-server-sdk and the mongodb-stitch-browser-sdk. We've discussed this here #186 and I came up with a weird solution that works for me, and it might apply to you. Let me know!

[faisalahmedansari20]

Hey @phillipmalboeuf thanks for help, I tried your example in next.js and put alias in my package.json. And changed reference to server SDK wherever, I have required it. And still i face same issue as ./node_modules/fs-extra/lib/index.js Module not found: Can't resolve 'fs' in 'D:\simpliask\node_modules\fs-extra\lib'

here is how my package.json looks like. Please correct me if i did something wrong.

{ "name": "simpliask", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start", "pack": "webpack" }, "keywords": [], "author": "", "license": "ISC", "alias": { "mongodb-stitch-server-sdk": "mongodb-stitch-browser-sdk" }, "dependencies": { "@zeit/next-css": "^1.0.1", "bootstrap": "^4.3.1", "mongodb-stitch-browser-sdk": "^4.3.2", "mongodb-stitch-server-sdk": "^4.3.2", "next": "^8.0.3", "react": "^16.8.6", "react-bootstrap": "^1.0.0-beta.6", "react-dom": "^16.8.6", "yup": "^0.27.0" } }

[phillipmalboeuf]

@faisalahmedansari20 I looked into it for next.js and you'll need to add some webpack configs, wrote down an example in #186!

[faisalahmedansari20]

Hey @phillipmalboeuf Thank you so much. I am facing little issue. As i am new to node js i am unable to understand this issue.

In my next.config.js file I used

module.exports = withCSS()

and when i replaced it by

module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { if (!isServer) { config.resolve.alias = { ...config.resolve.alias, 'mongodb-stitch-server-sdk': 'mongodb-stitch-browser-sdk' } } return config; },withCSS() };

i get Unexpected token exception. how can fix this ?

[faisalahmedansari20]

Using this i was able to add multiple plugins. Let me know if i am on wrong path. However this is working for me thanks.

[phillipmalboeuf]

This is probably the wrong thread to discuss something unrelated to stitch, but @faisalahmedansari20 the withCSS function is meant to wrap the webpack config, like so (docs):

const withCSS = require('@zeit/next-css')
module.exports = withCSS({
    webpack(config, options) {
      // Further custom configuration here
      return config;
    }
  });

[faisalahmedansari20]

I found another work around by using browser attribute in package.json as

"dependencies": { "@zeit/next-css": "^1.0.1", "bootstrap": "^4.3.1", "mongodb-stitch-browser-sdk": "^4.3.2", "mongodb-stitch-server-sdk": "^4.3.2", "next": "^8.0.3", "react": "^16.8.6", "react-bootstrap": "^1.0.0-beta.6", "react-dom": "^16.8.6", "yup": "^0.27.0" }, "browser":{ "mongodb-stitch-server-sdk":false } }

and require as

typeof window !== 'undefined' ? browser sdk : server sdk;

and this work for me. In my knowledge, I don't understand the pros and cons of both your solution and this one. Which one is better ?

[phillipmalboeuf]

Ah that's a good idea @faisalahmedansari20, didn't realize the browser attribute worked that way. Personally, I wanted to avoid having a typeof window !== 'undefined' in my codebase, but well done!

[faisalahmedansari20]

Thanks...