vue.js + typescript + janus

[m. hirasaki]

Hi, all.

I'm Mamoru Hirasaki.

Nice to meet you.

I want to use janus with vue.js + typescript.

I tried to setup according this page.

https://janus.conf.meetecho.com/docs/js-modules.html#js-webpack

but I had error...

Could you help me?

error message is

```

Failed to compile.

./src/data_sources/janus/AppJanusClient.ts
Module not found: Error: Can't resolve 'janus-gateway/npm' in 'src/data_sources/janus'

```

AppJanusClient.ts imports are

```

import { JanusJS } from "janus-gateway/npm";
import Janus = JanusJS.Janus;
import PluginHandle = JanusJS.PluginHandle;
import MessageType = JanusJS.MessageType;
import JSEP = JanusJS.JSEP;
import Message = JanusJS.Message;

```

npm package is

```

{
"name": "janus-front",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"eslint-check": "eslint --ext .ts,.vue .",
"eslint-fix": "eslint --ext .ts,.vue . --fix",
"prettier-fix": "prettier --write . ",
"fix": "npm run eslint-fix && npm run prettier-fix",
"clear": "rm -rf node_modules && rm yarn.lock"
},
"dependencies": {
"core-js": "^3.6.5",
"janus-gateway": "git://github.com/meetecho/janus-gateway.git",
"janus-gateway-tsdx": "^0.2.7",
"janus-typescript-client": "https://github.com/marekhoryna/janus-typescript-client",
"moment": "^2.29.1",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"webrtc-adapter": "^8.1.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-loader": "^8.2.3",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^19.0.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-vue": "^8.2.0",
"exports-loader": "^2.0.0",
"prettier": "^2.5.1",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.46.0"
}
}

```

vue.config.js is

```

const webpack = require("webpack");

module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({ adapter: ["webrtc-adapter", "default"] }),
],
module: {
rules: [
{
test: require.resolve("janus-gateway"),
loader: "exports-loader",
options: {
exports: "Janus",
},
},
],
},
},
devServer: {
proxy: {
"^/api": {
target: "http://localhost:3600",
changeOrigin: true,
},
},
},
};

```

[Vix Nguyen]

Hi Mamoru Hirasaki,

I think you did the importing in the wrong way.

In your ts file, just import like this 
import { Janus } from 'janus-gateway';

Please try.

Vào lúc 16:45:23 UTC+7 ngày Thứ Năm, 16 tháng 12, 2021, hirasa...@gmail.com đã viết:

[m. hirasaki]

Hi,

Thank you for reply!

I'll try it.