Cloudflare Developers•10mo ago

wrangler and webpack

I'm having issues trying to use wrangler 3 with webpack - the issue is described here - https://github.com/cloudflare/workers-sdk/issues/3764, but no reply for two weeks. Help would be much appreciated. I'm effectively blocked from moving forward by this.

GitHub

Issues · cloudflare/workers-sdk

⛅️ Home to Wrangler, the CLI for Cloudflare Workers® - Issues · cloudflare/workers-sdk

27 Replies

Hello, I’m Allie!•10mo ago

Do you have a link to your repo?

samuelcolvin•10mo ago

yes, it's in the issue

samuelcolvin•10mo ago

https://github.com/samuelcolvin/smokeshow/pull/27

GitHub

Uprev worker cloudflare code by samuelcolvin · Pull Request #27 · s...

Hello, I’m Allie!•10mo ago

Oops, sorry, missed that...

samuelcolvin•10mo ago

np project hasn't been touched for 2 years, hence I'm upgrading to latest wrangler etc. and ran into this problem

Hello, I’m Allie!•10mo ago

Hm, you might need to rebuild at least part of it. While it might work if you just deployed it with wrangler@1 now, it looks like a lot of the plugins that you use don't directly translate over.

Hello, I’m Allie!•10mo ago

I'd note too that the issue seems to be arising from a dependency, jsonc-parser

npm

jsonc-parser

Scanner and parser for JSON with comments.. Latest version: 3.2.0, last published: a year ago. Start using jsonc-parser in your project by running npm i jsonc-parser. There are 513 other projects in the npm registry using jsonc-parser.

samuelcolvin•10mo ago

the plugins shouldn't matter at all - webpack just turns them into strings

Hello, I’m Allie!•10mo ago

One of them compiles Sass to CSS and the other syntax-highlights markdown files, no?

samuelcolvin•10mo ago

yes, both of which becomes strings - that's what webpack does

I'd note too that the issue seems to be arising from a dependency, jsonc-parser

which is a dependency of typescript itself!!! are you suggesting I can't use typescript?

samuelcolvin•10mo ago

https://github.com/microsoft/TypeScript/blob/7c417bfd1d14326575a2f08f8b6013a8c10d9f9e/package.json#L72

GitHub

TypeScript/package.json at 7c417bfd1d14326575a2f08f8b6013a8c10d9f9e...

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. - microsoft/TypeScript

samuelcolvin•10mo ago

I'll also note that if remove the loads for scss and markdown, I still get that error

Hello, I’m Allie!•10mo ago

Sorry, I didn't mean that they were causing the error

samuelcolvin•10mo ago

@HardAtWork it might help if you try to build a minimal project with wranglerjs-compat-webpack-plugin - I think you'll get the same error provided you use typescript

Hello, I’m Allie!•10mo ago

I was just trying to say that because the guide involves upgrading to v2(and the current version is v3), I'm not sure it is compatible, so I was trying to find a way for you to migrate away from using webpack entirely...

samuelcolvin•10mo ago

yes, I see that, but I need webpack as you can see - precisely because I need those files does that mean there's no way to use webpack with wrangler 3?

Hello, I’m Allie!•10mo ago

There is, but as far as I know, it isn't an officially supported thing, so you would probably have to manage the build yourself.

samuelcolvin•10mo ago

that's fine, can you point to instructions?

Hello, I’m Allie!•10mo ago

That's what I mean. Since there aren't any instructions, you would have to bodge your way through yourself.

samuelcolvin•10mo ago

is there an example somewhere?

Hello, I’m Allie!•10mo ago

Not that I know of, though there might be some on Github

samuelcolvin•10mo ago

😞

Hello, I’m Allie!•10mo ago

Though I would note too that while you do use webpack for Sass compilation and Markdown Highlighting, it shouldn't be too difficult to find esbuild plugins that do the same Which is generally more supported.

samuelcolvin•10mo ago

makes sense thanks for the input it would be great if someone could update the docs to note that wranglerjs-compat-webpack-plugin doesn't work with wrangler v3, and reply to the issue too this kind of thing would improve DX a lot

James•10mo ago

Here's a really basic webpack config we use to build a worker with an older project, without the compat plugin:

require('dotenv').config();

const path = require('path');

const webpack = require('webpack');
let devMode = process.env.NODE_ENV !== 'production';

module.exports = function(mode) {
    if(mode === 'production') {
        devMode = false;
    }
    if(mode === 'development') {
        devMode = true;
    }
    const config = {
        target: 'webworker',
        devtool: false,
        entry: './src/worker/index.js',
        output: {
            path: path.resolve(__dirname, 'src/worker/dist'),
            filename: 'worker.js',
        },
        mode: 'production',
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
            ],
        },
        plugins: [],
    };
    if(devMode) {
        // stuff?
    }
    return config;
};

require('dotenv').config();

const path = require('path');

const webpack = require('webpack');
let devMode = process.env.NODE_ENV !== 'production';

module.exports = function(mode) {
    if(mode === 'production') {
        devMode = false;
    }
    if(mode === 'development') {
        devMode = true;
    }
    const config = {
        target: 'webworker',
        devtool: false,
        entry: './src/worker/index.js',
        output: {
            path: path.resolve(__dirname, 'src/worker/dist'),
            filename: 'worker.js',
        },
        mode: 'production',
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
            ],
        },
        plugins: [],
    };
    if(devMode) {
        // stuff?
    }
    return config;
};

Which is then invoked with cross-env NODE_ENV=production webpack --progress --mode=production --env production -c webpack.worker.config.js, and wrangler.toml has:

main = "./src/worker/dist/worker.js"

main = "./src/worker/dist/worker.js"

It's an older project so I've not refactored it to esbuild or something more modern, but if you really want to use webpack, a config like that should get you started 🙂

Laputa•10mo ago

James•10mo ago

Your node version is way too old for modern tooling. You need to upgrade to at least node 16

Gaming

Programming

wrangler and webpack