For some reason, I and many others have had the issue with WebStorm and Discord.js, specifically it doesn't recognize some of the (re-)exported modules from the package; in this case those from Builders seem to be the ones with the issue:
Yet as suggested for discord.js#14.7.1 I do not have Builders installed:
{
"main": "bot.js",
"type": "module",
"engines": {
"node": "16.x",
"npm": "7.x"
},
"dependencies": {
"#discordjs/rest": "^0.1.0-canary.0",
"canvas": "^2.8.0",
"chart.js": "^3.8.0",
"chartjs-node-canvas": "^4.1.6",
"croner": "^4.2.2",
"discord.js": "^14.7.1",
"dotenv": "^10.0.0",
"fs": "^0.0.1-security",
"fuse.js": "^6.5.3",
"https": "^1.0.0",
"i": "^0.3.7",
"konva": "^8.3.1",
"mongoose": "^6.1.1",
"npm": "^8.13.0",
"path": "^0.12.7",
"sort-by": "^0.0.2",
"string-similarity-js": "^2.1.4",
"url": "^0.11.0"
}
}
Any ideas why WebStorm fails to know about what Discord.js re-exports?
`-- discord.js#14.7.1
`-- #discordjs/builders#1.4.0
You can try installing the discord-api-types library and importing it from there.
import { ButtonStyle } from 'discord-api-types/v10';
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 have run into an issue with #apollo/client. I get this error on v3.4.17 and v3.4.0 which were mentioned in earlier posts. I think the issue is caused by #apollo/react-hooks.
This is my package.json
"#apollo/client": "~3.4.17",
"#apollo/react-hooks": "^4.0.0",
"#apollo/react-ssr": "^4.0.0",
but my package-lock.json looks like this
"#apollo/react-hooks": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/#apollo/react-hooks/-/react-hooks-4.0.0.tgz",
"integrity": "sha512-fCu0cbne3gbUl0QbA8X4L33iuuFVQbC5Jo2MIKRK8CyawR6PoxDpFdFA1kc6033ODZuZZ9Eo4RdeJFlFIIYcLA==",
"requires": {
"#apollo/client": "^3.6.9"
},
"dependencies": {
"#apollo/client": {
"version": "3.6.9",
"resolved": "https://registry.npmjs.org/#apollo/client/-/client-3.6.9.tgz",
"integrity": "sha512-Y1yu8qa2YeaCUBVuw08x8NHenFi0sw2I3KCu7Kw9mDSu86HmmtHJkCAifKVrN2iPgDTW/BbP3EpSV8/EQCcxZA==",
"requires": {
"#graphql-typed-document-node/core": "^3.1.1",
"#wry/context": "^0.6.0",
"#wry/equality": "^0.5.0",
"#wry/trie": "^0.3.0",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.16.1",
"prop-types": "^15.7.2",
"symbol-observable": "^4.0.0",
"ts-invariant": "^0.10.3",
"tslib": "^2.3.0",
"zen-observable-ts": "^1.2.5"
}
},
}
Any suggestions?
Downgrading the version of "#apollo/react-hooks": "^4.0.0" to "#apollo/react-hooks": "~3.1.3" in the package.json is working for me.
The "#apollo/react-hooks": "^4.0.0" requires the internal dependency of "#apollo/client": "^3.6.9" which is causing the issue. So downgrading the version of #apollo/client won't work when "#apollo/react-hooks": "^4.0.0" is used.
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 am modifying a forum software at here
After installing "npm install -S react-draft-wysiwyg" on that forum project, I tried to apply global css by putting "import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';" at the top of some React component js file in that forum software.
But it looks like something is blocking global CSS. CSS in that import didn't affect React js file. But I do not know what is blocking global css. My only guess is could be somewhat related to webpack but not sure.
I tried making a new react project by "npx create-react-app" and applied that global css, and it worked there. So I concluded that something is blocking global css in that forum project so that global CSS implementation doesn't work in that forum software only.
Here is package.json that forum software uses:
{
"name": "reforum",
"version": "1.0.0",
"description": "A forum application built with ReactJS, Redux, Express and MongoDB",
"license": "MIT",
"keywords": [
"forum",
"react",
"redux",
"express",
"mongodb"
],
"main": "server.js",
"engines": {
"node": "7.1.0"
},
"scripts": {
"test": "jest",
"start": "better-npm-run start",
"start:dev": "better-npm-run start:dev",
"build": "webpack --config config/webpack.prod.config.js"
},
"betterScripts": {
"start": {
"command": "node server.js",
"env": {
"NODE_ENV": "production",
"PORT": 3030
}
},
"start:dev": {
"command": "node server.js",
"env": {
"NODE_ENV": "development",
"PORT": 8080
}
}
},
"dependencies": {
"better-npm-run": "^0.0.13",
"body-parser": "^1.15.2",
"compression": "^1.6.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"express": "^4.14.0",
"express-session": "^1.14.2",
"help": "^3.0.2",
"lodash": "^4.17.4",
"mongoose": "^4.7.4",
"morgan": "^1.7.0",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
"passport-local": "^1.0.0"
},
"devDependencies": {
"async": "^2.1.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel": "^6.5.2",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"draft-js": "^0.10.0",
"eslint": "^3.12.1",
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jest": "^20.0.4",
"moment": "^2.17.1",
"nock": "^9.0.13",
"postcss-loader": "^1.2.2",
"postcss-nesting": "^2.3.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-helmet": "^5.0.3",
"react-hot-loader": "^1.3.1",
"react-onclickoutside": "^5.10.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.3",
"redux-thunk": "^2.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.2"
}
}
Can you please tell me what is blocking global CSS implementation?
Thank you very much.
You are using css-loader in webpack. So normal css will be compiled to another name such as
localIdentName: "[local]___[hash:base64:5]"
You can write your css with global such as
:global(.myclass) {
background-color: red;
}
or you can disable module in your webpack config
{
loader: "css-loader",
options: {
modules: false,
}
},
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