I'm seriously struggling with something that seems so utterly basic. I'm trying to build a web component using lit, and want to include easymde, which is a markdown editor.

My component simply looks like this:

import { LitElement, html } from 'lit';
import easyMDE from 'easymde';

export class MyElement extends LitElement {
    constructor() {
        super();

        console.log('MyElement');
    }

    firstUpdated() {
        const editorEl = this.renderRoot.querySelector('textarea');

        if(!editorEl) {
            throw new Error('Failed to find editor element');
        }

        new easyMDE({
            element: editorEl
        });
    }

    render() {
        return html`
            <textarea></textarea>
        `;
    }
}

And I have the following rollup config

import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: './src/index.ts',
    output: {
        file: 'dist/bundle.js',
        sourcemap: true,
    },
    plugins: [
        typescript(),
        commonjs(),
        nodeResolve(),
    ]
}

However, in my browser, I'm seeing the following error: SyntaxError: Unexpected identifier 'require$$0'. import call expects exactly one argument.

Looking at the bundled output, I'm seeing import require$$0 from 'fs'; at the very top, I don't understand why fs isn't bundled with the rest of my code.

Am I still missing some basic config here?