1

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"
  }
}
3

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.

1
  • You are correct, the output is "undefined" so it looks like I will have to dig through the docs more thoroughly to see if this is possible in any capacity. For example, the Workers Runtime API has a HTMLRewriter class, "to build comprehensive and expressive HTML parsers inside of a Cloudflare Workers application." That class has an element handler, and the element attribute of the handler represents a DOM element so maybe it is possible leveraging the HTMLRewriter class or some other method. – Max Goldfarb Apr 5 at 17:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.