Having Issues Compiling React App which was dumped on my plate - reactjs

I git the code..made some minor changes to a few componenets....correcting typos
Here is the issue that when I run npm start I'm receive
ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js Module not found:
Error: Cannot resolve module 'child_process' in
/Users/xx/Desktop/REPOS/MIT_WEBS/tripsharing/node_modules/xmlhttprequest/lib
# ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36
ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js Module not found:
Error: Cannot resolve module 'fs' in
/Users/xx/Desktop/REPOS/MIT_WEBS/tripsharing/node_modules/xmlhttprequest/lib
# ./~/xmlhttprequest/lib/XMLHttpRequest.js 16:9-22
{
"name": "ZZ",
"version": "0.0.1",
"description": "ZZ website",
"main": "index.js",
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server --config ./webpack.config.js"
},
"repository": {
"type": "git",
"url": "git#github.com:wonyoungso/tripsharing.git"
},
"license": "MIT",
"author": "Wonyoung So",
"dependencies": {
"csv": "1.1.0",
"d3": "^4.5.0",
"gsap": "^1.18.5",
"immutable": "3.8.1",
"jquery": "2.2.3",
"json-loader": "0.5.4",
"lodash": "4.12.0",
"rc-slider": "^6.1.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-motion": "^0.4.7",
"react-redux": "^5.0.2",
"react-retina-image": "^2.0.3",
"redux": "^3.6.0",
"stats-webpack-plugin": "^0.2.1",
"textures": "^1.0.5",
"turf": "3.0.5"
},
"devDependencies": {
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-2": "6.5.0",
"webpack": "^1.9.11",
"grunt": "~0.4.5",
"grunt-contrib-watch": "~0.6.1",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-sass": "~0.9.2",
"webpack-dev-server": "^1.9.0"
}
}

Related

Unable to install React-chartjs-2 in React Parcel Project

Very simply by using the following command, I am unable to install React-chartJs-2 module in my React Parcel project:
npm install --save chart.js react-chartjs-2
After the installation when i started my project using (npm start), i getting the following error:
#parcel/core: Failed to resolve 'react-chartjs-2' from './src/pages/dashboard/quiz-detail.js'
My package.json after installation is looks like:
{
"name": "quizcopy",
"version": "1.0.0",
"homepage": ".",
"description": "",
"source": "/src/index.html",
"scripts": {
"start": "parcel",
"build": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"autoprefixer": "^10.4.8",
"buffer": "^6.0.3",
"parcel": "^2.7.0",
"postcss": "^8.4.16",
"process": "^0.11.10",
"sass": "^1.54.9",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"#headlessui/react": "^1.7.0",
"#heroicons/react": "^2.0.10",
"axios": "^0.27.2",
"chart.js": "^4.1.1",
"crypto-js": "^4.1.1",
"dotenv": "^16.0.2",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.1.0",
"react-datetime-picker": "^4.0.1",
"react-dom": "^18.2.0",
"react-export-table-to-excel": "^1.0.6",
"react-google-recaptcha-v3": "^1.10.0",
"react-hot-toast": "^2.4.0",
"react-image-file-resizer": "^0.4.8",
"react-quill": "^2.0.0",
"react-router-dom": "^6.3.0",
"react-transition-group": "^4.4.5",
"read-excel-file": "^5.5.3",
"swr": "^1.3.0"
}
}

undefined is not an object (evaluating 'regeneratorRuntime.mark')- React Native

