Cloudflare Developers•3y ago

Anyone have luck with tsup esbuild for

Anyone have luck with tsup (esbuild) for building dependencies that use built-ins like Buffer? I've tried a million things to get the usage of a third party tool (passkit-generator). If I output ESM, I get:

[mf:err] Error: Dynamic require of "buffer" is not supported

[mf:err] Error: Dynamic require of "buffer" is not supported

If I output CJS, I get:

▲ [WARNING] Converting "require" to "esm" is currently not supported [unsupported-require-call]

    dist/index.cjs:28310:21:
      28310 │ var import_buffer4 = require("buffer");

▲ [WARNING] Converting "require" to "esm" is currently not supported [unsupported-require-call]

    dist/index.cjs:28310:21:
      28310 │ var import_buffer4 = require("buffer");

I've tried NodeGlobalsPolyfillPlugin and NodeModulesPolyfillPlugin plugins, using node-stdlib-browser, as well as trying to create a shim file. I've tried turning off/on node_compat and setting "type": "module" in my package.json. My wrangler.toml:

name = "..."
main = "./dist/index.js"
account_id = "..."
workers_dev = true
compatibility_date = "2022-11-08"
node_compat = true
usage_model = "unbound"

[build]
command = "npm run build"
watch_dir = ["src"]

name = "..."
main = "./dist/index.js"
account_id = "..."
workers_dev = true
compatibility_date = "2022-11-08"
node_compat = true
usage_model = "unbound"

[build]
command = "npm run build"
watch_dir = ["src"]

I'm a bit at a loss what else to try to get these imports fixed, any help would be greatly appreaciated.

2 Replies

danawoodmanOP•3y ago

tsup.config.ts:

import { defineConfig } from 'tsup'
// import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
// import plugin from 'node-stdlib-browser/helpers/esbuild/plugin'
// import shim from 'node-stdlib-browser/helpers/esbuild/shim'
// import stdLibBrowser from 'node-stdlib-browser'

export default defineConfig({
    entry: ['src/index.ts'],
    format: 'esm',
    // format: 'cjs',
    shims: true,
    splitting: false,
    sourcemap: true,
    clean: true,
    // inject: [
    //     './src/shims.ts',
    // ],
    // define: {
    //     // global: 'global',
    //     // process: 'process',
    //     Buffer: 'Buffer',
    // },
    // plugins: [
    //     NodeGlobalsPolyfillPlugin({ buffer: true }),
    //     NodeModulesPolyfillPlugin(),
    //     plugin(stdLibBrowser),
    // ],
})

import { defineConfig } from 'tsup'
// import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
// import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
// import plugin from 'node-stdlib-browser/helpers/esbuild/plugin'
// import shim from 'node-stdlib-browser/helpers/esbuild/shim'
// import stdLibBrowser from 'node-stdlib-browser'

export default defineConfig({
    entry: ['src/index.ts'],
    format: 'esm',
    // format: 'cjs',
    shims: true,
    splitting: false,
    sourcemap: true,
    clean: true,
    // inject: [
    //     './src/shims.ts',
    // ],
    // define: {
    //     // global: 'global',
    //     // process: 'process',
    //     Buffer: 'Buffer',
    // },
    // plugins: [
    //     NodeGlobalsPolyfillPlugin({ buffer: true }),
    //     NodeModulesPolyfillPlugin(),
    //     plugin(stdLibBrowser),
    // ],
})

fwiw the builds succeed and I've been using tsup/esbuild with other CF Pages apps without issue, but the dependency imports Buffer and I'm struggling to polyfill/shim it

MrBBot•3y ago

Hey! 👋 Apologies for the delayed response. Just to confirm are you using wrangler dev --local? Have you checked the output from tsup is actually including the buffer polyfill? You should only need one of either node_compat (which only works with Wrangler), or the node modules/globals polyfill.

Gaming

Programming

Anyone have luck with tsup esbuild for