Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/inserts'

[Ridder90]

Thnx for building this usefull library.

When installed on my react based project. I get:

ERROR in ./node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtObjNode/Tombstones.js 9:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtObjNode'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtStrNode/StrEdit.js 11:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtStrNode'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtStrNode/index.js 9:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtStrNode'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtVecNode/JsonCrdtExtNode.js 8:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtVecNode'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtVecNode/index.js 8:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtVecNode'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/FocusRegion/index.js 9:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/FocusRegion'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/inserts/ArrayInsert.js 8:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/inserts'
npm-1  | 
npm-1  | ERROR in ./node_modules/clickable-json/lib/inserts/ObjectInsert.js 8:16-32
npm-1  | Module not found: Error: Can't resolve 'use-t' in '/application/node_modules/clickable-json/lib/inserts'

This is our package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "WDS_SOCKET_PORT=443 ESLINT_NO_DEV_ERRORS=1 react-scripts start --no-cache",
    "build": "react-scripts build",
    "serve-build": "http-server --proxy http://localhost:3000? -p 3000 ./build",
    "lint": "eslint --ext .js,.jsx,.tsx,.ts src",
    "lint:fix": "eslint --ext .js,.jsx,.tsx,.ts src --fix",
    "lint:clear": "eslint --cache --cache-location node_modules/.cache/eslint/ --no-cache",
    "test": "react-scripts test --env=jsdom --setupFiles='./jest.setup.js'",
    "ci:test": "CI=true react-scripts test"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@emotion/babel-plugin": "^11.11.0",
    "@emotion/eslint-plugin": "^11.11.0",
    "@fortawesome/fontawesome-pro": "^6.5.2",
    "@testing-library/jest-dom": "^6.4.5",
    "@testing-library/react": "^15.0.7",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/plotly.js-basic-dist": "~1.54.4",
    "@types/react-plotly.js": "^2.6.3",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "babel-plugin-emotion": "^11.0.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-chai-friendly": "^0.7.4",
    "eslint-plugin-react": "^7.34.2",
    "eslint-plugin-unused-imports": "^2.0.0",
    "react-select": "^5.8.0",
    "typescript": "^4.9.5"
  },
  "engines": {
    "npm": "^10.0.0",
    "node": "^20.0.0"
  },
  "dependencies": {
    "@azure/msal-browser": "^3.15.0",
    "@azure/msal-react": "^2.0.17",
    "@emotion/babel-preset-css-prop": "^11.11.0",
    "@emotion/core": "^11.0.0",
    "@emotion/css": "^11.11.2",
    "@emotion/react": "^11.11.4",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/pro-light-svg-icons": "^6.5.2",
    "@fortawesome/pro-regular-svg-icons": "^6.5.2",
    "@fortawesome/pro-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@json2csv/plainjs": "^7.0.6",
    "@json2csv/transforms": "^7.0.6",
    "@react-pdf/renderer": "^3.4.4",
    "@types/react": "^18.3.3",
    "axios": "^1.7.2",
    "bootstrap": "^5.3.3",
    "clickable-json": "^1.11.0",
    "dayjs": "^1.11.11",
    "facepaint": "^1.2.1",
    "history": "^5.3.0",
    "html-to-image": "^1.11.11",
    "html5-qrcode": "^2.3.8",
    "http-server": "^14.1.1",
    "jquery": "^3.7.1",
    "js-cookie": "^3.0.5",
    "papaparse": "^5.4.1",
    "plotly.js-basic-dist": "^2.32.0",
    "powerbi-client": "^2.23.1",
    "powerbi-client-react": "^1.4.0",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-app-polyfill": "^3.0.0",
    "react-datepicker": "^6.9.0",
    "react-dom": "^18.3.1",
    "react-html5-camera-photo": "^1.5.11",
    "react-image-webp": "^0.8.0",
    "react-images-uploading": "^3.1.7",
    "react-plotly.js": "^2.6.0",
    "react-redux": "^9.1.2",
    "react-router-breadcrumbs-hoc": "^4.1.0",
    "react-router-dom": "^6.23.1",
    "react-scripts": "^5.0.1",
    "react-to-print": "^2.15.1",
    "react-toastify": "^10.0.5",
    "react-webcam": "^7.2.0",
    "reactstrap": "^9.2.2",
    "redux": "^5.0.1",
    "redux-axios-middleware": "^4.0.1",
    "redux-define": "^1.1.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^3.1.0",
    "sass": "^1.77.2"
  }
}

[Ridder90]

If i understand correctly there are 2 issues.

1. use-t is not in the dependency list. 2 use-t is not compatible with react 18.

Hope this is fixable! If you need help I would like to know :)

[streamich]

Hey! You need to install use-t as a peer dependency:

yarn add use-t

It should now support React 18.