Problems switching to Svelte

[radicleart]

SvelteKit + Stacks Integration Issues

Ran into issues getting Svelte and Stacks to work together. The problems range
from missing buffer buffer dependencies to circular dependencies.

I tried many combinations of versions of node, stacks and with and without SvelteKit.

NB: SvelteKit requires node > 16 and stacks.js is compatible - these are the starting deps..

For example;

% node -v v16.14.2
"devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "svelte": "^3.44.0",
    "svelte-check": "^2.7.1",
    "typescript": "^4.7.4",
    "vite": "^2.9.13"
},
"type": "module",
"dependencies": {
    "@stacks/blockchain-api-client": "^4.1.0",
    "@stacks/connect": "^6.9.0",
    "@stacks/network": "^4.3.0"
}

On start up throws

Cannot find module 'regenerator-runtime' imported from '/Users/mikey/hubgit/radicle-solutions/svelte-stxeco/node_modules/@stacks/connect/dist/connect.cjs.development.js'
Error: Cannot find module 'regenerator-runtime' imported from '/Users/mikey/hubgit/radicle-solutions/svelte-stxeco/node_modules/@stacks/connect/dist/connect.cjs.development.js'

with npm i regenerator-runtime a new issue arises when calling showConnect(authOptions)
in stacks/connect

Uncaught ReferenceError: Buffer is not defined
    at SECP256K1Client3.derivePublicKey (secp256k1.ts:25:5)
    at makeAuthRequest (messages.ts:99:37)
    at UserSession.makeAuthRequest (userSession.ts:131:25)
    at HTMLDivElement.startLogin (WalletConnectButton.svelte? [sm]:42:36)
    at HTMLDivElement.<anonymous> (WalletConnectButton.svelte? [sm]:61:57)
    at HTMLDivElement.<anonymous> (index.mjs:419:19)

Svelte + Stacks integration Issues

Trying different versions of stacks libs and rolled back from
SvelteKit to Svelte (SK requires node 16)
Uncaught ReferenceError: nodeCrypto is not defined

E.g. this is with

    node : v16.14.2
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-polyfill-node": "^0.10.1",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "@stacks/blockchain-api-client": "^4.1.0",
    "@stacks/connect": "^6.9.0",
    "regenerator-runtime": "^0.13.9",
    "sirv-cli": "^2.0.0"
  }

Note the pollyfill added to try to get beyond similar problems see.

rollup v2.76.0
bundles src/main.js → public/build/bundle.js...
(!) Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/safe-buffer/index.js (4:7)
(!) Circular dependencies
node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/index.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/clarityValue.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/types/principalCV.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/postcondition-types.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js
node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/index.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/types/tupleCV.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js
node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/index.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/serialize.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/types.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/keys.js -> node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js
...and 84 more
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/jsontokens/lib/cryptoClients/sha256.js
1: "use strict";
2: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
3:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4:     return new (P || (P = Promise))(function (resolve, reject) {
...and 1 other occurrence
node_modules/engine.io-client/build/cjs/transports/websocket.js
1: "use strict";
2: var __importDefault = (this && this.__importDefault) || function (mod) {
                          ^
3:     return (mod && mod.__esModule) ? mod : { "default": mod };
4: };
...and 1 other occurrence
node_modules/async/dist/async.js
3:   typeof define === 'function' && define.amd ? define(['exports'], factory) :
4:   (factory((global.async = global.async || {})));
5: }(this, (function (exports) { 'use strict';
     ^
6:
7: function slice(arrayLike, start) {
[!] Error: 'default' is not exported by polyfill-node.buffer.js, imported by node_modules/safe-buffer/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/safe-buffer/index.js (4:7)
2: import * as commonjsHelpers from 'commonjsHelpers.js';
3: import 'buffer?commonjs-require';
4: import buffer from 'buffer?commonjs-proxy';
          ^
5:
6: var safeBuffer = commonjsHelpers.createCommonjsModule(function (module, exports) {
Error: 'default' is not exported by polyfill-node.buffer.js, imported by node_modules/safe-buffer/index.js
    at error (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:12555:16)
    at Module.traceVariable (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:12914:29)
    at ModuleScope.findVariable (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:11566:39)
    at FunctionScope.findVariable (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at MemberExpression.bind (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:8715:49)
    at VariableDeclarator.bind (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at VariableDeclaration.bind (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:5379:73)
    at BlockStatement.bind (/Users/mikey/hubgit/radicle-solutions/svelte-vote/node_modules/rollup/dist/shared/rollup.js:5379:73)


[2022-07-09 12:00:32] waiting for changes...

I can't make head or tail of all this.

[radicleart]

Still investigating but think this is local to my machine.