Webpack error with Inputs

Community Help
1

Back in March, I was able to use webpack with a JS embedded notebook that imported from ‘@observablehq/inputs’ but I think inputs got updated at some point and now I get this error:

RuntimeError: Inputs is not defined

I’ve created a toy notebook to test. It’s just these two cells:

viewof replay = Button("Test")

import {Button} from @observablehq/inputs

And this is how I import the code in my project:

import { Runtime, Inspector } from '@observablehq/runtime';
import define from '@nachocab/testing-embed';

new Runtime().module(define, Inspector.into('#myDiv'));

I have a pretty standard webpack config:

const path = require('path');

const javascript = {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry',
            corejs: '3.9',
          },
        ],
      ],
      cacheDirectory: true,
    },
  },
};

const config = {
  mode: 'production',
  entry: {
    app: './public/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: '[name].bundle.js',
  },

  module: {
    rules: [
      javascript,
    ],
  },
};

module.exports = config;

What could be the problem?

2

Inputs was recently added to the standard library, so you probably need to update the version of the Observable Runtime that you are using locally. (The Runtime includes a copy of the Standard Library.)

Also, since Inputs is now part of the standard library, you don’t need the import in your test notebook, and you can say simply:

viewof replay = Inputs.button("Test")

You’ll need Version 3.5.0 or higher of the standard library.

1 Like
3

Ah, so simple.

Thanks a lot, Mike. You saved me!