'CosmosDB not working because of conflicts inside React App

I am creating a new React app and trying to pull data from Azure CosmosDB and I get a bunch of conflicts. Given the popularity of both technologies, I just can't believe this is a generalized problem and I assume I must be doing something wrong.

I have npm v8.10.0 and node v16.14.2

I do npx create-react-app test-react-cosmos, then go into the folder and do npm install @azure/cosmos --save. When installing, I get a warning about 6 moderate severity vulnerabilities. If I try to go with npm audit fix --force, it goes all the way up to 71 vulnerabilities, 2 of them critical.

If I then run react, it all works well, until I try to add Cosmos to the App. As soon as I add const { CosmosClient } = require("@azure/cosmos"); to the code, I get a big warning and the app stops working properly.

Compiled with warnings.

Failed to parse source map from '/Users/danielvalenzuela/Desktop/test-react-cosmos/node_modules/jsbi/lib/jsbi.ts' file: Error: ENOENT: no such file or directory, open '/Users/danielvalenzuela/Desktop/test-react-cosmos/node_modules/jsbi/lib/jsbi.ts'

src/App.js
  Line 3:9:  'CosmosClient' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/jsbi/dist/jsbi-umd.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/danielvalenzuela/Desktop/test-react-cosmos/node_modules/jsbi/lib/jsbi.ts' file: Error: ENOENT: no such file or directory, open '/Users/danielvalenzuela/Desktop/test-react-cosmos/node_modules/jsbi/lib/jsbi.ts'

WARNING in src/App.js
  Line 3:9:  'CosmosClient' is assigned a value but never used  no-unused-vars

webpack compiled with 2 warnings

Am I doing something wrong? How can it be that the most used frontend tech stack is not compatible with the flagship database of one of the most important cloud providers?

Thanks in advance for your help!

PS: package.json looks like this

{
  "name": "test-react-cosmos",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@azure/cosmos": "^3.15.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution 1:^[1]

I am not sure what you are missing, It seems to be some issue with the node_modules. Can you try?

rm -rf node_modules && npm i

also here is an example react app

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sajeetharan

'CosmosDB not working because of conflicts inside React App

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]