with-vanilla-js example doesn't work because it has missing file

[nickgreen5]

There is no bundle.js file and this file is included inside index.html. This is why the example doesn't work.

I did exact steps as mentioned in readme:

Clone this repo

/~https://github.com/blocknative/web3-onboard.git
Navigate to the project directory:

cd examples/with-vanilla-js
Install the dependencies:

npm install
Run the development server:

npm run dev

Still there is no bundle.js file that is included in index.html
<script defer src="dist/bundle.js"></script>

[leightkt]

@nickgreen5 the bundle.js file is not missing- it is automatically generated by webpack upon running npm run dev or npm run build.
I am able to run successfully locally from the folder examples/with-vanilla-js by running npm install && npm run dev
Are you sure you're running the commands from within the with-vanilla-js folder?

[nickgreen5]

@leightkt thank you but step run npm run build is not mentioned in the readme. It may be logical for those who use npm on daily basic but for us who never used npm before it it is critical that every required step is wrote down.

I run now also this and it created folder dist (which hasn't been created by running only npm run dev), however there is still no bundle.js file inside, it created bunch of other files. Maybe it has something to do with Windows? Or is maybe any other missing step?

[leightkt]

@nickgreen5 It's not mentioned because npm build isn't required to run the development server, but it is one of the ways webpack compiles a bundle.js file. The message above tells me that the build files have been successfully compiled (with two warnings).
What is the error you are running into when running npm run dev?

[nickgreen5]

@leightkt There is no error (see the image below).

I just checked webpack.config.js file, I am not sure how it supposed to create bundle.js file if this name is not mentioned anywhere:

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    static: { directory: path.join(__dirname, '/') },
    port: 9000
  },
  optimization: {
    runtimeChunk: 'single'
  }
}

[leightkt]

@nickgreen5 it's created by webpack for you under the hood when you run npm run dev.

Please make sure you have webpack installed- https://webpack.js.org/guides/installation/
Here is the webpack documentation for your reference.

[nickgreen5]

@leightkt sorry to be little annoying but I just tried the same thing on Ubuntu machine, followed the exact steps and again there is no bundle.js file. Also asked my friend and the same. There must be missing some step in instructions I guess for those who newly installed npm and webpack, I don't see any other explanation why following the exact steps on 3 different machines, including Ubuntu, didn't create bundle.js file.

[leightkt]

@nickgreen5 it's because webpack is serving bundle.js from memory when you run the dev server, so it's not something you're going to see listed in the files structure. It's there- behind the scenes.

[Mallinanga]

Ditto... Same happens for me too. 404 on the dist/bundle.js
Maybe it has something to do with the webpack-dev-server version?

[leightkt]

@Mallinanga Ok- thanks for the report- reopening re-examining!

[Mallinanga]

I managed to make it work by adding:

<script src="/runtime.js"></script>
<script src="/main.js"></script>

instead of the provided /dist/bundle.js

[leightkt]

@Mallinanga I was able to solve by running npm i -D webpack-dev-server- I think I accidentally left webpack-dev-server off the dependencies. Let me know if that helps solve without needing to change the src.

[nickgreen5]

I managed to make it work by adding:

<script src="/runtime.js"></script>
<script src="/main.js"></script>

instead of the provided /dist/bundle.js

@Mallinanga Thx, that almost resolved my problem too. I needed to add also defer attribute to script tag. However now I get different error if I click WalletConnect button. Does it work for you? I get this error:
99.js:1 Uncaught (in promise) ReferenceError: Buffer is not defined
at t.exports (2199.js:1:82278)
at g (2199.js:1:7507)
at Module.ot (2199.js:1:31294)
at lt._generateKey (2199.js:1:29246)
at lt.createSession (2199.js:1:19338)
at l.code (main.js:2:399437)
at new Promise ()
at provider.chains.request (main.js:2:398907)
at Oa (main.js:2:594847)
at R (main.js:2:659537)
t

[nickgreen5]

@Mallinanga I was able to solve by running npm i -D webpack-dev-server- I think I accidentally left webpack-dev-server off the dependencies. Let me know if that helps solve without needing to change the src.

@leightkt I appreciate all your help. However this didn't solve the problem on my side, still getting the same error. I thought that the purpose of vanilla js example was that you could simply include js files into html and run the example without running npm/nodejs.

[leightkt]

@nickgreen5 you'll need a module bundler- like webpack- to use the web3onboard package. It has a lot of complex dependencies and uses "bare" imports not supported in browser.

[leightkt]

@nickgreen5 I was able to reproduce the walletConnect error- I'll push some updates to the example

[leightkt]

@nickgreen5 I pushed some changes to the vanilla-js demo:
/~https://github.com/blocknative/web3-onboard/tree/develop/examples/with-vanilla-js

Let me know if this gets you up and running!

[Adamj1232]

Merged in latest release! Feel free to continue the conversation here if an issue arises.

[nickgreen5]

Just wanted to write follow update for those who want to run this like really old school way pure js without nodejs. Do all the mentioned steps, then run npm run build and then just copy all files to localhost, then change

    <script defer src="/runtime.js"></script>
    <script defer src="/main.js"></script>

into

    <script defer src="dist/runtime.js"></script>
    <script defer src="dist/main.js"></script>

This did trick to me, now I can simply just copy all files to my php project.