Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V2 Addons: cannot import template-only components #1121

Closed
Tracked by #1099
NullVoxPopuli opened this issue Feb 9, 2022 · 2 comments · Fixed by #1126
Closed
Tracked by #1099

V2 Addons: cannot import template-only components #1121

NullVoxPopuli opened this issue Feb 9, 2022 · 2 comments · Fixed by #1126

Comments

@NullVoxPopuli
Copy link
Collaborator

Reproduction: https://github.com/NullVoxPopuli/ember-addon-v2-template-only-import

This was originally discovered here: #1099
but I figured I'd make a more focused issue (cause closing things and checking boxes off is fun)

Atm, this is using the default rollup/babel config shown in the addon-dev package.
This is the error:

$ concurrently "npm:build:*"
[build:*js] 
[build:*js] > my-addon@0.0.0 build:js
[build:*js] > rollup -c ./config/rollup.config.js
[build:*js] 
[build:*js] 
[build:*js]  → dist...
[build:*js] [!] Error: Could not resolve './button' from src/components/demo/index.js
[build:*js] Error: Could not resolve './button' from src/components/demo/index.js
[build:*js]     at error (<repo>/node_modules/rollup/dist/shared/rollup.js:160:30)
[build:*js]     at ModuleLoader.handleResolveId (<repo>/node_modules/rollup/dist/shared/rollup.js:22394:24)
[build:*js]     at <repo>/node_modules/rollup/dist/shared/rollup.js:22357:26
[build:*js] 
[build:*js] npm run build:js exited with code 1
error Command failed with exit code 1.}

my hunch is that rollup is trying to resolve everything before the addon.hbs() plugin has ran?
Is there a way to force plugin order?

"For fun", I added:

    nodeResolve({ extensions: ['.gjs', '.gts', '.js', '.ts', '.hbs'] }),

to the plugins list, but that gives this error:

[!] Error: 'hbs' is not exported by ../node_modules/ember-cli-htmlbars/lib/index.js, imported by src/components/demo/button.hbs

which kinda tells me that the externals bit from addon.dependencies() somehow isn't being used?

🤔

@NullVoxPopuli
Copy link
Collaborator Author

When I remove hbs from publicEntrypoints and remove nodeResolve

❯ yarn build
yarn run v1.22.17
$ concurrently "npm:build:*"
[build:*js] 
[build:*js] > my-addon@0.0.0 build:js
[build:*js] > rollup -c ./config/rollup.config.js
[build:*js] 
[build:*js] 
[build:*js]  → dist...
[build:*js] [!] Error: You must supply options.input to rollup
[build:*js] Error: You must supply options.input to rollup
[build:*js]     at Graph.generateModuleGraph (<repo>/node_modules/rollup/dist/shared/rollup.js:22979:19)
[build:*js]     at processTicksAndRejections (node:internal/process/task_queues:96:5)
[build:*js]     at Graph.build (<repo>/node_modules/rollup/dist/shared/rollup.js:22922:9)
[build:*js]     at rollupInternal (<repo>/node_modules/rollup/dist/shared/rollup.js:23544:9)
[build:*js]     at build (<repo>/node_modules/rollup/dist/bin/rollup:1530:20)
[build:*js]     at runRollup (<repo>/node_modules/rollup/dist/bin/rollup:1677:21)
[build:*js] 
[build:*js] npm run build:js exited with code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.}

@ef4
Copy link
Contributor

ef4 commented Feb 10, 2022

Looking at this, I don't think we actually have an implementation yet for automatically doing the proper template colocation thing for hbs-only components.

addon.hbs() is different than that. It's what allows the output of template colocation to say:

import TEMPLATE from './my.hbs';
setComponentTemplate(TEMPLATE, class Whatever {});

by making that .hbs import work.

But we also need to generate the implied JS files that go with standalone HBS components and that is not implemented.

There are two places we'd want it to work:

  • in a resolveId hook (perhaps the existing one in rollup-addon-dependencies.ts) we would notice if you're trying to resolve a "missing" JS files that should exist and provide it. This allows arbitrary code in the addon to import the template-only component.
  • in the publicEntrypoints itself we want to infer the existence of these files, so that they will try to get resolved and hit the aforementioned resolveId hook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants