0

I cannot launch my application. I have no clue what I am searching for. Everything seems good.

In the very beginning, I tried to change my store from redux to mobx. Everything I've done is mostly about typescript babel transformation etc. Eventually, my project has built successfully. However, typescript build is not enough to launch my project. At this moment I am confused. is there any suggestion? the solution would be better :)))

This is my package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.11.0",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.10.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "@babel/preset-typescript": "^7.10.4",
    "@types/jest": "^26.0.7",
    "@types/node": "^14.0.26",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-select": "^3.0.14",
    "axios": "^0.18.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "create-react-hook": "^3.0.2",
    "date-fns": "^2.0.0-alpha.27",
    "mobx": "^5.15.4",
    "mobx-react": "^6.2.5",
    "mobx-react-lite": "^2.0.7",
    "moment": "^2.24.0",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.6.3",
    "react-alert": "^5.5.0",
    "react-alert-template-basic": "^1.0.0",
    "react-confirm-alert": "^2.0.7",
    "react-datepicker": "^2.5.0",
    "react-dom": "^16.6.3",
    "react-dropdown": "^1.6.4",
    "react-fileupload-progress": "^0.4.2",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1",
    "react-select": "^2.4.3",
    "react-table": "^6.8.6",
    "react-transition-group": "^4.0.1",
    "redux": "^4.0.1",
    "typescript": "^3.9.7"
  },
  "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",
    "not dead",
    "not ie <= 11",
    "not op_mini all",
    "not ie <= 11",
    "not op_mini all"
  ]
}

also, errors have shown as below

Error: mobx-react-lite requires React with Hooks support
▼ 2 stack frames were expanded.
Module.<anonymous>
C:/Users/User/Source/repos/sasd/node_modules/mobx-react-lite/dist/mobxreactlite.esm.js:5
Module../node_modules/mobx-react-lite/dist/mobxreactlite.esm.js
http://localhost:3000/static/js/0.chunk.js:7192:30
▲ 2 stack frames were expanded.
__webpack_require__
C:/Users/User/Source/repos/obilet/webpack/bootstrap:782
  779 | };
  780 | 
  781 | // Execute the module function
> 782 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  783 | 
  784 | // Flag the module as loaded
  785 | module.l = true;`
Sabri Korkmaz
  • 77
  • 11

3 Answers3

3

The first react version that supports hooks is 16.8.0

Not sure though of your installed library version with these annoying ^

Try npm update react or yarn upgrade react

Maxime Helen
  • 1,382
  • 7
  • 16
0

add "use client" where you are using mobx

Dendi 4890
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 06 '23 at 12:16
0

This is going to be a late answer and doesn't actually resolve ops issue as they were using an older version of react, but if you come across this problem using modern react and Next.js (>= 13.x) it's as the commenter above states. You need to add "use client" at the top of any script that you plan on making front facing while using hooks. Next.js will treat any other script a server component disabling hooks.

"use client";

import { useState } from "react";
import { observer } from "mobx-react-lite";

function Navbar() { ... }
JesseTMIA
  • 1
  • 1