How to add the PCUI package to a react app

Help & Support
1

Hi folks. Looks like there have been some pretty big changes to the pcui and observer packages recently. I’ve tried multiple time to add the package as a dependency and tried to build but it keeps failing. Currently I’m using 1.9 which seems to be more stable.
Could someone share the steps needed to use the latest packages from npm?

1 Like
2

@Elliott or @kungfooman Would you be able to help out here please?

1 Like
3

Hi @mikelyndon , could you describe what part of the build is failing and how you’re trying to import PCUI into your project?

1 Like
4

Sure thing. I create a new react app and added the pcui and observer packages

npx create-react-app pcui-testing
yarn add @playcanvas/pcui
yarn add @playcanvas/observer

Then in the App.js file

import { Label } from "@playcanvas/pcui/Label"
function App() {
...
<Label text='Hello World' />
}

I get this error:

Attempted import error: 'Label' is not exported from '@playcanvas/pcui/Label'.

I’ve also tried building the package with yarn build but that fails to compile.
I guess I’m under the impression that when I add a package dependency I shouldn’t have to build that package’s dependencies.

5

If I try and build from the project root I get,

./node_modules/@playcanvas/pcui/Element/index.mjs
Can't import the named export 'Events' from non EcmaScript module (only default export is available)

If I try and run npm run build from within project/node_modules/@playcanvas/pcui I get,

> rollup -c

Error: ENOENT: no such file or directory, lstat '/Users/mike/Documents/dev/web/pcui-testing/node_modules/@playcanvas/pcui/rollup.config.js'
    at Object.realpathSync (node:fs:2486:7)
    at runRollup (/Users/mike/Documents/dev/web/pcui-testing/node_modules/rollup/dist/bin/rollup:1327:29)
    at Object.<anonymous> (/Users/mike/Documents/dev/web/pcui-testing/node_modules/rollup/dist/bin/rollup:1455:5)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47
6

It looks like your import of Label needs to be moved from a named export to the default export. So changing

import { Label } from "@playcanvas/pcui/Label"

to

import Label from "@playcanvas/pcui/Label"

I’ve just noticed that our github readme for PCUI still shows examples using the named exports. I’ll update these now. Sorry for any confusion this may have caused!

7

Hmmm. Still the same thing.


./node_modules/@playcanvas/pcui/Element/index.mjs
Can't import the named export 'Events' from non EcmaScript module (only default export is available)

I guess this is part of my confusion. If I clone the GitHub repo and build from there it seems to work but then I have to copy the dist folder across to my other project.

And it looks like the docs are referring to how a user would handle the GitHub repo rather than an npm package. Also, I’m relatively new to a lot of this so I apologise if this all seems obvious.

8

The npm package of PCUI should work. You shouldn’t need to build a local version of the github repo unless you want to modify / contribute to the repo.

The react version of PCUI can be used as follows:

That example is using the npm package to import and render a TextInput.

1 Like
9

I really appreciate you taking the time to help me, and I suspect at this point you might also be frustrated. But I’ve tried that and it doesn’t work. I get the same error as before.

10

No worries. Are you importing?

import Label from "@playcanvas/pcui/Label/component"

As you’re building for React you’ll need to import the component version.

11

Yup. Just like that.

Since it’s complaining about Events could it have something to do with how the Observer module is being imported?

12

It could be that yes. Would it be possible to give a little more context surrounding the current error? Where and when the error occurs etc?

If you could upload an example project that I can debug that’d be even better :slightly_smiling_face:

13

The problem is this line in pcui-testing\node_modules\@playcanvas\pcui\Element\index.mjs:

import { Events } from '@playcanvas/observer';

It is importing the ES5 version, while it requires the ES6 version, so you could rewrite it to:

import { Events } from '@playcanvas/observer/index.mjs';

Its of course annoying that you have to dive into node_modules and fix things up. But after yarn start it should work at least now until this issue is resolved.

I’ve run into this problem myself in a different context: https://github.com/playcanvas/pcui/pull/135

Basically I want a standalone version without having to care a second how the NPM package is doing its job, it shall just do its job.

Edit: I opened an issue about it: https://github.com/playcanvas/playcanvas-observer/issues/4

3 Likes
14

This is just your standard create react app with the pcui and observer packages added.

As kungfooman pointed out, changing the import works.

3 Likes