Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to import open-im-sdk-wasm in webpack4.x #73

Closed
unicycle-master opened this issue Jan 11, 2024 · 3 comments
Closed

How to import open-im-sdk-wasm in webpack4.x #73

unicycle-master opened this issue Jan 11, 2024 · 3 comments

Comments

@unicycle-master
Copy link

What would you like to share?

How to use openIM3. x without upgrading to webpack5, the webpack ^ 4.4.2 used in Vue2

Additional information

No response

@unicycle-master unicycle-master changed the title [Other]: <give this problem a name>vue2里用的webpack^4.4.2, 请问在不升级webpack5 前题下,怎么使用 openIM3.x vue2里用的webpack^4.4.2, 请问在不升级webpack5 前题下,怎么使用 openIM3.x Jan 11, 2024
@Bloomingg
Copy link
Member

  1. add patch-package
npm i patch-package
  1. update package.josn scripts
"scripts": {
+  "postinstall": "patch-package"
 }
  1. update open-im-sdk-wasm

node_modules->open-im-sdk-wasm->lib->index.js(index.es.js)

function initWorker() {
    if (typeof window === 'undefined') {
        return;
    }
    // use for webpack 4
    const IMWorker = require('worker-loader!./worker.js');
    worker = new IMWorker.default();
    // use for webpack5+ or vite
    // const isViteEnvironment = import.meta.url.includes('.vite/deps');
    // const isSupportModuleWorker = supportsModuleWorkers();
    // const getWorkerUrl = (url) => url.href.replace('.vite/deps', 'open-im-sdk-wasm/lib');
    // const workerUrl = isSupportModuleWorker
    //     ? new URL('worker.js', import.meta.url)
    //     : new URL('worker-legacy.js', import.meta.url);
    // worker = new Worker(isViteEnvironment ? getWorkerUrl(workerUrl) : workerUrl, {
    //     type: isSupportModuleWorker ? 'module' : 'classic',
    // });
    // This is only required because Safari doesn't support nested
    // workers. This installs a handler that will proxy creating web
    // workers through the main thread
    initBackend(worker);
    rpc = new RPC({
        event: new RPCMessageEvent({
            currentEndpoint: worker,
            targetEndpoint: worker,
        }),
    });
}
  1. patch change
npx patch-package open-im-sdk-wasm
  1. add web worker loader
npm i worker-loader worker-plugin -D
  1. update webpack config
const WorkerPlugin = require("worker-plugin");

...
plugins: [new WorkerPlugin()]
...
  1. import and use
import { getSDK } from 'open-im-sdk-wasm';

const IMSDK = getSDK();

@Bloomingg Bloomingg changed the title vue2里用的webpack^4.4.2, 请问在不升级webpack5 前题下,怎么使用 openIM3.x How to import open-im-sdk-wasm in webpack4.x Jan 11, 2024
@Bloomingg Bloomingg pinned this issue Jan 11, 2024
@15949634581
Copy link

企业微信截图_17228262975782
按照上面执行完之后报这个异常怎么解决,之前也出现过但过了一天自己就好了,这次更新了一下sdk又有这个问题了

@Bloomingg
Copy link
Member

企业微信截图_17228262975782 按照上面执行完之后报这个异常怎么解决,之前也出现过但过了一天自己就好了,这次更新了一下sdk又有这个问题了

It looks like it failed when calling the cache API. You can raise a separate issue to discuss this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants