I have created a web part using SPFx React. Below is my package
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#microsoft/sp-core-library": "1.14.0",
"#microsoft/sp-lodash-subset": "1.14.0",
"#microsoft/sp-office-ui-fabric-core": "1.14.0",
"#microsoft/sp-property-pane": "1.14.0",
"#microsoft/sp-webpart-base": "1.14.0",
"#mui/x-data-grid": "^4.0.2",
"#pnp/sp": "^2.11.0",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-router-dom": "^5.3.0",
"typescript": "^2.9.1"
This web part is working correctly under the local workbench https://contoso.sharepoint.com/sites/contoso/_layouts/15/workbench.aspx
When I generate a package of that app and add that to the SharePoint page (https://contoso.sharepoint.com/sites/contoso/SitePages/contoso.aspx). It Freezes the Browser and returns the below errors.
not enough memory to open this page
Something went wrong while displaying the webpage
Can anyone help me with the same?
Related
I get this error:
react__WEBPACK_IMPORTED_MODULE_1___default.a.createContext is not a function
I see all the others questions related to this topic but with no success, my versions is this :
"dependencies": {
"#south-paw/react-vector-maps": "^3.0.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-bootstrap-calendar": "0.0.3",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-regex": "^1.0.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
I also create a new react empty project but the result is the same and i really don't know how to solve the problem at this time
-----EDIT-----
I uninstalled and installed again nodejs and npm and i create a new project using yarn instead, now the problem is solved but anyway i still don't understand the meaning of this error
I solved the issue by uninstilling react and nodejs, probably i've done some mistake with versions
So I have simple express app. When it run locally, I can see js, css files got gzip compressed but when I deploy to cloud foundry, those files not compressed. The files size still the same.
Anyone know the reason, how to fix it or solutions for this issue ?
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
app.use(express.static('./public'));
Package.json
{
"name": "conversation-simple",
"description": "A simple Node.js based web app which shows how to use the Conversation API to recognize user intents.",
"version": "0.1.1",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"#google/chatbase": "^1.1.2",
"body-parser": "^1.18.2",
"botbuilder": "^3.15.0",
"cloudant": "^1.10.0-NOTICE",
"compression": "^1.7.3",
"cors": "^2.8.4",
"dotenv": "^2.0.0",
"express": "^4.16.1",
"gulp-rename": "^1.4.0",
"moment": "^2.22.2",
"nano": "^6.4.4",
"request": "^2.87.0",
"slick-carousel": "^1.8.1",
"underscore": "^1.9.0",
"universal-analytics": "^0.4.16",
"watson-developer-cloud": "^3.5.3",
"xml-js": "^1.6.3"
},
"engines": {
"node": "8.15.x"
}
}
Update:
Look like there is location problem. When it's deployed to Sydney, the compression doesn't work but Dallas is ok. IBM support have confirmed the issue in my ticket and currently investigate.
I have the same issue, I feel like I've tried absolutely everything so far:
Static Gzipping (serving .gz files)
Brotli (no dice)
Dynamic compression (like you)
Redirect to static .gz files
It works locally as it should but once deployed - farting noise nothing.
I have a feeling it happens in the proxy and needs to be enabled somewhere, where is not documented though
Commenting here to follow this, also I've contacted their support, if I get any answers I will put them here :)
This issue was fixed by IBM.
"After investigation, we found an issue that strips the header and decompresses the response in the Cloud Foundry Platform AU-SYD region."
I'm using express-session, passport and connect-mongo for save sessions in mongodb.
my package.json
"dependencies": {
"axios": "^0.18.0",
"bcrypt": "^3.0.5",
"body-parser": "^1.18.3",
"bootstrap": "^4.3.1",
"chalk": "^2.4.2",
"chart.js": "^2.8.0",
"cheerio": "^1.0.0-rc.2",
"clockwork": "^0.1.4",
"compression": "^1.7.4",
"connect-mongo": "^2.0.3",
"dotenv": "^7.0.0",
"errorhandler": "^1.5.0",
"express": "^4.16.4",
"express-flash": "^0.0.2",
"express-handlebars": "^3.0.2",
"express-session": "^1.15.6",
"express-session-passport-cleanup": "^1.0.3",
"express-status-monitor": "^1.2.3",
"express-validator": "^5.3.1",
"lastfm": "^0.9.3",
"lob": "^6.0.5",
"lodash": "^4.17.11",
"lusca": "^1.6.1",
"mongoose": "^5.4.20",
"morgan": "^1.9.1",
"multer": "^1.4.1",
"node-linkedin": "^0.5.6",
"node-sass": "^4.11.0",
"node-sass-middleware": "^0.11.0",
"nodemailer": "^6.0.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"pug": "^2.0.3",
"request": "^2.88.0",
"stripe": "^6.28.0",
"uuid": "^3.3.2",
"validator": "^10.11.0"
},
this works fine and its posible multiple logins from same user account, in the same browser in incognito or with other browsers or different devices , but i dont know if what is the correct way to management this . I so as not to generate errorsbetween the sessions of the same user and with the shopping cart storage.
how is the standard manament way to handle multiple logins from one user account, I mean to have on the sessions always linked to the last updated data and also to the store, so that mistakes do not happen.
First of all, you have to understand the concept of how the session works.
The session will be a unique identifier is stored on the client side (called a "session id"). This session id is passed to the web server every time the browser makes an HTTP request (ie a page link or AJAX request). The web application match incoming session id with it's an internal database(redis etc) and retrieves the stored variables for use by the requested page.
So, If you logged in using the same account to different browser the stored session information will be unique(based on session id). You don't need to worries about it.
I'm having trouble releasing my application on Azure when it comes to use webpack.
The following error is thrown when run on the server.
ERROR in ./node_modules/react-geosuggest/module/prop-types.js
Module not found: Error: Can't resolve 'prop-types' in 'd:\a\1\s\some\project\node_modules\react-geosuggest\module'
# ./node_modules/react-geosuggest/module/prop-types.js 7:17-38
# ./node_modules/react-geosuggest/module/Geosuggest.js
# multi moment react-geosuggest react-bootstrap react-overlays ./Scripts/React/Components/Oem
and I don't see/know what exactly the issue is.
On the other hand - locally - it's running/building without any issues. So I'm really stuck at this point.
This is what my dependencies (in package.json) look like:
"dependencies": {
"bootstrap": "3.3.7",
"classnames": "^2.2.5",
"moment": "^2.19.2",
"react": "15.6.1",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-transition-group": "^15.6.0",
"react-dom": "15.6.1",
"react-bootstrap": "0.31.5",
"react-geosuggest": "2.7.0",
"webpack": "^3.6.0",
"pathval": "1.1.0"
}
In antoher project where I use react-geosuggest it's working/building without any complains.
I've already tried to use the latest version of react & react-dom as well as adding prop-types. But still the same issue.
I had a similar problem and solved it by adding this to my dependencies section in package.json:
"prop-types": "^15.6.1"
followed by rerunning:
yarn install
There are these packages in package.json：
"devDependencies": {
"axios": "^0.16.2",
"bootstrap": "4.0.0-beta",
"cross-env": "^5.0.1",
"jquery": "^3.2.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.4.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"bowser": "^1.7.2",
"sweetalert2": "^6.6.9",
"vue-image-crop-upload": "^2.0.2",
"element-ui": "^1.4.2"
}
After running npm run dev, the size of app.js is 2.6M , what should to do to it in production environments.
First of all, building for production (using npm run production) will typically include minifying the JS and won't include sourcemaps, so that will save a lot of space.
There may also be scope for trimming unwanted library components. Lodash allows you to import components individually, so you can just pick the ones you need. That could save some space.
You may also choose to separate out the Javascript for different parts of your web app if it's particularly large.
Finally, if you're doing it right the JS won't be downloaded on every request. You should cache the file for as long as possible and use versioning in Mix to handle breaking changes.