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...