[IMP] component: error when mounted on invalid target

src/component/component.ts

@@ -117,7 +117,7 @@ export class Component<T extends Env, Props extends {}> {
     let constr = this.constructor as any;
     const defaultProps = constr.defaultProps;
     if (defaultProps) {
-      props = props || {} as Props;
+      props = props || ({} as Props);
       this.__applyDefaultProps(props, defaultProps);
     }
     this.props = <Props>props;
@@ -286,6 +286,11 @@ export class Component<T extends Env, Props extends {}> {
       }
       return;
     }
+    if (!(target instanceof HTMLElement)) {
+      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
+      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
+      throw new Error(message);
+    }
     return new Promise((resolve, reject) => {
       const fiber = new Fiber(null, this, undefined, undefined, false);
       scheduler.addFiber(fiber, err => {

tests/component/component.test.ts

@@ -91,6 +91,23 @@ describe("basic widget properties", () => {
     expect(fixture.innerHTML).toBe("<div>content</div>");
   });
 
+  test("display a nice message if mounted on a non existing node", async () => {
+    class SomeWidget extends Component<any, any> {
+      static template = xml`<div>content</div>`;
+    }
+    const widget = new SomeWidget();
+    let error;
+    try {
+      await widget.mount(null as any);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(
+      "Component 'SomeWidget' cannot be mounted: the target is not a valid DOM node.\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)"
+    );
+  });
+
   test("crashes if it cannot find a template", async () => {
     expect.assertions(1);
     class SomeWidget extends Component<any, any> {}