TypeError: wasm.__wbindgen_add_to_stack_pointer is not a function

[waLLxAck]

Verify latest release

• I verified that the issue exists in the latest chatgpt release

Verify webapp is working

• I verify that the ChatGPT webapp is working properly for this account.

Environment details

Node v19.8.1
Brave Version 1.49.120 Chromium: 111.0.5563.64 (Official Build) (64-bit)
Win 11

Describe the Bug

When importing the library I get this:

Uncaught (in promise) TypeError: wasm.__wbindgen_add_to_stack_pointer is not a function
at get_encoding (tiktoken_bg.js:174:1)
at ./node_modules/chatgpt/build/index.js (tokenizer.ts:4:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/pages/Pexels.js (src_pages_Pexels_js-node_modules_keyv_src_sync_recursive.chunk.js:18:65)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at |groupOptions: {}|namespace object:62:1

[transitive-bullshit]

cc @dqbd as this looks related to https://github.com/dqbd/tiktoken

[dqbd]

It seems like the issue is mostly contained when using Create React App. Will try to look into it to support CRA or at least improve the error message for DX.

But if possible I would suggest using Vite instead, which is supported right now @waLLxAck .

[dqbd]

@waLLxAck Assuming you're (still) using Create React App for your app, you can also use craco to add proper Webpack 5 configuration, which should fix your issue.

craco.config.js

module.exports = {
  webpack: {
    configure: (config) => {
      config.experiments = {
        asyncWebAssembly: true,
        layers: true,
      };

      // turn off static file serving of WASM files
      // we need to let Webpack handle WASM import
      config.module.rules
        .find((i) => "oneOf" in i)
        .oneOf.find((i) => i.type === "asset/resource")
        .exclude.push(/\.wasm$/);

      return config;
    },
  },
};

Updated notes can be found here : https://github.com/dqbd/tiktoken/tree/main/js#create-react-app

[dqbd]

And finally, there is an ongoing issue when attempting to use chatgpt in Deno via esm.sh, progress can be tracked here:
dqbd/tiktoken#22

[Jack251970]

@waLLxAck Assuming you're (still) using Create React App for your app, you can also use craco to add proper Webpack 5 configuration, which should fix your issue.

craco.config.js

module.exports = {
  webpack: {
    configure: (config) => {
      config.experiments = {
        asyncWebAssembly: true,
        layers: true,
      };

      // turn off static file serving of WASM files
      // we need to let Webpack handle WASM import
      config.module.rules
        .find((i) => "oneOf" in i)
        .oneOf.find((i) => i.type === "asset/resource")
        .exclude.push(/\.wasm$/);

      return config;
    },
  },
};

Updated notes can be found here : https://github.com/dqbd/tiktoken/tree/main/js#create-react-app

@dqbd Hello! How can I config this in quasar.config.js?

I have added these configurations to quasar.config.js, but the error still exists.

module.exports = function (/* ctx */) {
  return {
    build: {
      extendWebpack(cfg) {
        cfg.experiments = {
          asyncWebAssembly: true,
          layers: true,
        }

        cfg.module.rules
          .find((i) => "oneOf" in i)
          .oneOf.find((i) => i.type === "asset/resource")
          .exclude.push(/\.wasm$/);
      },
    }
  }
}

And this is my log.

runtime-core.esm-bundler.js:244 TypeError: wasm.__wbindgen_add_to_stack_pointer is not a function
    at get_encoding (tiktoken_bg.js:175:14)
    at index.js:9:17
logError @ runtime-core.esm-bundler.js:244
handleError @ runtime-core.esm-bundler.js:222
onError @ runtime-core.esm-bundler.js:2357
(anonymous) @ runtime-core.esm-bundler.js:2402
Promise.catch (async)
setup @ runtime-core.esm-bundler.js:2401
callWithErrorHandling @ runtime-core.esm-bundler.js:173
setupStatefulComponent @ runtime-core.esm-bundler.js:7265
setupComponent @ runtime-core.esm-bundler.js:7220
mountComponent @ runtime-core.esm-bundler.js:5542
processComponent @ runtime-core.esm-bundler.js:5517
patch @ runtime-core.esm-bundler.js:5119
patchKeyedChildren @ runtime-core.esm-bundler.js:5919
patchChildren @ runtime-core.esm-bundler.js:5826
processFragment @ runtime-core.esm-bundler.js:5506
patch @ runtime-core.esm-bundler.js:5112
patchBlockChildren @ runtime-core.esm-bundler.js:5424
patchElement @ runtime-core.esm-bundler.js:5332
processElement @ runtime-core.esm-bundler.js:5199
patch @ runtime-core.esm-bundler.js:5116
componentUpdateFn @ runtime-core.esm-bundler.js:5729
run @ reactivity.esm-bundler.js:190
instance.update @ runtime-core.esm-bundler.js:5763
callWithErrorHandling @ runtime-core.esm-bundler.js:173
flushJobs @ runtime-core.esm-bundler.js:406
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:298
queueJob @ runtime-core.esm-bundler.js:292
scheduler @ runtime-core.esm-bundler.js:1845
triggerEffect @ reactivity.esm-bundler.js:400
triggerEffects @ reactivity.esm-bundler.js:390
triggerRefValue @ reactivity.esm-bundler.js:1029
set value @ reactivity.esm-bundler.js:1066
loadGLLayout @ GLayout.vue:204
await in loadGLLayout (async)
(anonymous) @ MainLayout.vue:407
IndexedDB (async)
txn.objectStore.get.onsuccess @ index-browser.es.js:6151
index.ts:48 CustomPouchError {stack: 'TypeError: Failed to fetch\n    at ourFetch (file:/…s/app.asar/assets/MainLayout.d9bbdc60.js:3249:20)', message: 'Failed to fetch', result: {…}}

[transitive-bullshit]

This should be fixed in latest; we removed the wasm dependency #571