Help with importing client resources

[toruk]

Can someone explain how I can import a resource (NativeUI) to client.

My current setup: 

I have been writing my gamemode using a typescript boiler plate (https://github.com/MarkCavalli/rage-server-start-template)

So files in app folder client get compliled to client_packages and same for server into packages

However when I try to require a third party script (NativeUI) I get an error  TypeError  Point is not a constructor

I'm importing it into the client via:

const NativeUi = require('../libs/nativeui.js')

mp.events.add("PlayerJoin", () => {
	const Menu = NativeUI.Menu;
    const Point = NativeUI.Point;
    const UIMenuListItem = NativeUI.UIMenuListItem;
    const ItemsCollection = NativeUI.ItemsCollection;

    const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50));
    ui.AddItem(new UIMenuListItem(
        "List Item",
        "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.",
        new ItemsCollection(["Item 1", "Item 2", "Item 3"])
    ));
})

 

Can anyone help me? I'm completely stuck for ideas on how I can get this to work.

[joew]

I`m having the same trouble too. NativeUI jusn`t can`t works. I wish someone can help us

[toruk]

Might as well just start building my own menu  

[joew]

@toruk I figured out how install NativeUI.

Don't knew if its the best way, but it worked.

1) I downloaded NativeUI from source: https://github.com/XMGamingMaster/RageMP-NativeUI
2) Install typescript => Open cmd with adm permissions, and go to RAGEMP\server-files folder and exec:

npm install -g typescript

3) On the same cmd, go to nativeui folder and exec:

tsc index.ts

It will gives a lot of errors, just ignore them.

4) Came back to RAGEMP\server-files folder and exec:

npm run build

To import nativeui, you have to use:

const NativeUI = require("../nativeui/index.js");

Just check the path for your nativeui folder.

Thats all. 

Wish you can fix your problem too

Edited May 27, 2019 by joew

[toruk]

Thanks @joew I Literally fixed my issue an hour ago lol. Turns out my issue was with my webpack setup.

[joew]

41 minutes ago, toruk said:

Thanks @joew I Literally fixed my issue an hour ago lol. Turns out my issue was with my webpack setup.

Nice

Could you tell me how u fixed, please? I can fix too, but i don't knew if re-build nativeui was the best solution. If i don't have the source i probally can't fix the way i did. 

 

Ty!!!

[toruk]

ok ignore my last comment. Thought I had it working, Now its not  still getting `TypeError: Point is not a constructor`.

@joew I was already importing NativeUi the way you suggested.

[joew]

1 hour ago, toruk said:

ok ignore my last comment. Thought I had it working, Now its not  still getting `TypeError: Point is not a constructor`.

@joew I was already importing NativeUi the way you suggested.

You can try:

const NativeUI = require('../libs/nativeui.js');
const Menu = NativeUI.Menu;
const UIMenuItem = NativeUI.UIMenuItem;
const UIMenuListItem = NativeUI.UIMenuListItem;
const Point = NativeUI.Point;
const ItemsCollection = NativeUI.ItemsCollection;

mp.events.add("PlayerJoin", () => {
    const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50));
    ui.AddItem(new UIMenuListItem(
        "List Item",
        "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.",
        new ItemsCollection(["Item 1", "Item 2", "Item 3"])
    ));
});

 

[toruk]

Nope tried that as well same result

Edited May 28, 2019 by toruk

[favero]

const NativeUI = require('nativeui');

this help you