react-geosuggest issue Module not found: Error: Can't resolve 'prop-types' - node.js

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

Related

SPFx React Application Crash/Freezes Browser while Add on SharePoint Page

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?

react__WEBPACK_IMPORTED_MODULE_1___default.a.createContext is not a function error persist despite version align

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

Electron Forge v6, Keytar & Node-Loader Error "no suitable image found... file too short"

I am having some trouble getting the Keytar package working in an Electron Forge v6 project (beta.54).
In a freshly generated project, I receive an error about "file too short" when I run the application. Below is an excerpt of the error dialog shown originating from the main process:
> electron-forge start
✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies: 1 / 1
✔ Compiling Main Process Code
✔ Launch Dev Servers
✔ Compiling Preload Scripts
✔ Launching Application
Webpack Output Available: http://localhost:9000
App threw an error during load
Error: node-loader:
Error: dlopen(/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node, 1): no suitable image found. Did find:
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
/Users/abc/Desktop/app2/.webpack/main/9e6f9bf6669542cb15efba32c033f3de.node: file too short
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:1015:9)
at Object../node_modules/keytar/build/Release/keytar.node (/Users/abc/Desktop/app2/.webpack/main/index.js:1018:30)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../node_modules/keytar/lib/keytar.js (/Users/abc/Desktop/app2/.webpack/main/index.js:1029:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at Object../src/index.ts (/Users/abc/Desktop/app2/.webpack/main/index.js:1440:14)
at __webpack_require__ (/Users/abc/Desktop/app2/.webpack/main/index.js:21:30)
at /Users/abc/Desktop/app2/.webpack/main/index.js:85:18
at Object.<anonymous> (/Users/abc/Desktop/app2/.webpack/main/index.js:88:10)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
It seems that node-loader is having trouble with this package. I cannot decipher what is happening as I can see the package .node files are copied into ./webpack/main/native_modules , but there is a hashed filename at the root which seems to import the native file.
One strange thing I did notice is that the hashed file at .webpack/main/9e6f9bf6669542cb15efba32c033f3de.node contains the following and not the native binary data:
module.exports = __non_webpack_require__("./native_modules/build/Release/keytar.node")
Subsequently... these .node files /native_modules/build/Release/keytar.node are what I expect.
How should one proceed? I didn't rush to open issues on GitHub until I figured where the issue was coming from.
I feel at the root, there's an issue with how the .node file is generated in keytar, but then who even knows what black magic is happening with Webpack and the loaders.
Steps to reproduce
Create a new Electron Forge project `npx create-electron-app app2 --template=typescript-webpack
Install Keytar npm install keytar
Add const key tar = require('keytar'); into src/index.ts
Run the app via npm run start
Experience the error
Versions
Node: v14.14.0
NPM: v7.0.13
Package JSON dependencies:
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.54",
"#electron-forge/maker-deb": "^6.0.0-beta.54",
"#electron-forge/maker-rpm": "^6.0.0-beta.54",
"#electron-forge/maker-squirrel": "^6.0.0-beta.54",
"#electron-forge/maker-zip": "^6.0.0-beta.54",
"#electron-forge/plugin-webpack": "6.0.0-beta.54",
"#marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
"#typescript-eslint/eslint-plugin": "^4.0.1",
"#typescript-eslint/parser": "^4.0.1",
"css-loader": "^4.2.1",
"electron": "11.0.3",
"eslint": "^7.6.0",
"eslint-plugin-import": "^2.20.0",
"fork-ts-checker-webpack-plugin": "^5.0.14",
"node-loader": "^1.0.1",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.2",
"typescript": "^4.0.2"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"keytar": "^7.2.0"
}
I had pretty much exact replica of this issue with native module loading the only difference being that in my case the module was locally built and installed as a part of the project.
Something in the webpack's support for native modules has issues within this configuration and causes this. What did the trick for me was to remove node-loader in webpack in webpack.rules.js, ie removing this section:
- // Add support for native node modules
- {
- test: /\.node$/,
- use: 'node-loader',
- },
I found this solution and further discussion on the topic from the issue tracker of electron-forge: https://github.com/electron-userland/electron-forge/issues/1688

jscodeshift PropTypes to proptypes skipping all files in node modules

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!

Laravel :the size of app.js is 2.6M ,what should to do to it in production environments?

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.

Resources