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"
}
}
Related
I am using Nextjs and Vercel to deploy my website. Cypress was working fine yesterday. But today when Vercel runs the build I get the following error:
I noticed that vercel was installing Cypress version 6.9.0 whereas I had 6.8.0 in my package.json file.
So I updated to version to 6.9.0 but I still get the same error. Why is this suddenly happening?
My package.json file
{
"name": "website",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env API_URL=http://localhost:1337 next dev",
"public-dev": "next dev",
"build": "next build",
"start": "next start",
"cypress:open": "cypress open"
},
"dependencies": {
"#apollo/client": "^3.1.3",
"#blueprintjs/core": "^3.35.0",
"#blueprintjs/datetime": "^3.19.3",
"#popperjs/core": "^2.5.4",
"axios": "^0.21.1",
"graphql": "^15.3.0",
"graphql-tag": "^2.10.4",
"isomorphic-unfetch": "^3.1.0",
"moment": "^2.29.1",
"next": "10.0.2",
"next-with-apollo": "^5.1.0",
"nouislider-react": "^3.3.8",
"react": "^17.0.1",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^17.0.1",
"react-flatpickr": "^3.10.6",
"react-froala-wysiwyg": "^3.2.1",
"react-ga": "^3.2.1",
"react-gtm-module": "^2.0.11",
"react-localization": "^1.0.15",
"react-lottie": "^1.2.3",
"react-popper": "^2.2.3",
"react-scroll": "^1.8.1",
"react-slick": "^0.27.13",
"sass": "^1.30.0",
"swiper": "^6.3.5",
"swr": "^0.4.2"
},
"devDependencies": {
"#types/node": "^14.0.27",
"#types/react": "^16.9.46",
"cross-env": "^7.0.2",
"cypress": "^6.9.0",
"cypress-localstorage-commands": "^1.4.2",
"eslint": "^7.4.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-standard": "^4.0.1",
"typescript": "^3.9.7"
}
}
Cypress team published 6.9.0 by mistake, really the version is 7.0.0 and they will remove 6.9.0:
https://github.com/cypress-io/cypress/issues/15797
I wanted to use a new feature of ES 2020 in my next.js so I used optional changes in my app. When I ran my code this error has occurred
Module parse failed: Unexpected token (50:191)
You may need an appropriate loader to handle this file type.
Then I ran this command
npm install --save-dev #babel/plugin-proposal-optional-chaining
but the problem still exists.
Then I decided to update babel/core to version 7, I updated it via this command
npx babel-upgrade --write
but the loader error still there and I don't have any idea. Here is my package.json file:
{
"name": "Karan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "SET NODE_ENV=development && SET PORT=3001 && node server.js",
"build": "next build",
"prod-build": "next build",
"start": "SET NODE_ENV=production && SET PORT=8080 && node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#ckeditor/ckeditor5-basic-styles": "^11.1.4",
"#ckeditor/ckeditor5-build-classic": "^12.4.0",
"#ckeditor/ckeditor5-font": "^11.2.2",
"#ckeditor/ckeditor5-paragraph": "^11.0.5",
"#ckeditor/ckeditor5-react": "^1.1.3",
"#fullpage/react-fullpage": "^0.1.17",
"#sentry/browser": "^4.6.6",
"#svgr/webpack": "^4.3.2",
"#zeit/next-css": "^1.0.1",
"#zeit/next-stylus": "^1.0.1",
"axios": "^0.18.1",
"express": "^4.17.1",
"global": "^4.4.0",
"jalaali-js": "^1.1.0",
"leaflet": "^1.5.1",
"moment-jalaali": "^0.8.3",
"moment-jalali": "^0.3.9",
"next": "^8.1.0",
"next-images": "^1.1.2",
"next-routes": "^1.4.2",
"npm": "^6.12.1",
"numeral": "^2.0.6",
"persianjs": "^0.4.0",
"pm2": "^3.5.1",
"prop-types": "^15.6.2",
"qs": "^6.8.0",
"react": "^16.9.0",
"react-bootstrap-star-rating": "^3.5.5-alpha.0.3",
"react-dom": "^16.9.0",
"react-leaflet": "^2.4.0",
"react-modal": "^3.9.1",
"react-paginate": "^5.2.4",
"react-persian-calendar": "^1.0.3",
"react-rating": "^2.0.4",
"react-redux": "^5.0.7",
"react-responsive": "^5.0.0",
"react-select": "^2.4.4",
"react-share": "^2.4.0",
"react-slick": "^0.23.1",
"react-star-ratings": "^2.3.0",
"react-toastify": "^4.3.0",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"stylus": "^0.54.5"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-optional-chaining": "^7.9.0",
"cross-env": "^5.2.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"poststylus": "^1.0.0"
}
}
Since i see that you are using next you need to add a .babelrc file beside your package.json and include the below content -
{
"presets": ["next/babel"],
"plugins": []
}
next/babel includes
preset-env
preset-react
preset-typescript
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime
styled-jsx
An alternative approach would be to add something similar (including the preset/transforms you need for your application) in your package.json
,
"babel": {
"presets": [
"nano-react-app"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-react-jsx",
{
"pragmaFrag": "React.Fragment"
}
]
]
}
I have an AngularJS project written in TypeScript with PhpStorm.
When compiling with Webpack, I get the following error :
Error:(42, 43) TS2694:Namespace 'angular' has no exported member 'angularFileUpload'.
So there is a problem somewhere. But what bugs me is that PhpStorm is still able to resolve the type and to open the file defining it while complaining that the type cannot be resolved :
Here's an animated gif showing the behavior:
I have the same problem with another library.
In fact, it seems that typings trying to extend the ng namespace are overridden by something later on, and I don't find where.
I have included #types/ng-file-upload and defined the types root in my tsconfig like shown in the animated gif.
Thanks in advance for any advise you could give me.
EDIT :
Here's the content of my package.json file:
{
"name": "...",
"version": "0.0.1",
"description": "...",
"repository": {
...
},
"scripts": {
"gulp": "gulp build --theme=default",
"gulp:prod": "gulp build --theme=default --env=prod",
"gulp:watch": "gulp build --theme=default --watch",
"gulp:watch:prod": "gulp --theme=default --watch --env=prod",
"webpack:native:watch": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=julien-localhost --watch",
"webpack:native:prod": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=production --env.env=prod",
"webpack:angularjs/admin:watch": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=julien-localhost --watch",
"webpack:angularjs/admin:prod": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=production --env.env=prod"
},
"dependencies": {
"angular": "^1.6.9",
"angular-animate": "^1.6.9",
"angular-aria": "^1.6.9",
"angular-clipboard": "~1.6.2",
"angular-local-storage": "~0.7.1",
"angular-material": "^1.1.9",
"angular-messages": "^1.6.9",
"angular-moment-picker": "^0.10.2",
"angular-resource": "^1.6.9",
"angular-sanitize": "^1.6.9",
"angular-translate": "~2.17.0",
"angular-ui-notification": "^0.3.6",
"angular-ui-router.statehelper": "~1.3.1",
"bootstrap": "^4.1.3",
"font-awesome": "~4.7.0",
"inversify": "^4.13.0",
"jquery": "^3.3.1",
"jquery-backstretch": "^2.1.16",
"jquery-mousewheel": "^3.1.13",
"jquery-ui": "^1.12.1",
"lodash": "^4.17.10",
"mainloop.js": "^1.0.4",
"malihu-custom-scrollbar-plugin": "^3.1.5",
"moment": "~2.20.1",
"moment-timezone": "^0.5.14",
"ng-file-upload": "~12.2.13",
"parsleyjs": "^2.8.1",
"particles.js": "^2.0.0",
"q": "^1.5.1",
"raven-js": "^3.26.4",
"reflect-metadata": "^0.1.12",
"satellizer": "^0.15.5",
"scrollmonitor": "^1.2.4",
"toastr": "^2.1.4"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.3.1",
"#types/angular": "~1.6.43",
"#types/angular-mocks": "^1.5.11",
"#types/angular-route": "^1.3.4",
"#types/angular-ui-notification": "0.0.4",
"#types/angular-ui-router": "^1.1.40",
"#types/es6-promise": "^3.3.0",
"#types/jquery": "^3.3.6",
"#types/lodash": "^4.14.104",
"#types/modernizr": "^3.5.2",
"#types/ng-file-upload": "~12.2.2",
"#types/node": "^9.6.34",
"#types/q": "^1.5.1",
"#types/reflect-metadata": "^0.1.0",
"#types/source-map": "~0.5.7",
"#types/uglify-js": "^2.6.30",
"#types/webpack-env": "^1.13.6",
"#uirouter/angularjs": "^1.0.15",
"awesome-typescript-loader": "^3.4.1",
"browser-sync": "~2.23.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chalk": "^2.3.1",
"circular-dependency-plugin": "^4.4.0",
"clone": "2.1.2",
"copy-webpack-plugin": "~4.4.1",
"force-case-sensitivity-webpack-plugin": "^0.2.1",
"gulp-angular-embed-templates": "^2.3.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-compass": "^2.1.0",
"gulp-ng-annotate": "^2.1.0",
"gulp-yaml-packages": "~1.0.15",
"html-webpack-plugin": "~2.30.1",
"loader-utils": "^1.1.0",
"ngtemplate-loader": "~2.0.1",
"node-neat": "^2.0.0-beta.0",
"raw-loader": "0.5.1",
"ts-loader": "~3.5.0",
"ts-node": "~5.0.0",
"tslib": "^1.9.0",
"tslint": "~5.9.1",
"tslint-loader": "~3.5.3",
"typescript": "^2.9.2",
"url-loader": "0.6.2",
"webpack": "^3.11.0",
"webpack-merge": "~4.1.1",
"webpack-strip-block": "github:jballant/webpack-strip-block"
}
}
I've found the problem...
My tsconfig.json file contains:
{
"compilerOptions": {
[...]
"types": ["reflect-metadata", "webpack-env"]
}
}
And that's the problem, this limits what typings are included by the compiler to the ones defined in the option :
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types
That's one more check you need to make if you're in the same situation.
If that can help someone.
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.
I was trying to install sparklines for a tutorial i'm doing from online. When I try to install it using npm I get the below error.
Anyone know how to solve this. I tried updating my react to 15.3.0 but that causes a bunch of errors to happen.
npm WARN EPEERINVALID react-addons-shallow-compare#15.3.0 requires a peer of react#^15.3.0 but none was installed.
Here is my package Json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "git#github.com:StephenGrider/ReduxSimpleStarter.git",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.13.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"react-sparklines": "^1.6.0",
"redux": "^3.0.4",
"redux-promise": "^0.5.3"
}
}