Open faisalahmedansari20 opened 5 years ago
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!
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" } }
@faisalahmedansari20 I looked into it for next.js and you'll need to add some webpack configs, wrote down an example in #186!
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 ?
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.
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;
}
});
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 ?
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!
Thanks...
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
on console it says