How to make Meteor's require syntax work in a normal nom-meteor-app html file?

1

We have many components like this that we’re using in our app (scroll down to the require() in the script tag for the interesting part)

<dom-module id='fsn-fblogin-button'>
  <template>
    <style>
       ...
    </style>

    <app-location path=[[path]]></app-location>
    <button><iron-icon icon='fsn:facebook'></iron-icon> Login with facebook</button>

  </template>
</dom-module>

<script>
  require('@polymer/polymer/polymer.html');
  require('@polymer/app-route/app-location.html');
  require('@polymer/iron-icon/iron-icon.html');
  require('@andreasgalster/fsn-icons/dist/fsn-icons.html');
  Polymer({
    is: 'fsn-fblogin-button',
    properties: {
      redirectTo: String,
    },
    listeners: {
      'tap': 'login'
    },
    login: function() {
      Meteor.loginWithFacebook({
        requestPermissions: ['public_profile','user_about_me','user_birthday']
      }, (err) => {
        if (err) {
        } else {
          this.path = `/${this.redirectTo}`;
        }
      });
    }
  });
</script>

Polymer automatically generates documentation and demo pages for components, which look about like this:

<!doctype html>
<html>
  <head>
    <title>sal-button demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">

    <link rel="import" href="../sal-button.html">

    <style is="custom-style" include="demo-pages-shared-styles">
      h4 {
        margin-top:50px;
      }
      h4:first-of-type {
        margin-top:0px;
      }
    </style>
  </head>
  <body>

    <div class="vertical-section-container centered">
      <h3>Basic sal-button Demo</h3>
      <demo-snippet>
        <template>
          <h4>Default submit button</h4>
          <sal-button>default submit button</sal-button>

          <h4>Confirm button</h4>
          <sal-button confirm>confirm button</sal-button>

          <h4>Delete button</h4>
          <sal-button delete>delete button</sal-button>

          <h4>Cancel button</h4>
          <sal-button cancel>cancel button</sal-button>

          <h4>Full-width button</h4>
          <sal-button full-width>full-width button</sal-button>

          <h4>Button with icon</h4>
          <sal-button icon="sal-icons:create">Icon button</sal-button>          
        </template>
      </demo-snippet>
    </div>

  </body>
</html>

We’re trying to figure out how to make require work in those demo pages like they work in Meteor. The browser gives an error of: “Module name has not been loaded yet for context”. It seems when the component gets loaded and the require() is called there’s something wrong. Does anyone know how we can make the require() syntax in our components work just as it is working in Meteor in these demo pages?