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

Failed to resolve dependency #199

Open
kaifaty opened this issue Feb 13, 2023 · 2 comments
Open

Failed to resolve dependency #199

kaifaty opened this issue Feb 13, 2023 · 2 comments

Comments

@kaifaty
Copy link

kaifaty commented Feb 13, 2023

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"
          }
        }
      ]
    }
  ]
}
@thepassle
Copy link
Member

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.

@r1m
Copy link

r1m commented Nov 24, 2023

Is there a way to disable those messages ?

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

No branches or pull requests

3 participants