Import MDCRipple into custom element definition us

Question

I followed the guide at https://material.io/develop/web/docs/getting-started/ and the end result works, but creating a custom element to add to the mix does not.

my-button.js

import MDCRipple from '@material/ripple';

class MyButton extends HtmlElement {
  static get tag() { return 'my-button'; }
}

customElements.define(MyButton.tag, MyButton);

but the webpack dev server errors:

Uncaught TypeError: Failed to resolve module specifier "@material/ripple". Relative references must start with either "/", "./", or "../".

Changing to a relative path only causes the error to happen for the imports inside MDCRipple.

I'm pretty sure webpack.config.js can solve this but it's new to me and adding an entry for my-button.js didn't help.

webpack.config.js

const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          {loader: 'extract-loader'},
          {loader: 'css-loader'},
          {loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['./node_modules'],
            },
          }
        ],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-object-assign']
        },
      }
    ],
  },
};

In case it matters, the button is included via (index.html)

<script type="module" src="my-button.js"></script> 

Directory structure:

node_modules/
my-button.js
index.html
package.json
webpack.config.js

package.json

devDependencies": {
  "@webcomponents/webcomponentsjs": "^2.1.3",
  "autoprefixer": "^9.2.1",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-plugin-transform-object-assign": "^6.22.0",
  "babel-preset-es2015": "^6.24.1",
  "css-loader": "^1.0.0",
  "extract-loader": "^3.0.0",
  "file-loader": "^2.0.0",
  "glob": "^7.1.3",
  "lit-html": "^0.12.0",
  "material-components-web": "^0.40.1",
  "node-sass": "^4.9.4",
  "postcss-loader": "^3.0.0",
  "sass-loader": "^7.1.0",
  "webpack": "^3.12.0",
  "webpack-dev-server": "^2.11.3"
}