How can I properly install react-liquid with npm for my react app?

Technical Q&A
1

Hello everyone,

I would like to use npm to install a package called react-liquid so that my react app could output and interpret Liquid code.

I now have a package.json file in my assets folder that looks like this :

{
  "name": "hymy-cadeaux",
  "version": "1.0.0",
  "description": "",
  "main": "theme.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://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@github.com/florentdrousset/hymy-cadeaux.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/florentdrousset/hymy-cadeaux/issues"
  },
  "homepage": "https://github.com/florentdrousset/hymy-cadeaux#readme",
  "dependencies": {
    "react-liquid": "^2.0.1"
  }
}

and a package-lock.json in the same folder that looks like this :

{
  "name": "hymy-cadeaux",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "liquidjs": {
      "version": "6.4.3",
      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-6.4.3.tgz",
      "integrity": "sha512-m1xSB10Ncu22NR3X0xdaqu/GvP1xadDCFYGqGgd6me8DAWjyA68BKE5DHJmSxw1CGsWPsX+Hj2v/87J2w/LvMQ=="
    },
    "react-liquid": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/react-liquid/-/react-liquid-2.0.1.tgz",
      "integrity": "sha512-Bd5ql+ewehetAFIMmgvJ3qaLO1cbHoZ6d7bW6rEHad4M+2ZjNcNBhzWNqBen3xUm9uxfVB88dKvFvEHPhrOSZg==",
      "requires": {
        "liquidjs": "^6.0.0"
      }
    }
  }
}

But I’m getting a ‘Uncaught ReferenceError: require is not defined’ when trying to use

import { ReactLiquid } from 'react-liquid'

in the JS file of my app.

Am I doing something wrong ?
Thanks in advance.