Failed to resolve dependency
kaifaty opened this issue · comments
Checklist
- [+] Did you run the analyzer with the
--dev
flag to get more information? - [-] Did you create a minimal reproduction in the playground?
CEM can't resolve dependencies.
Failed to resolve dependency "./styles".
[COLLECT PHASE]: src/temp/component.ts
[ANALYZE PHASE]: src/temp/component.ts
[MODULE LINK PHASE]: src/temp/component.ts
component.ts
import {styles} from './styles'
const template = document.createElement('template')
template.innerHTML = `<style>${styles}</style<div>content</div>`
export class TempComponent extends HTMLElement {
_value: string = ''
get value() {
return this._value
}
set value(v: string) {
this._value = v
}
constructor() {
super()
this.attachShadow({mode: 'open'})
this.shadowRoot.append(template.content.cloneNode(true))
}
}
styles.ts
const css = (v: string[] | ArrayLike<string>, ...vals: string[]) => String.raw({raw: v}, ...vals)
export const styles = css`
:host {
background: var(--background-color);
}
`
cem.config.mjs
export default {
/** Globs to analyze */
globs: [
'./src/temp/component.ts',
],
outdir: './',
/** Run in watch mode, runs on file changes */
/** Include third party custom elements manifests */
dependencies: true,
/** Output CEM path to `package.json`, defaults to true */
packagejson: true,
}
custom-elements.json
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "src/temp/component.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "TempComponent",
"members": [
{
"kind": "field",
"name": "_value",
"type": {
"text": "string"
},
"default": "''"
},
{
"kind": "field",
"name": "value"
}
],
"superclass": {
"name": "HTMLElement"
},
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "TempComponent",
"declaration": {
"name": "TempComponent",
"module": "src/temp/component.ts"
}
}
]
}
]
}
When using dependencies: true
the analyzer crawls your module graph to find any third party dependencies to figure out where third party CEM's may be located. It should skip crawling local files though, because they'll already be crawled anyway. We should add a check in find-dependencies
next to the builtin modules check to see if the imported file is a bare module specifier.
This shouldn't affect analysis of your CEM, however, the styles
file and contents should still be included in your CEM. I checked and verified this locally.