react-native: 0.49.5
react-native-cli: 2.0.1
node: 8.6.0
Have this error while running my application. It just started to randomly have problems after I started using proptypes in my react native application (do not think that is the problem).
I tried to comment out my store and proptypes to see if that affects anything and I still get the same error.
Note: I tried removing the caret symbol from my package.json, then removing node_modules, then finally installing again with no effect.
UDPATE:
I did some more digging and got the error to say this :
Error: ENOENT: no such file or directory, open '/Users/christian/Desktop/React-Native/roam/node_modules/react-native/node_modules/regenerator-runtime/package.json'
UPDATE:
I removed my node_modules and reinstalled them and now I am getting a similar error but with a different package.
Error: ENOENT: no such file or directory, open '/Users/christian/Desktop/React-Native/roam/node_modules/simple-swizzle/node_modules/is-arrayish/package.json'
package.json:
{
"name": "roam",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.2.0",
"babel-preset-react-native": "^2.1.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^22.4.4",
"jest-enzyme": "^6.0.2",
"jest-react-native": "^18.0.0",
"react-test-renderer": "^16.4.1",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
},
"dependencies": {
"axios": "^0.18.0",
"babel-preset-env": "^1.6.1",
"expo": "^28.0.0",
"native-base": "^2.6.1",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.4.1",
"react-native": "^0.49.5",
"react-native-elements": "^0.19.1",
"react-native-pages": "^0.7.0",
"react-native-sensitive-info": "^5.1.0",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-axios-middleware": "^4.0.0",
"redux-persist": "^5.10.0",
"redux-persist-sensitive-storage": "^1.0.0",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.12.1",
"tcomb-form-native": "^0.6.14",
"util": "*"
}
}
Pack-lock.json (part of it):
"dependencies": {
"#babel/code-frame": {
"version": "7.0.0-beta.51",
"resolved": "https://registry.npmjs.org/#babel/code-frame/-/code-frame-7.0.0-beta.51.tgz",
"integrity": "sha1-vXHZsZKvl435FYKdOdQJRFZDmgw=",
"dev": true,
"requires": {
"#babel/highlight": "7.0.0-beta.51"
}
},
"#babel/highlight": {
"version": "7.0.0-beta.51",
"resolved": "https://registry.npmjs.org/#babel/highlight/-/highlight-7.0.0-beta.51.tgz",
"integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=",
"dev": true,
"requires": {
"chalk": "^2.0.0",
"esutils": "^2.0.2",
"js-tokens": "^3.0.0"
},
"babel-code-frame": {
"version": "6.0.15",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.0.15.tgz",
"integrity": "sha1-UmlpqYXzFaCBFdxi9IxMDz+af7w=",
"dev": true,
"requires": {
"babel-runtime": "^5.0.0",
"chalk": "^1.1.0",
"esutils": "^2.0.2",
"js-tokens": "^1.0.1",
"line-numbers": "^0.2.0",
"repeating": "^1.1.3"
},
"dependencies": {
"babel-runtime": {
"version": "5.8.38",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
"integrity": "sha1-HAsC62MxL18If/IEUIJ7QlydTBk=",
"dev": true,
"requires": {
"core-js": "^1.0.0"
}
},
"babel-core": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.0.tgz",
"integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=",
"requires": {
"babel-code-frame": "^6.26.0",
"babel-generator": "^6.26.0",
"babel-helpers": "^6.24.1",
"babel-messages": "^6.23.0",
"babel-register": "^6.26.0",
"babel-runtime": "^6.26.0",
"babel-template": "^6.26.0",
"babel-traverse": "^6.26.0",
"babel-types": "^6.26.0",
"babylon": "^6.18.0",
"convert-source-map": "^1.5.0",
"debug": "^2.6.8",
"json5": "^0.5.1",
"lodash": "^4.17.4",
"minimatch": "^3.0.4",
"path-is-absolute": "^1.0.1",
"private": "^0.1.7",
"slash": "^1.0.0",
"source-map": "^0.5.6"
},
"dependencies": {
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
"integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
"requires": {
"chalk": "^1.1.3",
"esutils": "^2.0.2",
"js-tokens": "^3.0.2"
}
}
}
},
.babelrc:
{
"presets": [["env", {"modules": false}], "react-native"],
"env": {
"test": {
"presets": [["env", {"modules": false}], "react-native"]
}
}
}
The problem is that one of your library is still importing the
prop-types
from react-native bundle.
You have to correct that.
I was able to get it to work by downgrading React to 16.0.0-beta.5

React component errors out

Im trying to create a component using React. I have finished code, but when running "yarn run bundle", the code errors out here and i receive the error code
"Module build failed: SyntaxError: Unexpected token (9:10)"
Below is where I am getting an error. Can anybody think of why?
export class NewBond extends React.Component {
state = {name:''};
Package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node --use_strict index.js",
"dev": "nodemon --use_strict index.js",
"bundle": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"express": "^4.15.3",
"jsonwebtoken": "^7.4.1",
"material-ui": "^0.18.1",
"mongoose": "^4.10.4",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-tap-event-plugin": "^2.0.1",
"semantic-ui-react": "^0.78.3",
"validator": "^7.0.0",
"yarn": "^1.5.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"nodemon": "^1.11.0",
"webpack": "^2.6.1"
}
}

Module not found: Error: Cannot resolve module 'react-tether' in [..]/node_modules/pui-react-overlay-trigger

It was working, randomly stopped working. react-tether is installed under node_modules.
package.json
{
"version": "0.0.1",
"scripts": {
"build": "webpack -p --config webpack.config.js --progress --colors",
"dev": "webpack-dev-server --config webpack.dev.config.js --progress --inline --colors --no-info"
},
"private": true,
"babel": {
"presets": [
"stage-0"
]
},
"dependencies": {
"babel": "5.6.23",
"babel-core": "6.14.0",
"babel-loader": "6.2.5",
"babel-plugin-add-module-exports": "0.2.1",
"babel-plugin-react-html-attrs": "2.0.0",
"babel-plugin-transform-class-properties": "6.11.5",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-preset-es2015": "6.14",
"babel-preset-react": "6.11.1",
"babel-preset-stage-0": "6.5.0",
"css-loader": "0.25.0",
"es6-promise": "3.0.2",
"file": "^0.2.2",
"font-awesome": "^4.7.0",
"font-awesome-webpack": "0.0.4",
"giphy-api": "1.2.1",
"immutable": "3.8.1",
"inherits": "2.0.3",
"less": "2.7.1",
"less-loader": "2.2.3",
"material-ui": "0.16.1",
"minimatch": "3.0.3",
"moment": "2.15.1",
"pui-react-overlay-trigger": "6.0.2",
"pui-react-tooltip": "6.0.2",
"react": "15.3.2",
"react-addons-create-fragment": "15.3.2",
"react-addons-css-transition-group": "15.3.2",
"react-addons-shallow-compare": "15.3.2",
"react-addons-transition-group": "15.3.2",
"react-dom": "15.3.2",
"react-highlight-words": "0.6.0",
"react-redux": "4.4.5",
"react-tap-event-plugin": "1.0.0",
"react-textarea-autosize": "^4.0.5",
"react-timeout": "1.0.0",
"redux": "3.6.0",
"redux-logger": "2.6.1",
"redux-promise": "0.5.3",
"redux-thunk": "2.1.0",
"string-similarity": "^1.1.0",
"style-loader": "0.13.1",
"webpack": "1.13.2",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
"html-webpack-plugin": "2.7.2",
"transfer-webpack-plugin": "0.1.4",
"react-hot-loader": "1.3.0",
"webpack-dev-server": "1.16.1"
}
}
By installing react-tether as a dependency of your app, it will override the version in pui-react-overlay-trigger
npm install react-tether#0.5.2 --save-exact
This made my version work.

Issue with react-dom when deploying on heroku Error: Cannot resolve 'file' or 'directory' ./lib/ReactDOM

I have a create-react-app on heroku. When I try to deploy a change to production it is failing and giving me the following error:
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/ReactDOM in /tmp/build_a87ef5601c25702212bff26dba1f999c/node_modules/react-dom
However, it is successful when I do npm run build. Here is my package.json file:
{
"name": "test_app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "6.5.1",
"babel-core": "6.17.0",
"babel-eslint": "7.0.0",
"babel-jest": "16.0.0",
"babel-loader": "6.2.5",
"babel-preset-react-app": "^1.0.0",
"case-sensitive-paths-webpack-plugin": "1.1.4",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.25.0",
"detect-port": "1.0.1",
"dotenv": "2.0.0",
"eslint": "3.8.1",
"eslint-config-react-app": "^0.3.0",
"eslint-loader": "1.6.0",
"eslint-plugin-flowtype": "2.21.0",
"eslint-plugin-import": "2.0.1",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.4.1",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"filesize": "3.3.0",
"find-cache-dir": "0.1.1",
"fs-extra": "0.30.0",
"gzip-size": "3.0.0",
"html-webpack-plugin": "2.24.0",
"http-proxy-middleware": "0.17.2",
"jest": "16.0.2",
"json-loader": "0.5.4",
"object-assign": "4.1.0",
"path-exists": "2.1.0",
"postcss-loader": "1.0.0",
"promise": "7.1.1",
"react": "^15.4.1",
"react-addons-test-utils": "^15.4.1",
"react-dev-utils": "^0.3.0",
"react-dom": "^15.4.1",
"recursive-readdir": "2.1.0",
"rimraf": "2.5.4",
"strip-ansi": "3.0.1",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dev-server": "1.16.2",
"webpack-manifest-plugin": "1.1.0",
"whatwg-fetch": "1.0.0"
},
"dependencies": {
"axios": "^0.15.2",
"react": "^15.4.1",
"react-bootstrap": "^0.30.6",
"react-dom": "^15.4.1",
"react-redux": "4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0",
"socket.io": "^1.5.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"moduleFileExtensions": [
"jsx",
"js",
"json"
],
"moduleNameMapper": {
"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
"^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
},
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testPathIgnorePatterns": [
"<rootDir>/(build|docs|node_modules)/"
],
"testEnvironment": "node"
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
I tried removing the node_modules file and re-installing per the advice here but I continue to get the same error. I have buildpack set up with heroku and was able to successfully deploy the app last week. Any help or advice would be greatly appreciated.

Resources