Migrating an old worker to module format

prodigy-anthill · 2024-07-29T08:16:15.678Z

Hi, as far as the worker code goes, I have updated my old worker to use the module format, but I don't understand how to tell CF it is now a module format worker. I haven't used Wrangler to create the worker, it was done via the dashboard

P

prodigy-anthillOP•7/29/24, 8:17 AM

My worker only have a single file in the editor (see image)

P

prodigy-anthillOP•7/29/24, 8:19 AM

When I create a new worker in module format (default) it has more files in the editor:

P

prodigy-anthillOP•7/29/24, 8:35 AM

Anyone know how to upgrade an existing worker to use module format ?

Pprodigy-anthill Anyone know how to upgrade an existing worker to use module format ?

H

Hard@Work•7/29/24, 8:41 AM

It should just auto-detect the change

HHard@Work It should just auto-detect the change

P

prodigy-anthillOP•7/29/24, 8:48 AM

Thanks for replying. It doesn't look like it auto-detected anything

P

prodigy-anthillOP•7/29/24, 8:49 AM

Only indication I have that it's not on module format is this dropdown:

Pprodigy-anthill Only indication I have that it's not on module format is this dropdown:

H

Hard@Work•7/29/24, 8:50 AM

Does that say anything about your selected syntax?

P

prodigy-anthillOP•7/29/24, 8:50 AM

Yes

P

prodigy-anthillOP•7/29/24, 8:50 AM

Pprodigy-anthill Click to see attachment

H

Hard@Work•7/29/24, 8:51 AM

What if you deploy it?

H

Hard@Work•7/29/24, 8:51 AM

Detecting might occur on deploy

P

prodigy-anthillOP•7/29/24, 8:52 AM

I can't deploy it because

P

prodigy-anthillOP•7/29/24, 8:53 AM

This is because it doesn't understand that the worker now has this syntax:

export default {
  async fetch(request, env) {
  }
}

export default {
  async fetch(request, env) {
  }
}

export default {
  async fetch(request, env) {
  }
}

export default {
  async fetch(request, env) {
  }
}

P

prodigy-anthillOP•7/29/24, 8:53 AM

So it's kinda stuck on the old syntax

P

prodigy-anthillOP•7/29/24, 8:55 AM

I did try to create a new worker, it was created with the module syntax and that was working okay, but looks like the old worker is stuck on the worker syntax

P

prodigy-anthillOP•7/29/24, 8:58 AM

I tried working with wrangler on the project by running

npx create-cloudflare@latest images-dev --existing-script images-dev

npx create-cloudflare@latest images-dev --existing-script images-dev

npx create-cloudflare@latest images-dev --existing-script images-dev

npx create-cloudflare@latest images-dev --existing-script images-dev

And this is the toml file: (some identifiers renamed)

name = "images-dev"
main = "src/index.js"
compatibility_date = "2024-07-28"
workers_dev = true

[[routes]]
pattern = "https://images-dev.example.com/*"
zone_name = "example.com"

[[routes]]
pattern = "images-dev.example.com"
zone_name = "example.com"
custom_domain = true

[limits]
cpu_ms = 50

[[kv_namespaces]]
id = "..."
binding = "ENV"

name = "images-dev"
main = "src/index.js"
compatibility_date = "2024-07-28"
workers_dev = true

[[routes]]
pattern = "https://images-dev.example.com/*"
zone_name = "example.com"

[[routes]]
pattern = "images-dev.example.com"
zone_name = "example.com"
custom_domain = true

[limits]
cpu_ms = 50

[[kv_namespaces]]
id = "..."
binding = "ENV"

name = "images-dev"
main = "src/index.js"
compatibility_date = "2024-07-28"
workers_dev = true

[[routes]]
pattern = "https://images-dev.example.com/*"
zone_name = "example.com"

[[routes]]
pattern = "images-dev.example.com"
zone_name = "example.com"
custom_domain = true

[limits]
cpu_ms = 50

[[kv_namespaces]]
id = "..."
binding = "ENV"

name = "images-dev"
main = "src/index.js"
compatibility_date = "2024-07-28"
workers_dev = true

[[routes]]
pattern = "https://images-dev.example.com/*"
zone_name = "example.com"

[[routes]]
pattern = "images-dev.example.com"
zone_name = "example.com"
custom_domain = true

[limits]
cpu_ms = 50

[[kv_namespaces]]
id = "..."
binding = "ENV"

P

prodigy-anthillOP•7/29/24, 9:01 AM

And package.json

{
  "name": "images-dev",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "deploy": "wrangler deploy",
    "dev": "wrangler dev",
    "start": "wrangler dev"
  },
  "devDependencies": {
    "wrangler": "^3.60.3"
  }
}

{
  "name": "images-dev",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "deploy": "wrangler deploy",
    "dev": "wrangler dev",
    "start": "wrangler dev"
  },
  "devDependencies": {
    "wrangler": "^3.60.3"
  }
}

{
  "name": "images-dev",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "deploy": "wrangler deploy",
    "dev": "wrangler dev",
    "start": "wrangler dev"
  },
  "devDependencies": {
    "wrangler": "^3.60.3"
  }
}

{
  "name": "images-dev",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "deploy": "wrangler deploy",
    "dev": "wrangler dev",
    "start": "wrangler dev"
  },
  "devDependencies": {
    "wrangler": "^3.60.3"
  }
}

Pprodigy-anthill I tried working with wrangler on the project by running ``` npx create-cloudflar...

H

Hard@Work•7/29/24, 9:04 AM

If you do a deploy there(with the module syntax script), does it show up correctly in the dash?

P

prodigy-anthillOP•7/29/24, 9:09 AM

Haven't tried that, will try to deploy from wrangler

P

prodigy-anthillOP•7/29/24, 9:16 AM

It seems that has done the trick and now it is a module syntax worker...

P

prodigy-anthillOP•7/29/24, 9:16 AM

Now I just need to understand why my worker is not working, but that might have to do with the changes to the code I did

P

prodigy-anthillOP•7/29/24, 9:17 AM

It did add some code for me, for example, first line of the worker is

// src/index.js

// src/index.js

// src/index.js

// src/index.js

And last line is now

//# sourceMappingURL=index.js.map

//# sourceMappingURL=index.js.map

//# sourceMappingURL=index.js.map

//# sourceMappingURL=index.js.map

I didn't add these...

P

prodigy-anthillOP•7/29/24, 9:18 AM

Actually, it did more than that, looks like it's trying to add some es compatibiilty

P

prodigy-anthillOP•7/29/24, 9:19 AM

// src/index.js
var src_default = {
  async fetch(request, env) {
  // ...
  }
}
export {
  src_default as default
};
//# sourceMappingURL=index.js.map

// src/index.js
var src_default = {
  async fetch(request, env) {
  // ...
  }
}
export {
  src_default as default
};
//# sourceMappingURL=index.js.map

// src/index.js
var src_default = {
  async fetch(request, env) {
  // ...
  }
}
export {
  src_default as default
};
//# sourceMappingURL=index.js.map

// src/index.js
var src_default = {
  async fetch(request, env) {
  // ...
  }
}
export {
  src_default as default
};
//# sourceMappingURL=index.js.map

Pprodigy-anthill Actually, it did more than that, looks like it's trying to add some es compatibi...

H

Hard@Work•7/29/24, 9:33 AM

That's wrangler bundling your code

Migrating an old worker to module format

Similar Threads

Similar Threads

Similar Threads