This is a mobile optimized page that loads fast, if you want to load the real page, click this text.

Проблема js/react + rage-rpc = mp is not defined

U

UncleDad

Новый участник
26 Мар 2023
10
0
1
Пытаюсь подключить rage-rpc но возникли проблемки именно на cef части.
Собираю через react-scripts build - npx gulp

если использую react-scripts start, то получаю ошибку
Код: 
mp is not defined
s@http://localhost:3000/static/js/bundle.js:4677:7
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js/</</<@http://localhost:3000/static/js/bundle.js:4802:19
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js/</<@http://localhost:3000/static/js/bundle.js:5166:7
t@http://localhost:3000/static/js/bundle.js:4606:19
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js/</<@http://localhost:3000/static/js/bundle.js:4639:18
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js/<@http://localhost:3000/static/js/bundle.js:4640:4
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js/<@http://localhost:3000/static/js/bundle.js:4595:28
./node_modules/@user/rage-rpc/dist/rage-rpc.min.js@http://localhost:3000/static/js/bundle.js:4596:2
options.factory@http://localhost:3000/static/js/bundle.js:48373:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:47819:33
fn@http://localhost:3000/static/js/bundle.js:48030:21
./src/components/EntryPage.jsx@http://localhost:3000/static/js/bundle.js:217:93
options.factory@http://localhost:3000/static/js/bundle.js:48373:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:47819:33
fn@http://localhost:3000/static/js/bundle.js:48030:21
./src/App.js@http://localhost:3000/static/js/bundle.js:19:98
options.factory@http://localhost:3000/static/js/bundle.js:48373:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:47819:33
fn@http://localhost:3000/static/js/bundle.js:48030:21
./src/index.js@http://localhost:3000/static/js/bundle.js:538:81
options.factory@http://localhost:3000/static/js/bundle.js:48373:31
__webpack_require__@http://localhost:3000/static/js/bundle.js:47819:33
@http://localhost:3000/static/js/bundle.js:48955:56
@http://localhost:3000/static/js/bundle.js:48957:12

Искал решение, найти не смог, может кто подскажет как лечить/решить
 
U

UncleDad

Новый участник
26 Мар 2023
10
0
1
Добавлено, вот весь package.json
Код: 
{
  "name": "cfe",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@ragempcommunity/types-cef": "2.1.1",
    "rage-rpc": "0.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.2.7",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-inline-source": "^4.0.0",
    "gulp-replace": "^1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "npx": "npx gulp"
  },
  "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"
    ]
  }
}
Если убираю eslint то вижу белый экран
 
K

kirjushka////////////

Участник портала
28 Янв 2023
21
11
13
Во-первых, типизацию это можно добавить как Dev зависимость, это указано в примере установки.

Код: 
yarn add -D @ragempcommunity/types-cef

Во-вторых, надо также указать в tsconfig путь к типизации. Это также указано в установке.


Код: 
{
 "compilerOptions": {
  "types": ["{RELATIVE_PATH_TO_NODE_MODULES}/@ragempcommunity/types-cef"]
 }
}

Вместо

Код: 
{RELATIVE_PATH_TO_NODE_MODULES}

Надо

Код: 
./node_modules

То есть


Код: 
{
 "compilerOptions": {
  "types": ["./node_modules/@ragempcommunity/types-cef"]
 }
}
 
Реакции: h4cker777
U

UncleDad

Новый участник
26 Мар 2023
10
0
1
Так у меня же не используется ts в данном проекте, tsconfig не кому читать
 
U

UncleDad

Новый участник
26 Мар 2023
10
0
1
kirjushka//////////// написал(а):
А, ну ладно. В итоге проблема осталась или ещё что-то?
Нажмите для раскрытия...
проблема осталась, я конечно могу добавить ts в проект, но возникает вопрос как/чем его потом собирать что бы получить скомпилированный index.html
 
K

kirjushka////////////

Участник портала
28 Янв 2023
21
11
13
В общем, в конфиге eslint'a добавь


Код: 
"globals": {
    "mp": "readonly",
}
 
Реакции: FireFeed
K

kirjushka////////////

Участник портала
28 Янв 2023
21
11
13
И да, ты можешь проинициализировать реакт проект с ts и писать всё равно на js (возможно чуть конфиги надо будет донастроить).
 
U

UncleDad

Новый участник
26 Мар 2023
10
0
1
добавил ts, ошибка "mp is not defined" не ушла

package.json
Код: 
{
  "name": "cfe",
  "version": "0.1.0",
  "dependencies": {
    "rage-rpc": "0.4.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.0",
    "@types/node": "^18.15.10",
    "@types/react": "^18.0.29",
    "@types/react-dom": "^18.0.11",
    "react-router-dom": "^6.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^3.3.0"
  },
  "devDependencies": {
    "@ragempcommunity/types-cef": "2.1.1",
    "gulp": "^4.0.2",
    "gulp-inline-source": "^4.0.0",
    "gulp-replace": "^1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "npx": "npx gulp"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

tsconfig.json
Код: 
{
  "exclude": ["node_modules", "dist"],
  "compileOnSave": true,
  "compilerOptions": {
    "types": ["./node_modules/@ragempcommunity/types-cef"],
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es6", "esnext", "DOM"],
    "rootDir": ".",
    "outDir": "dist",
    "baseUrl": "./",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true
  },
  "include": ["./**/*"]
}

index.tsx
Код: 
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

App.tsx
Код: 
import React from 'react'
import { RouterProvider, createBrowserRouter, Navigate } from 'react-router-dom';
import EntryPage from "./components/EntryPage";
import {register} from "rage-rpc";

const router = createBrowserRouter([
    {
        path: '/',
        element: <EntryPage />,
    },
]);

register('cf.home', () => {
    return <Navigate to='/' />
});

function App() {
  return (
      <RouterProvider router={router} />
  );
}

export default App;

EntryPage.tsx
Код: 
import React from 'react';
import * as LMB from '../assets/leftmousebutton.png';
import {triggerServer} from "rage-rpc";

const EntryPage = () => {
    return (
      <form onSubmit={handleSubmit}>
        <div className="h-screen w-full select-none">
            <a href="/characters" className="cursor-default">
            <div className="relative flex items-center justify-center h-full">
                <div className="absolute top-32 uppercase text-center text-2xl">
                Добро пожаловать<br/>
                на сервер
                </div>
                <div className="absolute bottom-32 uppercase text-center text-2xl">
                    Нажмите <img src={LMB} width="30" height="30" className="m-0 p-0 inline-block pointer-events-none"/><br/>
                </div>
            </div>
            </a>
        </div>
        </form>
    );
};

const handleSubmit = () => {
   triggerServer('s.start');
}

export default EntryPage;
 
Последнее редактирование:

ilhmjv

Новый участник
18 Июл 2021
75
2
45
привет, ты все ещё не исправил ошибку? мне кажется реакт просто не хочет пропускать глобальную переменную в свою средку разработки... но как это исправить хрен его знает, люди же ведь как то пишут.
 
U

UncleDad

Новый участник
26 Мар 2023
10
0
1
Решил проблему частично, откатился обратно на js, убрал rage-rpc, указал localhost:3000 в browser.url, заработало, но при вызове из web mp.trigger("serverEvent", "login") на сервере получаю 4 вызова этого события
 
Ответить в теме

Similar threads

В
Проблема с cdn redage v3
Ответы
15
Просмотры
1K
Решение проблем и помощь
ВладиславDesi
В
Меню
Вход
Регистрация