Error after compiling Polymer Dart to JS. (The "smoke" library has not been configured)


Аfter compiling Dart code (which use Dart Polymer) to JS. I get the following error:

Uncaught Exception: The "smoke" library has not been configured.
Make sure you import and configure one of the implementations
(package:smoke/mirrors.dart or package:smoke/static.dart).

Sometimes the message was:

No elements registered in a while, but still waiting on 1 element to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: 'app-element'

What’s wrong here? Here is my code:

UPDATE: now code beyond is improved and work correctly after pub build. I change folder/file structure and update polymer to the latest version.


name: app
  browser: any
  #do not forget update to latest version by running pub update 
  polymer: any
- polymer:
    - web/main.html


<polymer-element name="app-globals"></polymer-element>

<polymer-element name="app-element">
    <link rel="stylesheet" href="/main.css"/>
  <script type="application/dart" src="ui-elements.dart"></script>


class AppGlobals extends PolymerElement{
  AppGlobals.created() : super.created();

class AppElement extends PolymerElement {
  AppElement.created() : super.created();

web/main.html (dummy entry file)

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script type="application/dart" src="main.dart"></script>


import 'package:polymer/polymer.dart';

main() {

void onReady() {

web/main.html (entry point) after pub build. Real mess after compiling. So many js files some of them takes size even more than 300kb.

<!DOCTYPE html><html lang="en"><head><script src="packages/web_components/webcomponents.min.js"></script><script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <body><div hidden=""><style shim-shadowdom="">
          Flex Layout

html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;

......tons of other styles...........


<script src="packages/polymer/src/js/polymer/polymer.min.js"></script>

// TODO(sigmund): remove this script tag ( This empty
// script tag is necessary to work around a bug in Chrome 36.

<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html">
<script src="src/js/polymer/polymer.js"></script>
<polymer-element name="app-globals"></polymer-element>

<!-- APP ELEMENT -->
<polymer-element name="app-element" class="bck-medusa w-100 h-100">
    <link rel="stylesheet" href="../main.css">
    <script src="main.html.polymer.bootstrap.dart.js" async=""></script>



You don’t need initPolymer when you use @whenPolymerReady. The entire main() method is redundant in your example.

Did you register your entry page properly in the Polymer transformer configuration in pubspec.yaml?

Smoke needs a transformer but if you have the Polymer transformer configured properly the Smoke transformer is included.

Answered By – Günter Zöchbauer

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *