VueJS/Vite incompatibility

[dcolley]

Running rpc-provider into our VueJS dApp.

Smoldot has panicked. This is a bug in smoldot. Please open an issue at https://github.com/paritytech/smoldot/issues with the following message:
Error: Uncaught SyntaxError: Unexpected token '<'

I am able to use wsProvider without any issues.

App.vue

  created () {
    // const provider = new WsProvider(endpoints[this.config.chain][this.config.endpoint])
    const provider = new ScProvider(WellKnownChain.ksmcc3)
    await provider.connect()
    this.api = await ApiPromise.create({ provider })
  }

package.json

    "@polkadot/api": "^8.10.1",
    "@polkadot/rpc-provider": "^8.10.1",

vue.config.js

const fs = require('fs')

module.exports = {

  runtimeCompiler: true,

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          //include: [resolve('src'), resolve('test')],
          options: {
            //formatter: require('eslint-friendly-formatter'),
            // emitWarning: !config.dev.showEslintErrorsInOverlay,
            configFile: '.eslintrc.js'
          }
        },
        {
          test: /\.js$/,
          // test: /node_modules[/\\]@polkadot*.js$/,
          include: [
            /node_modules[/\\|]@polkadot/i,
            /node_modules[/\\|]@substrate/i
          ],
          loader: require.resolve('@open-wc/webpack-import-meta-loader'),
          // loader: '@open-wc/webpack-import-meta-loader',
          exclude: /\.vue$/,
        },

        // Module parse failed: Unexpected token
        {
          test: /\.m?js$/,
          include: [
            /node_modules[/\\|]@polkadot/i,
            /node_modules[/\\|]@substrate/i
          ],
          // exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@vue/cli-plugin-babel/preset',
              ],
              plugins: [
                "@babel/plugin-proposal-private-methods",
                "@babel/plugin-proposal-class-properties",
                '@babel/plugin-proposal-object-rest-spread',
              ]
            }
          }
        },

      ]
    }
  },

  devServer: {
    host: '0.0.0.0',
    port: 8080,
    disableHostCheck: true
  }
}

How can I provide more info?

[dcolley]

Running in Brave:

• polkadot{.js} extension 0.44.1
• Substrate Connect Extension 0.1.7

Same issue on

• Safari (w/o browser extension)
• chrome (w/o browser extension)

[tomaka]

This is intriguing. We are running a Web Worker, and apparently there's a syntax error in the code in the worker.

I don't really know how that could happen, but my main hypothesis would be that you're using an old version of WebPack that has a bug somewhere. We know that WebPack v5 works, while v4 requires some additional configuration and has some issues.

If it's possible, a way for us to reproduce the error would be the easiest.

[dcolley]

Why is the worker being requested like this?

[dcolley]

Vue2 doesn't play nice with webpack 5... and Vue3 is not production-ready yet
I had to jump through loads of hoops to get @PolkaDot include working with ts

[dcolley]

I'll make a small repo to illustrate/replicate the issue
@tomaka thanks for the pointer.

Yes, it seems to be an issue with webpack.
I can't reproduce the issue with Vite.js so it's clearly not a smoldot issue. The simple solution is to rebuild the vue project from new with vite.js

[tuul-wq]

@dcolley have you succeeded with Vite?
Currently I face a problem building project with ScProvider.
@substrate/smoldot-light has browser field that defines what files to substitute if it's a browser environment, and that's not handled by Vite (Rollup) at least in my project.

"browser": {
  "./dist/compat/index.js": "./dist/compat/index-browser-overwrite.js",
  "./dist/worker/spawn.js": "./dist/worker/spawn-browser-overwrite.js"
},

[vite:worker-import-meta-url] 'parentPort' is not exported by __vite-browser-external, imported by node_modules/@substrate/smoldot-light/dist/compat/index.js
file: /Users/yaroslav/Documents/Stuff/Projects/vite-number-conversion/node_modules/@substrate/smoldot-light/dist/worker/spawn-browser-overwrite.js:17:9
15: //
16: // A rule in the `package.json` overrides it with `index-browser-override.js` when in a browser.
17: import { parentPort } from 'node:worker_threads';
             ^
18: import { hrtime } from 'node:process';
19: import { createConnection as nodeCreateConnection } from 'node:net';

Interesting that axios that also has browser field in package.json builds without a problem, but smoldot-light which is an internal dependency of @polkadot/rpc-provider - doesn't.

Basic Vite config:

export default defineConfig({
  mode: process.env.MODE,
  build: {
    target: ['chrome102'],
  },
  plugins: [react()],
});

[tomaka]

I honestly don't know what to do here.

It seems that there are many different bundlers/executors in the JS ecosystem, and the list of features that overlap between all these bundlers/executors is extremely small. Basically just ECMAScript.

In principle, we could modify smoldot so that the user of the library would have to manually "plug" the features that aren't native to JavaScript, which are workers, WebSocket, and crypto.
In practice, though, doing so would be extremely tedious for users. Just look at the JS code in bin/wasm-node/javascript/src and imagine if every single user of the library would have to replicate 2/3rds of this code in order to use smoldot.

[tomaka]

Should be fixed by #2498 and #2487