doesnt work

[Chartieer]

I started reading your article and rebuild it as described, doesnt work for me.
Then i checkout the git, yarn + build the components yarn nx build:ui-components + yarn nx serve frontend1
doesnt work. Then I diff the git and the blogpost version, found there are some diffs e.g. the filepaths

      "ui-components": ["dist/libs/ui-components"],
      "ui-components/loader": ["dist/libs/ui-components/loader/index.cjs.js"],
      "ui-components-react": ["dist/libs/generated/ui-components-react/src/components.ts"]

and the Proxy path

I fizzle around a bit and finally got it compiled without error andd the my-component tag is in the markup but nothing is displayed ;-(

Normally there should be something like

import { defineCustomElements } from 'my-path/dist/loader/filename.js';
...
..

defineCustomElements(window)

Inside the index file of the ReactApp. I try to import but it doesn´t work for me.

I am wrong? Is the demo really working? maybe you miss out a step when you sayed "We can already use the ui-components-react package in our React app:" how?

thanks for your help

[Mobiletainment]

Hi Chartieer,

thanks for opening the issue.

I'm afraid that the setup and configuration are subject to the exact version you use for Stencil, @Nxext/stencil, @stencil/react-output-target, and Nx itself.
My article used older package versions, which had some different haptics. Most notably the difference in path mapping which you already figured.

I just ran npm start on the latest version of the repository and noticed the error Cannot find builder "@nxext/stencil:serve, which indicates that the Stencil library was not built during the process which would explain why you got that error.

In any case, I will update the repository to use the latest versions of all the packages, because once again, some things have changed in the meanwhile. I'll let you know when I'm done and would be happy if you could cross-check that everything is working then.

Thank you for your time.

[Chartieer]

I commened on you medium post. I got it up and running.

[Chartieer]

´changes:
apps/frontend1/src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { defineCustomElements } from 'ui-components/loader';

import App from './app/app';

ReactDOM.render(<App />, document.getElementById('root'));

defineCustomElements(window);

And in workspace.json und ui-components Workspace

"serve": {
          "builder": "@nxext/stencil:build",
          "options": {
            "projectType": "library",
            "configPath": "libs/ui-components/stencil.config.ts",
            "serve": true,
            "watch": true
          }
        }

Then you can start app with. yarn start

Packages are are updated to latest versions.

[davidrock]

Hi Chartieer,

thanks for opening the issue.

I'm afraid that the setup and configuration are subject to the exact version you use for Stencil, @Nxext/stencil, @stencil/react-output-target, and Nx itself.
My article used older package versions, which had some different haptics. Most notably the difference in path mapping which you already figured.

I just ran npm start on the latest version of the repository and noticed the error Cannot find builder "@nxext/stencil:serve, which indicates that the Stencil library was not built during the process which would explain why you got that error.

In any case, I will update the repository to use the latest versions of all the packages, because once again, some things have changed in the meanwhile. I'll let you know when I'm done and would be happy if you could cross-check that everything is working then.

Thank you for your time.

Hi @Mobiletainment, did you got any progress on that?

[Mobiletainment]

Hi there.

I apologize for leaving this idle for so long.

I didn't have time to resolve this properly, but I will plan some time for Sunday to update the project and make it nice again.

Sorry for the inconvenience.

[Mobiletainment]

Hi @Chartieer and @davidrock:

I finally managed to look into the project again and ran into the issue that the library (which is specified as a dependency of the frontend) wasn't built when it was served. This resulted in the following error: Module not found: Error: Can't resolve 'ui-components-react'.

Specifying the build order turned out to be a bit tricky, as Nx didn't allow me to easily specify commands that should be run before serving the project. Probably the easiest fix for that would have been to just commit the generated files into the repository, so that they can be correctly resolved without further ado, even without building them first. This would probably have also solved @Chartieer's problem with the component not being displayed, because a working example would be checked in.
After some digging, I figured that the @nrwl/web:file-server does not ignore the withDeps flag like the @nrwl/web:dev-server does (see #7). This in combination with the new React-output-target and its includeDefineCustomElements should now do the job again and output a working compilation into the dist folder.

If it's not too late already, you can find the v2.0.0 release here: https://github.com/Mobiletainment/Nx-Stencil-React/releases/2.0.0

Thank you for opening the ticket. If he problem still persists, I'm happy to follow up on it

[tgoyer]

I downloaded and extracted the v2.0.0 zip release and after running npm install, I run npm run build and get:

> [email protected] build /Users/timgoyer/source/ui-components
> nx build


> nx run frontend1:build 
Starting type checking service...
Using 10 workers with 2048MB memory limit
Hash: e261e2931d46c0aeafe2
Built at: 08/03/2022 4:08:12 PM
Entrypoint main = runtime.js runtime.js.map vendor.js main.js main.js.map
Entrypoint polyfills = runtime.js runtime.js.map polyfills.js polyfills.js.map
Entrypoint styles = runtime.js runtime.js.map styles.js styles.js.map
chunk {main} main.js, main.js.map (main) 850 bytes ={runtime}= ={vendor}= [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 298 KiB ={runtime}= [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 0 bytes ={main}= ={polyfills}= ={styles}= ={vendor}= [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 7.88 KiB ={runtime}= [initial] [rendered]
chunk {vendor} vendor.js (vendor) 974 KiB ={main}= ={runtime}= [initial] [rendered] split chunk (cache group: vendor) (name: vendor)

ERROR in ./app/app.tsx
Module not found: Error: Can't resolve 'ui-components-react' in '/Users/timgoyer/source/ui-components/apps/frontend1/src/app'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `nx build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/timgoyer/.npm/_logs/2022-08-03T21_08_12_699Z-debug.log