What is causing a NoSuchMethodErrorImplementation?

Issue

I am getting the following error:

Stack Trace: #0      NoSuchMethodErrorImplementation._throwNew (dart:core-patch:641:3)
#1      init_autogenerated (http://127.0.0.1:3030/C:/dev/CalendarDatePicker/CalendarDatePicker/web/out/CalendarDatePicker.dart:43:26)
#2      main (http://127.0.0.1:3030/C:/dev/CalendarDatePicker/CalendarDatePicker/web/out/CalendarDatePicker.html_bootstrap.dart:7:30)

Here is my view code:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>CalendarDatePicker</title>
    <link rel="stylesheet" href="CalendarDatePicker.css">
  </head>
  <body>
    <element name="calendar" constructor="Calendar" extends="div">
      <template>
        <table>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </table>
      </template>
    </element>
    <div is="calendar"></div>
    <script type="application/dart" src="CalendarDatePicker.dart"></script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

And this is my main script:

import 'dart:html';
import 'dart:core';
import 'package:web_ui/web_ui.dart';


void main() {

}

class Calendar extends WebComponent
{

}

It is failing in the auto-generated code on this line:

new Calendar.forElement(__e0)
  ..created_autogenerated() //Exception: No such method: 'Calendar.forElement'
  ..created()
  ..composeChildren();

Solution

You should change the <element> name so that it starts with an x-:

<element name="x-calendar" constructor="Calendar" extends="div">

and the <div is="calendar"></div> to:

<x-calendar></x-calendar>

Or you can use the is= syntax, if you prefer.

These are recommended changes, but don’t solve the problem. The way this would work is if

class Calendar extends WebComponent {}

went inside the <element> itself (as a sibling of <template>) inside a <script> tag.

The other way would be to isolate your component code in a separate file and explicitly import it using the correct syntax. Something like this:

<link rel="components" href="calendar_component.html">

So, I’ve broken down your app into 4 files. calendarPicker.html, the main html file, looks like this:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>CalendarDatePicker</title>
    <link rel="stylesheet" href="calendarDatePicker.css">
    <link rel="components" href="calendar_component.html">
  </head>
  <body>
    <x-calendar></x-calendar>

    <script type="application/dart" src="calendarDatePicker.dart"></script>
    <script type="text/javascript" src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
  </body>
</html>

calendarDatePicker.dart is pretty minimal:

import 'dart:html';
import 'package:web_ui/web_ui.dart';

void main() {}

Your component code (calendar_component.dart) has this code:

<!DOCTYPE html>
<html>
  <body>
    <element name="x-calendar" constructor="CalendarComponent" extends="div">
      <template>
        <table>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </table>
      </template>
      <script type="application/dart" src="calendar_component.dart"></script>
    </element>
  </body>
</html>

And the accompanying dart file (calendar_component.dart) has the component class in it:

import 'package:web_ui/web_ui.dart';

class CalendarComponent extends WebComponent {}

Hope this helps. I built the app using the code you provided and duplicated the error; then, I rebuilt it with the code shown here. It runs without any errors.

Answered By – Shailen Tuli

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Issue

Solution

Leave a Reply Cancel reply