Erro in ReactJS - Module not found: Can't resolve 'highcharts'

Question

I use Highcharts in some of my projects that I use pure Javascript. Now I start a new project with ReactJS and I install highcharts on it.

npm install -g highcharts highcharts-react-official

But when I start the project using

yarn start

I got the following error:

Module not found: Can't resolve 'highcharts'

This is what I get when I use the command

npm list -g --depth 0

E:\Programas\NodeJS\node-v10.16.3-win-x64
+-- axios@0.19.0
+-- create-react-app@3.1.1
+-- eslint@6.4.0
+-- highcharts@7.2.0
+-- highcharts-react-official@2.2.2
+-- my-app@0.1.0 -> E:\PUC\RelatorioCanvas\reactJs
+-- npm@6.9.0
+-- react@16.9.0
+-- react-scripts@3.1.1
+-- typescript@3.6.3
`-- yarn@1.17.3

npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/eslint-plugin@1.6.0
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/parser@1.6.0
npm ERR! peer dep missing: typescript@*, required by ts-pnp@1.1.2
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/parser@1.6.0
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/typescript-estree@1.6.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.17.1
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/typescript-estree@1.6.0
npm ERR! peer dep missing: typescript@*, required by ts-pnp@1.1.2
npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/eslint-plugin@1.13.0
npm ERR! peer dep missing: eslint@^5.0.0, required by @typescript-eslint/parser@1.13.0

I already install highcharts and highcharts-react-official, but the issue persists.

How I could fix this issue?

score 4 · Answer 1 · answered Sep 20 '19 at 15:27

4

You may have to install the typescript version of highcharts.

npm install @types/highcharts

answered Sep 20 '19 at 15:27

Bharat Biswal

1,755
2
15
23

score 2 · Accepted Answer · answered Sep 20 '19 at 15:39

I found what was causing the problem.

I install everything using the -g option. The packages was installed globally, now I put them as dependencies in my project and use npm install.

It works perfectly now.

This is how my package.json looks now

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "react": "~16.8.6",
    "react-dom": "^16.8.6",
    "highcharts": "^6.0.0",
    "typescript": "^2.8.0",
    "highcharts-react-official": "^2.2.0",
    "eslint": "^5.0.0",
    "react-scripts": "3.0.1"
  },

Erro in ReactJS - Module not found: Can't resolve 'highcharts'

2 Answers2