Title: Error after compiling Polymer Dart to JS. (The "smoke" library has not been configured)
Tags: dart;dart-polymer;dart-pub;dart2js
Question: А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.
pubspec.yaml
name: app
dependencies:
browser: any
#do not forget update to latest version by running pub update
polymer: any
transformers:
- polymer:
entry_points:
- web/main.html
web/templates/ui-elements.html
<polymer-element name="app-globals"&gt;</polymer-element&gt;
<polymer-element name="app-element"&gt;
<template&gt;
<link rel="stylesheet" href="/main.css"/&gt;
<content&gt;</content&gt;
</template&gt;
<script type="application/dart" src="ui-elements.dart"&gt;</script&gt;
</polymer-element&gt;
web/templates/ui-elements.dart
@CustomTag('app-globals')
class AppGlobals extends PolymerElement{
AppGlobals.created() : super.created();
@CustomTag('app-element')
class AppElement extends PolymerElement {
AppElement.created() : super.created();
web/main.html (dummy entry file)
<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
<meta charset="utf-8"&gt;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
</head&gt;
<body&gt;
<app-element&gt;</app-element&gt;
<script type="application/dart" src="main.dart"&gt;</script&gt;
</body&gt;
</html&gt;
web/main.dart
import 'package:polymer/polymer.dart';
main() {
initPolymer();
@whenPolymerReady
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&gt;<html lang="en"&gt;<head&gt;<script src="packages/web_components/webcomponents.min.js"&gt;</script&gt;<script src="packages/web_components/dart_support.js"&gt;</script&gt;
<meta charset="utf-8"&gt;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
</head&gt;
<body&gt;<div hidden=""&gt;<style shim-shadowdom=""&gt;
/*******************************
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...........
</style&gt;
<script src="packages/polymer/src/js/polymer/polymer.min.js"&gt;</script&gt;
<script&gt;
// TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
// script tag is necessary to work around a bug in Chrome 36.
</script&gt;
<!-- unminified for debugging:
<link rel="import" href="src/js/polymer/layout.html"&gt;
<script src="src/js/polymer/polymer.js"&gt;</script&gt;
--&gt;
<polymer-element name="app-globals"&gt;</polymer-element&gt;
<!-- APP ELEMENT --&gt;
<polymer-element name="app-element" class="bck-medusa w-100 h-100"&gt;
<template&gt;
<link rel="stylesheet" href="../main.css"&gt;
<content&gt;</content&gt;
</template&gt;
</polymer-element&gt;
</div&gt;
<script src="main.html.polymer.bootstrap.dart.js" async=""&gt;</script&gt;
</body&gt;</html&gt;

Here is the accepted answer: 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.
Comment for this answer: I think you will run into issues if you supply a dummy html file in the transformer that doesn't actually end up being served. For html imports at least they are inlined into the file by the transformer, and then all `@HtmlImport` annotations are williamscharles@example.org. Even if you aren't using `@HtmlImport` your deployed application will not be optimized fully (it will end up doing a lot of extra network requests for the html imports).
Comment for this answer: I guess you need at least provide a dummy entry page for the transformer. There is no need to serve the resulting file to the server, but the transformer  uses this to find the start of your Dart script. You can also use the resulting entry page as a template for your custom/generated entry page (to check that all necessary script tags are included and similar).
Comment for this answer: I think that should do.  I'm not sure about the script tags in the output, didn't check it for quite some time.  I think you need the `dart_support.js` script tag though.
Comment for this answer: I'm quite sure you need to add all scripts tags except if there is still one with the `.dart` extension, this can be removed without doubt.
Comment for this answer: How does your dummy entry page look like exactly (dart script tag). How does your Polymer transformer config look like? I don't know what `dart_support.js` does actually but there was a question recently where adding it fixed a problem (can't remember what is was though) Here is an example where it's mentioned that a Polymer element isn't show in JS when the script tag is missing http://stackoverflow.com/questions/26856303
Comment for this answer: Regarding `main` do you use the latest Polymer version `0.16.2`? Do you even need a custom `main`? Do you still get the `smoke` error`
Comment for this answer: I have no entry point specified. It's a little problem, because I haven't entry point in classic view - entry point is generated as the rule from 3 files (header.html, footer.html and name-of-view.html) by Go server. And these files are stored out of `pubspec.yaml`. I've tried to specify something like this: `entry_points: - ../server/views/site/main.html` (main.html merge footer and header together), but it doesn't help. I don't know what to do(
Comment for this answer: Like this: https://github.com/dart-lang/polymer-dart-patterns/blob/master/web/basics/binding_to_a_field/index.html? But instead using  `export 'package:polymer/init.dart'; import 'my_element.dart';` specify my main.dart file? Do I need this one: `` too?
Comment for this answer: Concerning `dart_support.js`: `line 6, column 5 of web/main.html: No need to include "dart_support.js" by hand anymore. See http://goo.gl/5HPeuP#polymer_43 for details.`.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:04/27/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<dart><dart-polymer><dart-pub><dart2js>', 'Title': 'Error after compiling Polymer Dart to JS. (The "smoke" library has not been configured)', 'ViewCount': 140, 'id': 29900958, 'user_AboutMe': None, 'user_AccountId': 1426344.0, 'user_DisplayName': 'Timur Fayzrakhmanov', 'user_Reputation': 16257.0, 'user_Views': 730.0, 'user_id': 1349754.0}}