React: Module not found: Can't resolve 'react-html-parser'

Question

I am trying to install react-html-parser in my docker container 'client':

docker-compose.yml
client/
      Dockerfile-dev
      node_modules/
      src/   
         components/
                   Seeds.jsx

and try and import it here:

Seeds.jsx

import React, { Component } from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 }
from 'react-html-parser';
import axios from 'axios';

'axios' and 'react' are instaled allright, but not 'react-html-parser'. Console logs me the error:

index.js:1437 ./src/components/Seeds.jsx
Module not found: Can't resolve 'react-html-parser' in '/usr/src/app/src/components'

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "react-html-parser":"^2.0.2", # <---------NEW
    "spotify-web-api-js": "^0.22.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1"
  }
}

Dockerfile-dev

# base image
FROM node:11.6.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json

RUN npm install --silent
RUN npm install [email protected] -g --silent

# start app
CMD ["npm", "start"]

docker-compose.yml

  client:
    build:
      context: ./services/client
      dockerfile: Dockerfile-dev
    volumes:
      - './services/client:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - NODE_ENV=development
      - REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
    depends_on:
      - web

I can'f find the module inside my node_modules folder...

what am I missing here?

EDIT: npm install without --silent:

npm WARN deprecated [email protected]: Way too old
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: use String.prototype.padStart()

> [email protected] postinstall /usr/src/app/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall /usr/src/app/node_modules/core-js-pure
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Have you taken the --silent off your npm install just to see if the install is logging out any errors? — Intellidroid
– Intellidroid, Commented May 28, 2019 at 0:20
Are you launching this via a docker-compose.yml; and if you are, does it declare an anonymous volume for your node_modules directory? — David Maze
– David Maze, Commented May 28, 2019 at 0:36
yes, via docker-compose. please refer to edit for details. thanks — 8-Bit Borges
– 8-Bit Borges, Commented May 28, 2019 at 0:38

David Maze · Accepted Answer · 2019-05-28 00:43:50Z

7

When your docker-compose.yml file says:

volumes:
  - '/usr/src/app/node_modules'

You're telling Docker your node_modules directory contains critical data that needs to be persisted across container runs. The first time you launch the container it will get populated from the image, but because that directory contains critical data, Docker will never ever update it again, even if you try to npm install additional modules.

For a near-term workaround, it's enough to docker-compose stop; docker-compose rm; docker-compose up --build your containers. Deleting the existing container (and its anonymous volume) is important.

answered May 28, 2019 at 0:43

David Maze

165k47 gold badges262 silver badges303 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

8-Bit Borges Over a year ago

is your workaround required for all services under compose or only client?

David Maze Over a year ago

Only the service where you specifically need to delete the anonymous volumes. (You might consider whether you can remove these volume declarations altogether, because your code isn't data; it should be in the image you build.)

MattSom Over a year ago

@DavidMaze I.love.you.

Naveen Kamath · Accepted Answer · 2021-10-31 09:26:14Z

1

Try this command npm i react-html-parser --force

answered Oct 31, 2021 at 9:26

Naveen Kamath

671 silver badge6 bronze badges

2 Comments

joanis Over a year ago

Can you add an explanation as to why this would solve the problem?

nima Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂

Collectives™ on Stack Overflow

React: Module not found: Can't resolve 'react-html-parser'

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related