Repository navigation
Angular 13 compatibility (and other frameworks/bundlers) #269
Description
Activity
- changed the title
[-]ESM builds not published to npmjs[/-][+]Angular 13 compatibility (and other frameworks/bundlers)[/+]on Sep 5, 2023 - added a commit that references this issue
on Nov 1, 2023 Thanks for putting this together. I was trying to go through this video to learn how to implement React with Crestron but I was running into a brick wall for a while getting this error after installing the @crestron/ch5-crcomlib package:
It wouldn't work with either:
import { publishEvent } from '@crestron/ch5-crcomlib';
or
import * as CrComLib from '@crestron/ch5-crcomlib';
The result would be this error:ERROR in ./src/App.tsx 10:0-54 Module not found: Error: Can't resolve '@crestron/ch5-crcomlib' in 'C:\...\crestron-react-app\src'Your suggestions got me to where I need to be (I hope), but I wanted to add a few things I discovered along the way that might help others that find this thread (at least until Crestron decides to fix this). This is how I did it. Feel free to share improvements to my workflow.
- Don't use Create React App or you will get a lot of source map errors when running
npm run start. I was never planning to use CRA but the video I mentioned above used it and I was following along. I switched over to Vite and the errors went away. - Install the ch5-crcomlib package
npm i @crestron/ch5-crcomlib. This won't work without doing the steps below, but it will get you started. - Clone this repo into a new folder outside your project https://github.com/Crestron/CH5ComponentLibrary
- In the cloned repo, follow @tajnymag's instructions above by editing the package.json and tsconfig.esm.json files.
- Now run
npm run build:dev:esmand it will create a lib-esm folder in your build_bundles folder. - Copy the lib-esm folder into your vite project inside \node_modules@crestron\ch5-crcomlib\build_bundles. I renamed this from lib-esm to simply esm.
- Open \node_modules@crestron\ch5-crcomlib\package.json and add the following line:
"main": "./build_bundles/esm/index.js", - Inside the index.html file add @tajnymag's script to fix the process issues
<script> window['process'] = { env: { BUILD_VERSION: '1.0.0', BUILD_DATE: '2019-01-01', }, }; </script>- Run npm run dev and you should be good to go.
- This is as far as I've gotten so far. You might want to run
npm run build:prod:esmbefore you push to production and move that folder over for production.
Reacted by Marek Lukáš- Don't use Create React App or you will get a lot of source map errors when running
At the moment, the library is published only in its amd, umd and cjs form. Would it be possible to also provide the unbundled esm format? Possibly also combined with specifying the
exports(docs) field in package.json to make consuming bundlers aware of the available library formats.We are trying to use the components in an Angular 13 project so far without any luck. The provided shell template helps only a little, as it heavily relies either on old, custom or heavily configured tooling.
However, with some modifications, we were able to make the package work. Here are the changes:
package.json#exports
We added the exports field to package.json. This allowed the angular compiler to import the correct compiled library.
tsconfig.esm.json
npm build:dev:esm didn't seem to do anything. No errors and no artifacts created. We solved it by specifying
filesproperty intsconfig.esm.json. There is probably a better way to solve this.Usage of process.env
CH5ComponentLibrary relies on webpack to replace
process.envused in the source files. This doesn't work for the esm build which are built withtsconly. Without further modifying the library, we opted to polyfillwindow.process.envin the global scope of our app.