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"
}
}
Related
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"
}
}
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"
}
}
I have a create-react-app project with the "start" script as "nodemon backend/app.js". Both running yarn start (npm start) or manually typing cd backend --> nodemon app.js run the server fine. However, the script runs into an error when calling for requests whereas the manual option works fine. Any guidance or help would be appreciated. The script option can't seem to retrieve the token whereas the manual option works fine.
package.json
{
"name": "personal_project",
"version": "1.0.0",
"description": "Personal website",
"main": "src/components/App/index.js",
"scripts": {
"test": "jest",
"format": "prettier \"src/**/*.{js,jsx, tsx}\" --write",
"lint": "tslint --project",
"dev": "parcel index.html",
"build": "parcel build index.html",
"start": "nodemon backend/app.js",
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wakoong/personal_website.git"
},
"author": "Woosik Koong <woosik.koong#gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://woosika.com/"
},
"homepage": "https://wakoong.github.io/playground/",
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#testing-library/jest-dom": "^4.1.2",
"#testing-library/react": "^9.3.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.12.3",
"prettier": "^1.14.2",
"react-table": "^6.10.3",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#material-ui/core": "^4.3.3",
"#material-ui/icons": "^4.2.1",
"#reach/router": "^1.2.1",
"#types/reach__router": "^1.2.4",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.8.5",
"#types/react-redux": "^7.1.2",
"algotrader": "^2.4.9",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-fetch": "^3.0.4",
"d3": "^5.12.0",
"dotenv": "^7.0.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"gh-pages": "^2.1.1",
"http-proxy-middleware": "^0.20.0",
"jest": "^24.9.0",
"marked": "^0.7.0",
"mixin-deep": "^2.0.1",
"mongodb": "^3.2.7",
"mongoose": "^5.6.4",
"morgan": "^1.9.1",
"react": ">=15",
"react-dom": "16.9.0",
"react-google-login": "^5.0.4",
"react-is": "^16.10.2",
"react-markdown": "^4.1.0",
"react-redux": "^6.0.1",
"react-router-dom": "^5.1.2",
"react-window-size": "^1.2.2",
"recharts": "^1.8.5",
"reducers": "^3.0.0-alpha",
"redux": "^4.0.1",
"redux-api-middleware": "^3.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-promise": "^4.2.5",
"robinhood": "^1.6.4",
"safer-eval": "^1.3.5",
"set-value": "^3.0.1",
"store": "^2.0.12",
"typescript": "^3.5.3",
"url-loader": "^1.1.2",
"warning": "^4.0.3"
},
"engines": {
"node": "11.x"
}
}
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
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.