Is it possible to use LWC-related npm modules & webpack to leverage the LWC framework with Cloudflare Workers?

Question

I am hoping to use the LWC framework with Cloudflare Workers in JavaScript, but running into some issues. It seems like Wrangler ignores node_modules so I was hoping to use webpack in order to load and import the modules I will need like @lwc/engine but I am running into some problems (most of this is new to me) and was hoping someone may be able to provide some guidance.

Not entirely sure what I am doing wrong, but everything is compiling and when I start my Worker I get a 500 response stating, "ReferenceError: Element is not defined." I believe import { createElement } from '@lwc/engine'; in my index.js file is not working, but can't figure out quite why. Any and all assistance is appreciated, thank you in advance!

webpack.config.js:

const path = require('path');
const LWCWebpackPlugin = require('lwc-webpack-plugin')

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    mode: 'development',
    plugins: [
        new LWCWebpackPlugin({
            namespace: {
                // LWC namespace with path
                my: path.resolve('./src/my')
            },
            modules: [
                '@salesforce-ux/design-system',
                '@lwc/engine'
            ]
        }),
    ]
};

index.js:

import { createElement } from '@lwc/engine';
import App from 'my/app';

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})
/**
   * Respond with hello worker text
   * @param {Request} request
*/

async function handleRequest(request) {
    const lwcComponent = createElement('my-app', { is: App });
    const response = new Response(lwcComponent, {
        headers: { "Content-Type": "text/html" },
    })
    return response
}

package.json:

{
  "name": "lwcWorker",
  "version": "1.0.0",
  "description": "LWC & Cloudflare Worker",
  "main": "index.js",
  "author": "Max Goldfarb",
  "license": "ISC",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx webpack"
  },
  "dependencies": {
    "@lwc/engine": "1.1.0-alpha10",
    "@salesforce-ux/design-system": "^3.0.0-dev",
    "lwc-webpack-plugin": "0.2.0"
  },
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

Answer 1

I'm not fully sure to understand in which context index.js is running so correct me if I'm wrong here.

My guess is that the environment in which index.js is running has no knowledge of the Web APIs (it's just a JS runtime). In other words, it doesn't know about DOM or Element classes and we need those for LWC to run (LWC extends standard web elements). This means that LWC components can only be generated on client-side JS.

You can test this by simply running:

console.log(typeof Element);

This should log function if you have access to the Element base class.