wrangler and webpack

SSamuel Colvin I'm having issues trying to use wrangler 3 with webpack - the issue is described...

H

Hello, I’m Allie!•8/29/23, 5:10 PM

Do you have a link to your repo?

S

Samuel ColvinOP•8/29/23, 5:26 PM

yes, it's in the issue

S

Samuel ColvinOP•8/29/23, 5:26 PM

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

GitHub

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

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

H

Hello, I’m Allie!•8/29/23, 5:27 PM

Oops, sorry, missed that...

S

Samuel ColvinOP•8/29/23, 5:27 PM

np

S

Samuel ColvinOP•8/29/23, 5:27 PM

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

SSamuel Colvin project hasn't been touched for 2 years, hence I'm upgrading to latest wrangler ...

H

Hello, I’m Allie!•8/29/23, 5:45 PM

Hm, you might need to rebuild at least part of it. While it might work if you just deployed it with

wrangler@1

wrangler@1

wrangler@1

wrangler@1 now, it looks like a lot of the plugins that you use don't directly translate over.

H

Hello, I’m Allie!•8/29/23, 5:50 PM

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

npm i jsonc-parser

npm i jsonc-parser

npm i jsonc-parser. There are 513 other projects in the npm registry using jsonc-parser.

S

Samuel ColvinOP•8/29/23, 6:20 PM

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

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

H

Hello, I’m Allie!•8/29/23, 6:22 PM

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

S

Samuel ColvinOP•8/29/23, 6:26 PM

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

S

Samuel ColvinOP•8/29/23, 6:26 PM

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

S

Samuel ColvinOP•8/29/23, 6:26 PM

which is a dependency of typescript itself!!!

S

Samuel ColvinOP•8/29/23, 6:26 PM

are you suggesting I can't use typescript?

S

Samuel ColvinOP•8/29/23, 6:27 PM

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

S

Samuel ColvinOP•8/29/23, 6:28 PM

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

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

H

Hello, I’m Allie!•8/29/23, 6:29 PM

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

S

Samuel ColvinOP•8/29/23, 6:29 PM

@HardAtWork it might help if you try to build a minimal project with

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin

I think you'll get the same error provided you use typescript

SSamuel Colvin @HardAtWork it might help if you try to build a minimal project with `wranglerjs...

H

Hello, I’m Allie!•8/29/23, 6:30 PM

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...

S

Samuel ColvinOP•8/29/23, 6:30 PM

yes, I see that, but I need webpack as you can see - precisely because I need those files

S

Samuel ColvinOP•8/29/23, 6:31 PM

does that mean there's no way to use webpack with wrangler 3?

SSamuel Colvin does that mean there's no way to use webpack with wrangler 3?

H

Hello, I’m Allie!•8/29/23, 6:31 PM

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.

S

Samuel ColvinOP•8/29/23, 6:32 PM

that's fine, can you point to instructions?

SSamuel Colvin that's fine, can you point to instructions?

H

Hello, I’m Allie!•8/29/23, 6:32 PM

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

S

Samuel ColvinOP•8/29/23, 6:32 PM

is there an example somewhere?

H

Hello, I’m Allie!•8/29/23, 6:33 PM

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

S

Samuel ColvinOP•8/29/23, 6:34 PM

SSamuel Colvin yes, I see that, but I need webpack as you can see - precisely because I need th...

H

Hello, I’m Allie!•8/29/23, 6:36 PM

Though I would note too that while you do use

webpack

webpack

webpack

webpack for Sass compilation and Markdown Highlighting, it shouldn't be too difficult to find

esbuild

esbuild

plugins that do the same

H

Hello, I’m Allie!•8/29/23, 6:36 PM

Which is generally more supported.

S

Samuel ColvinOP•8/29/23, 6:36 PM

makes sense

S

Samuel ColvinOP•8/29/23, 6:41 PM

thanks for the input

S

Samuel ColvinOP•8/29/23, 6:41 PM

it would be great if someone could update the docs to note that

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin

wranglerjs-compat-webpack-plugin doesn't work with wrangler v3, and reply to the issue too

S

Samuel ColvinOP•8/29/23, 6:41 PM

this kind of thing would improve DX a lot

J

James•8/29/23, 7:06 PM

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;
};

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

cross-env NODE_ENV=production webpack --progress --mode=production --env production -c webpack.worker.config.js

cross-env NODE_ENV=production webpack --progress --mode=production --env production -c webpack.worker.config.js

cross-env NODE_ENV=production webpack --progress --mode=production --env production -c webpack.worker.config.js, and

wrangler.toml

wrangler.toml

has:

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

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

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

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

J

James•8/29/23, 7:06 PM

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

L

Laputa•8/30/23, 5:06 AM

J

James•8/30/23, 12:44 PM

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

Similar Threads

Similar Threads

Similar Threads