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
Related
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?
I am completely new to backend react setups. Everything was going well until I started styling...I got this
TypeError: Cannot read property 'object' of undefined
./node_modules/radium/lib/components/style.js
node_modules/radium/lib/components/style.js:23
20 | displayName: 'Style',
21 |
22 | propTypes: {
> 23 | radiumConfig: _react.PropTypes.object,
| ^ 24 | rules: _react.PropTypes.object,
25 | scopeSelector: _react.PropTypes.string
26 | },
Upon googling, I landed on the jscodeshift... so I ran
% jscodeshift --extensions js -t react-codemod/transforms/React-PropTypes-to-prop-types.js node_modules/radium/lib/components/ --explicit-require=false
Processing 3 files...
Spawning 3 workers...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
All done.
Results:
0 errors
0 unmodified
3 skipped
0 ok
Time elapsed: 0.770seconds
I googled some more, and other people had issues with imports e.g material-UI, no returns in the code, or other than js files. I even deleted node modules and reinstalled npm to no avail. I cannot seem to find any solution for my issue.
Here are my package.JSON dependencies...
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/react-burger-menu": "^2.6.1",
"jscodeshift": "^0.9.0",
"prop-types": "^15.7.2",
"radium": "^0.26.0",
"react": "^15.6.2",
"react-burger-menu": "^1.12.0",
"react-dom": "^15.6.2",
"react-scripts": "3.4.1",
"yarn": "^1.22.4"
},
Any help is much appreciated.
ps: I am open to completely resetting up the whole project.
Reinstalling everything fixed this.
I think where I went wrong was probably:
1. Installing or reinstalling packages whose versions were incompatible ie different versions of react-dom and react, etc.
2. Trying too many things at once...
Advice for future googlers: Go slow, especially when converting to TS. Make sure the basic react app is running. Then convert, or add other modules you need, step by step as you migrate to TS.
All the best!
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.