Better error message when an asset cannot be found in entry file

packages/compat/src/compat-app.ts

@@ -267,20 +267,10 @@ class CompatAppAdapter implements AppAdapter<TreeNames> {
  let styles = [...dom.window.document.querySelectorAll('link[rel="stylesheet"]')] as HTMLLinkElement[];
 
  return {
- javascript: definitelyReplace(dom, this.oldPackage.findAppScript(scripts), 'app javascript', entrypoint),
- styles: definitelyReplace(dom, this.oldPackage.findAppStyles(styles), 'app styles', entrypoint),
- implicitScripts: definitelyReplace(
- dom,
- this.oldPackage.findVendorScript(scripts),
- 'vendor javascript',
- entrypoint
- ),
- implicitStyles: definitelyReplace(
- dom,
- this.oldPackage.findVendorStyles(styles),
- 'vendor styles',
- entrypoint
- ),
+ javascript: definitelyReplace(dom, this.oldPackage.findAppScript(scripts, entrypoint)),
+ styles: definitelyReplace(dom, this.oldPackage.findAppStyles(styles, entrypoint)),
+ implicitScripts: definitelyReplace(dom, this.oldPackage.findVendorScript(scripts, entrypoint)),
+ implicitStyles: definitelyReplace(dom, this.oldPackage.findVendorStyles(styles, entrypoint)),
  testJavascript: maybeReplace(dom, this.oldPackage.findTestScript(scripts)),
  implicitTestScripts: maybeReplace(dom, this.oldPackage.findTestSupportScript(scripts)),
  implicitTestStyles: maybeReplace(dom, this.oldPackage.findTestSupportStyles(styles)),
@@ -462,14 +452,11 @@ export default class CompatApp extends BuildStage<TreeNames> {
 
 function maybeReplace(dom: JSDOM, element: Element | undefined): Node | undefined {
  if (element) {
- return definitelyReplace(dom, element, '', '');
+ return definitelyReplace(dom, element);
  }
 }
 
-function definitelyReplace(dom: JSDOM, element: Element | undefined, description: string, file: string): Node {
- if (!element) {
- throw new Error(`could not find ${description} in ${file}`);
- }
+function definitelyReplace(dom: JSDOM, element: Element): Node {
  let placeholder = dom.window.document.createTextNode('');
  element.replaceWith(placeholder);
  return placeholder;

packages/compat/src/v1-app.ts

@@ -675,20 +675,48 @@ export default class V1App {
  return src;
  }
 
- findAppScript(scripts: HTMLScriptElement[]): HTMLScriptElement | undefined {
- return scripts.find(script => this.withoutRootURL(script.src) === this.app.options.outputPaths.app.js);
+ findAppScript(scripts: HTMLScriptElement[], entrypoint: string): HTMLScriptElement {
+ let appJS = scripts.find(script => this.withoutRootURL(script.src) === this.app.options.outputPaths.app.js);
+ return throwIfMissing(
+ appJS,
+ this.app.options.outputPaths.app.js,
+ scripts.map(s => s.src),
+ entrypoint,
+ 'app javascript'
+ );
  }
 
- findAppStyles(styles: HTMLLinkElement[]): HTMLLinkElement | undefined {
- return styles.find(style => this.withoutRootURL(style.href) === this.app.options.outputPaths.app.css.app);
+ findAppStyles(styles: HTMLLinkElement[], entrypoint: string): HTMLLinkElement {
+ let style = styles.find(style => this.withoutRootURL(style.href) === this.app.options.outputPaths.app.css.app);
+ return throwIfMissing(
+ style,
+ this.app.options.outputPaths.app.css.app,
+ styles.map(s => s.href),
+ entrypoint,
+ 'app css'
+ );
  }
 
- findVendorScript(scripts: HTMLScriptElement[]): HTMLScriptElement | undefined {
- return scripts.find(script => this.withoutRootURL(script.src) === this.app.options.outputPaths.vendor.js);
+ findVendorScript(scripts: HTMLScriptElement[], entrypoint: string): HTMLScriptElement {
+ let vendor = scripts.find(script => this.withoutRootURL(script.src) === this.app.options.outputPaths.vendor.js);
+ return throwIfMissing(
+ vendor,
+ this.app.options.outputPaths.vendor.js,
+ scripts.map(s => s.src),
+ entrypoint,
+ 'vendor javascript'
+ );
  }
 
- findVendorStyles(styles: HTMLLinkElement[]): HTMLLinkElement | undefined {
- return styles.find(style => this.withoutRootURL(style.href) === this.app.options.outputPaths.vendor.css);
+ findVendorStyles(styles: HTMLLinkElement[], entrypoint: string): HTMLLinkElement {
+ let vendorStyle = styles.find(style => this.withoutRootURL(style.href) === this.app.options.outputPaths.vendor.css);
+ return throwIfMissing(
+ vendorStyle,
+ this.app.options.outputPaths.vendor.css,
+ styles.map(s => s.href),
+ entrypoint,
+ 'vendor css'
+ );
  }
 
  findTestSupportStyles(styles: HTMLLinkElement[]): HTMLLinkElement | undefined {
@@ -706,6 +734,26 @@ export default class V1App {
  }
 }
 
+function throwIfMissing<T>(
+ asset: T | undefined,
+ needle: string,
+ haystack: string[],
+ entryfile: string,
+ context: string
+): T {
+ if (!asset) {
+ throw new Error(
+ `Could not find ${context}: "${needle}" in ${entryfile}. Found the following instead:\n${haystack
+ .map(asset => ` - ${asset}`)
+ .join(
+ '\n'
+ )}\n\nFor more information about this error: https://github.com/thoov/stitch/wiki/Could-not-find-asset-in-entry-file-error-help`
+ );
+ }
+
+ return asset;
+}
+
 class V1DummyApp extends V1App {
  constructor(app: EmberApp, packageCache: PackageCache) {
  super(app, packageCache);