instalation issue

[grish2018]

after installing packages`
npm i @rabby-wallet/rabbykit @wagmi/core@1 viem@1

and importing`
import { configureChains, createConfig } from "@wagmi/core";
import { mainnet, arbitrum, bsc, optimism, polygon } from "@wagmi/core/chains";
import { publicProvider } from "@wagmi/core/providers/public";
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
import { infuraProvider } from "@wagmi/core/providers/infura";
import { createModal } from "@rabby-wallet/rabbykit";

I have got error`
svelte/internal in ./node_modules/@rabby-wallet/rabbykit/dist/index.js

• svelte/internal/disclose-version in ./node_modules/@rabby-wallet/rabbykit/dist/index.js
• svelte/store in ./node_modules/@rabby-wallet/rabbykit/dist/index.js, ./node_modules/svelte-i18n/dist/runtime.js
• svelte/transition in ./node_modules/@rabby-wallet/rabbykit/dist/index.js

project on vue2

[dmy147]

Can you provide a link to a Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)?
or complete error message?

[grish2018]

I can give the list of my dependencies
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.18.10",
"@chenfengyuan/vue-countdown": "^1.1.5",
"@coreui/coreui-pro": "^3.4.0",
"@coreui/icons": "^2.0.0-rc.0",
"@coreui/utils": "^1.3.1",
"@coreui/vue-pro": "~3.2.3",
"@joeattardi/emoji-button": "^4.6.2",
"@marcius-capital/binance-api": "^0.2.16",
"@rabby-wallet/rabbykit": "^0.0.5",
"@wagmi/core": "^1.4.13",
"axios": "^0.21.1",
"chart.js": "^3.7.1",
"ethereumjs-util": "^7.1.5",
"file-saver": "^2.0.5",
"git-describe": "^4.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"portal-vue": "^2.1.7",
"quasar": "^1.19.5",
"quill": "~1.3.7",
"randomcolor": "^0.6.2",
"regenerator-runtime": "^0.13.7",
"seamless-scroll-polyfill": "^2.2.0",
"spinkit": "~2.0.1",
"swiper": "^6.8.4",
"tippy.js": "^6.3.7",
"toastr": "^2.1.4",
"treemap-chart": "1.5.2",
"tui-color-picker": "^2.2.7",
"v-calendar": "2.1.5",
"v-show-slide": "^1.8.3",
"v-tooltip": "^2.1.3",
"videojs-hotkeys": "^0.2.28",
"viem": "^1.21.4",
"vue": "^2.6.12",
"vue-codemirror": "~4.0.6",
"vue-grid-layout": "^2.3.9",
"vue-i18n": "8.18.2",
"vue-multiselect": "~2.1.6",
"vue-quill-editor": "~3.0.6",
"vue-recaptcha": "^2.0.3",
"vue-router": "~3.3.4",
"vue-select": "~3.10.7",
"vue-simple-calendar": "~4.4.0",
"vue-speedometer": "^1.8.0",
"vue-text-mask": "~6.1.2",
"vue-the-mask": "^0.11.1",
"vue-video-player-videojs-7": "^7.1.1",
"vue-virtual-scroll-list": "^2.3.2",
"vue2-google-maps": "~0.10.7",
"vuelidate": "~0.7.5",
"vuex": "~3.5.1",
"xlsx": "^0.18.2"
},
"devDependencies": {
"@babel/core": "~7.12.9",
"@vue/cli-plugin-babel": "~4.5.9",
"@vue/cli-plugin-e2e-nightwatch": "~4.5.9",
"@vue/cli-plugin-eslint": "~4.5.9",
"@vue/cli-plugin-unit-jest": "~4.5.9",
"@vue/cli-service": "~4.5.9",
"@vue/test-utils": "^1.1.1",
"auto-changelog": "~2.2.1",
"babel-eslint": "~10.1.0",
"babel-jest": "~26.6.3",
"chromedriver": "latest",
"core-js": "^3.10.0",
"eslint": "6.8.0",
"eslint-plugin-vue": "~6.2.2",
"node-sass": "~4.14.1",
"npm-run-all": "~4.1.5",
"sass-loader": "~9.0.3",
"style-resources-loader": "^1.4.1",
"vue-cli-plugin-style-resources-loader": "~0.1.5",
"vue-template-compiler": "~2.6.12",
"webpack": "4.46.0"
},

[grish2018]

rabby.js

import { configureChains, createConfig } from "@wagmi/core";
import { mainnet, arbitrum, bsc, optimism, polygon } from "@wagmi/core/chains";
import { publicProvider } from "@wagmi/core/providers/public";
import { alchemyProvider } from "@wagmi/core/providers/alchemy";
import { infuraProvider } from "@wagmi/core/providers/infura";
import { createModal } from "@rabby-wallet/rabbykit";

const { chains, publicClient, webSocketPublicClient } = configureChains(
[mainnet, arbitrum, bsc, optimism, polygon],
[
alchemyProvider({ apiKey: "yourAlchemyApiKey" }),
infuraProvider({ apiKey: "yourInfuraApiKey" }),
publicProvider(),
]
);

const config = createConfig({
autoConnect: true,
publicClient,
webSocketPublicClient,
});

export const rabbyKit = createModal({
chains,
wagmi: config,
projectId: "yourProjectId",
appName: "RabbyKit",
});

rabbykit.open();

console.log("current rabbykit modal open status:", rabbyKit.getOpenState());

rabbykit.close();
(using my own keys)

main.js

import {rabbyKit} from '@/assets/js/rabby.js'
console.log('test',rabbyKit);
....

[dmy147]

maybe you can give it a try in the webpack config

alias: {
  svelte: path.resolve('node_modules', 'svelte/src/runtime'),
}

[grish2018]

vue.config.js
const path = require('path')

process.env.VUE_APP_BUILD_YEAR = new Date().getFullYear()

if (process.env.NODE_ENV !== 'production') {
const {gitDescribeSync} = require('git-describe');
process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash
}

module.exports = {
// chainWebpack: config => {
// const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
// types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
// },
lintOnSave: false,
runtimeCompiler: true,
configureWebpack: {
//Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
resolve: {
symlinks: false,
alias: {
svelte: path.resolve('node_modules', 'svelte/src/runtime'),
}
},
},
// use this option for production linking
// publicPath: process.env.NODE_ENV === 'production' ? '/vue/demo/3.1.0' : '/'
// devServer: {
// proxy: {
// '/api': {
// target: ''
// },
// '/oauth': {
// target: ''
// }
// }
// }
transpileDependencies: [
'@coreui/utils'
],

pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname, './src/assets/scss/functions.scss')
]
}
},
productionSourceMap: false
}

if(process.env.VUE_APP_BUILD_REL_OUTPUT_DIR) {
module.exports.outputDir = path.resolve(__dirname, process.env.VUE_APP_BUILD_REL_OUTPUT_DIR)
}

if(process.env.VUE_APP_BUILD_PUBLIC_PATH) {
module.exports.publicPath = process.env.VUE_APP_BUILD_PUBLIC_PATH
}

ERROR

in ./node_modules/@wagmi/connectors/dist/walletConnect.js

Module parse failed: Unexpected token (71:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| let targetChainId = chainId;
| if (!targetChainId) {

    const store = this.storage?.getItem(STORE_KEY);

| const lastUsedChainId = store?.state?.data?.chain?.id;
| if (lastUsedChainId && !this.isChainUnsupported(lastUsedChainId))

@ ./node_modules/@wagmi/core/dist/connectors/walletConnect.js 4:0-73 5:0-7:2
@ ./node_modules/@rabby-wallet/rabbykit/dist/index.js
@ ./src/assets/js/rabby.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.114:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./node_modules/svelte/src/runtime/internal/each.js

Module parse failed: Unexpected token (7:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| export function ensure_array_like(array_like_or_iterator) {

  return array_like_or_iterator?.length !== undefined

| ? array_like_or_iterator
| : Array.from(array_like_or_iterator);

@ ./node_modules/svelte/src/runtime/internal/index.js 6:0-26 6:0-26
@ ./node_modules/@rabby-wallet/rabbykit/dist/index.js
@ ./src/assets/js/rabby.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.114:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

[dmy147]

This seems to be a configuration issue with your project. Maybe you can try adding optional chaining.

[dedosmedia]

It worked, thanks!