Failure to import Stencil package's loader #14
Labels
bug
Something isn't working
Comments
|
Could it be related to -- |
|
Hmm, that's interesting! The Stencil docs are sort of... lacking... in direction for the "right" way to pull in an NPM package of Stencil components. However, the React documentation mentions importing from https://stenciljs.com/docs/react I would have assumed that this problem has something to do with your I’m almost positive that this isn’t an issue with the Ember version, unless you’ve experienced changing that and the problem being resolved. It’s likely an issue with
A confirmation that the React import as mentioned above works properly can help narrow it down! |
|
Based on your path, it seems like this might be a mono-repo — is that correct? I just want to double check you have the “built” version of the Stencil package on disk, if that’s the case — you should have a |
|
@alexlafroscia thanks for replying! So, to confirm - yes, React works, and indeed, I had to import About monorepo - yes, that's correct as well, it is indeed monorepo, but project is built, |
|
Very strange. I'm sorry this isn't working for you! Hopefully we can get to the bottom of this. Are you using yarn why ember-auto-importand let me know what version is being used by your app? I'm wondering if there's multiple versions at play here and an older one is being used by mistake. Just want to rule that out as a source of the problem, since the importing of the package really isn't handled by this addon at all; the addon just generates and injects some code that |
alexlafroscia
changed the title
|
@alexlafroscia sure, not a problem, there's an output: BTW thanks - that's useful knowledge, didn't know about that |
|
@alexlafroscia maybe I am the one that makes some silly mistake here, but, to clarify - should I import something in addition from |
|
You're welcome! You shouldn't need to import anything at all, anywhere, manually, when using this addon. The idea is that, because both Ember and Stencil follow some conventions, we can generate all of the required "glue" code through this addon so that you simple install this package as a dependency, install your Stencil package as a dependency, and an start using the WebComponents in your templates with nothing else to do.
You haven't done anything wrong -- that should be right! Is there any chance you can give me access to the repo that this is going wrong in? I understand if you can't -- I'll try to reproduce myself if you can't. |
|
Oh great, that's good to hear. But that's also something what I thought, I guess if there's something more needed you would mention about that in readme 😉 Sure, repo is here https://github.com/kbiedrzycki/stencil-poc I know - I could use lerna, but wanted to make it really quick and simple PoC. And probably I don't have to remind about that, but please remember to build stencil components first to make sure dist is in place. |
|
Hmmmmm this is interesting. I am going to bet that it has something to do with this: Let me see if changing it to instead leverage Lerna or a Yarn workspace makes it work again. I wouldn't be surprised if the issue is with referencing the dependency through |
|
Actually, I think I spoke too soon! Still checking it out but I have a hunch about what is wrong. |
|
Okay! So, the issue is that If you install What I'm going to do is
Just to explain, if you're curious, the reason that this happened was this:
Troll-y behavior! If you end up working with this addon some more, I would love to pick your brain a bit -- now that the addon has less work to do, thanks to improvements to Ember and |
|
Great summary! All makes sense I guess. Let me reply in points:
I was looking at addon code and seems some additional things, was wondering if they are needed, but then I saw it's Thanks for a true engagement here and great investigation! |
|
I suppose one reason for the addon is that it's a few lines of code per stencil package, which can potentially be a lot... |
Thanks for your help in getting this fixed! |
|
Seeing a similar issue to the one described above. Verified that the @esri/calcite-components stencil collection is using |
|
@alexabreu did you include Edit: What's your ember (and ember-cli) version and |
|
@kbiedrzycki thanks for getting back to me!
Do I need to be on the latest version of ember? |
|
You shouldn't... It's possible that Stencil has changed the layout of it's distribution files, though. Could you got into your |
|
Based on their documentation, it seems like the |
|
i'm trying to use the
|
|
Could the Output from script
|
|
@alexabreu I edited your comment just to hide the output from I don't think the |
|
@oldwestaction To clarify, you don't have |
|
that's what i suspected but wasn't sure, thanks for confirming @alexlafroscia! would it be possible to document it as a requirement in the README? |
|
@oldwestaction that's no problem as far as I'm concerned. I'll add a note to the installation instructions. |
|
I tried adding Contents of `package.json`
{
"name": "@esri/calcite-components",
"version": "1.0.0-beta.17",
"description": "Web Components for Esri's Calcite Design System.",
"main": "dist/index.js",
"module": "dist/index.mjs",
"es2015": "dist/esm/index.mjs",
"es2017": "dist/esm/index.mjs",
"types": "dist/types/components.d.ts",
"unpkg": "dist/calcite/calcite.js",
"collection:main": "dist/collection/index.js",
"collection": "dist/collection/collection-manifest.json",
"files": [
"dist/",
"hydrate/",
"loader/"
],
"scripts": {
"build": "npm run copy-icons && stencil build",
"copy-icons": "cpy ./node_modules/@esri/calcite-ui-icons/js/*.js ./src/components/calcite-icon/assets",
"start": "npm run copy-icons && stencil build --dev --watch --serve",
"test": "npm run copy-icons && stencil test --spec --e2e",
"test.watch": "npm run copy-icons && stencil test --spec --e2e --watchAll",
"posttest": "stencil build --prerender",
"prettier": "npm-run-all --parallel prettier:**",
"prettier:ts": "prettier --write \"src/**/*.ts?(x)\"",
"prettier:styles": "prettier --write \"src/**/*.scss\"",
"prerelease:prepare": "npm run build",
"release:prepare": "npm version prerelease --preid=beta --no-git-tag-version ",
"release:publish": "./support/release.sh",
"prestorybook": "npm run build",
"storybook": "start-storybook -s ./dist",
"prebuild-storybook": "npm run build",
"build-storybook": "build-storybook -s ./dist -o .docs",
"deploy-storybook": "storybook-to-ghpages",
"deploy": "npm-run-all build deploy-storybook"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Esri/calcite-components.git"
},
"dependencies": {
"@a11y/focus-trap": "git+https://github.com/patrickarlt/focus-trap.git#conditional-define-build",
"popper.js": "1.16.0"
},
"devDependencies": {
"@esri/calcite-base": "^1.2.0",
"@esri/calcite-colors": "^1.7.1",
"@esri/calcite-ui-icons": "^2.7.1",
"@stencil/core": "^1.8.5",
"@stencil/sass": "^1.1.1",
"@stencil/state-tunnel": "^1.0.1",
"@storybook/addon-backgrounds": "^5.3.3",
"@storybook/addon-centered": "^5.3.3",
"@storybook/addon-knobs": "^5.3.3",
"@storybook/addon-notes": "^5.3.3",
"@storybook/cli": "^5.3.3",
"@storybook/html": "^5.3.3",
"@storybook/storybook-deployer": "^2.8.1",
"@types/jest": "24.0.21",
"@types/jest-axe": "^3.2.1",
"@types/puppeteer": "1.20.2",
"axe-core": "^3.4.1",
"babel-loader": "^8.0.6",
"cpy-cli": "^3.0.0",
"gh-release": "^3.5.0",
"jest": "24.9.0",
"jest-axe": "^3.2.0",
"jest-cli": "24.9.0",
"npm-run-all": "4.1.5",
"prettier": "1.18.2",
"puppeteer": "1.19.0",
"storybook": "^5.3.3",
"workbox-build": "4.3.1"
},
"license": "Apache-2.0"
}
|
Thanks for clarifying this! Could you explain which aspects of |
We rely on Essentially, this add-on (in its current state) does this:
Strictly speaking, none of this is really necessary. You could pretty easily integrate using the approach that Stencil documents for working with "vanilla" JavaScript here. One way or another, you just need something that will make all of the files available. |
|
@alexabreu I checked out the deal with I added using and then it seemed to work just fine! Unfortunately that means that the issue is outside of If I were you, I might try to configure the https://github.com/ef4/ember-auto-import#customizing-build-behavior |
|
@alexlafroscia thanks for the tip! Added the following to The app loads, but when trying to visit a page using a Should I be pointing to different file in
|
|
Shouldn't you actually point to |
|
I think @kbiedrzycki is right about that; that's the file that the |
|
I'm sure @alexabreu is aware of this by now, but FYI - the So if I start w/ a new ember app that doesn't have any other addons and then:
I am able to see that:
If instead I configure the autoImport: {
alias: {
'@esri/calcite-components/loader': '@esri/calcite-components/dist/loader/index.cjs.js',
},
},It appears that the JS for all of the components in that library are included in vendor.js, even if I'm only using one or two components, and there are no lazy loaded "chunk" JS files:
I'd prefer to lazy-load only the components my app uses, but I'm wondering a few things:
I don't know to what extent calcite-components is following or breaking stencil conventions, but it seems to me that depending on how the library is authored/distributed and/or how you configure ember-auto-import you could get very different results. NOTE: in order to actually see the components I also had to load the CSS. For now I just added the following to app.import('node_modules/@esri/calcite-components/dist/calcite/calcite.css');However, I'll have to do something more to make the supporting assets (like icons) available to the app. |
|
FYI - it appears that for @esri/calcite-components at least, "../../node_modules/@esri/calcite-components/dist/esm-es5/loader.mjs" The |
|
I ran into a variation of this bug that arises from using ember-cli-stencil in an addon. The node modules dependency graph in my scenario essentially looks like: The problem is that the generated initializers reference loader modules for The workaround is to simply add I think the "proper" fix would be to have all the code generated by https://github.com/alexlafroscia/ember-cli-stencil/blob/34798f3fbd17d15b0f43a11aba431f76a72db3ae/packages/ember-cli-stencil/lib/generate-import-initializer.js go into a module that is evaluated in the context of the addon. For example, we could generate a module called // my-addon/ember-cli-stencil/load.js
import loader from 'some-web-components/loader';
export default async function() {
await loader.applyPolyfills();
loader.defineCustomElements(window);
}This would ensure that auto-import can properly resolve the In either case, we'd still need to preserve the existing treeForApp() hook to generate an initializer that simply calls the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey,
I am trying to use this addon with Ember, but with no luck. I've tried with ember-cli 3.4 and 3.10 and both failed. I am getting error while trying to use bundled collection of components. It works with React, but with Ember, I am getting:
Any clues? Debug correctly shows that my components were discovered, however, app can't start due to ☝️ error.
Running with
DEBUGflag shows that components library was detected correctly:In addition:
The text was updated successfully, but these errors were encountered: