'how i use a node module on html site (client side)

i trying to require the discord.js module, and use some commands to get the avatar URL, and put it on the HTML site, I tried to:

  1. use browserify, but I get:

    "error: parsing file... unexpected token"

  2. use require node. I use import { Client } from 'discord.js'; with the script tag with type="module, but I get:

    'Uncaught TypeError: Failed to resolve module specifier "discord.js". Relative references must start with either "/", "./", or "../".'

Does someone know how to fix these errors or any other way to get the avatar URL?

My HTML code:

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ilovemoney$$</title>
        <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
        <script src="https://kit.fontawesome.com/a6c8e87b04.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="accounts">
            <div class="acc" id="luiz">
                <a href="https://instagram.com/luizzz28_" target="_blank">
                    <img class="icons" id="imgluiz" src="">
                </a>
                <h2 class="nick" id="nc1">luizzz#0001</h2>
            </div>
            <div class="acc" id="junior">
                <a href="https://instagram.com/dmn.juniorr" target="_blank">
                    <img class="icons" src="https://cdn.discordapp.com/avatars/799372092108832778/6788af224fd81da075b0b05f4e42d4a6.png?size=1024">
                </a>
                <h2 class="nick" id="nc2">juniorr ƉємƠη#5456</h2>
            </div>
        </div>
        <div id="credits">
            <h2>dev by luizzz</h2>
        </div>
        <script type ="module" src="main.js">
        </script>
        </div>-
    </body>
</html>

main.js:

import { Client } from 'discord.js';
const client = new Client({ intents: ["GUILDS", "GUILD_MESSAGES"] });
const token = 'my-token-bot'

let usersids = {
    luiz:'707608125825482894',
    junior:'799372092108832778'
};

let tagimgluiz = document.getElementById('imgluiz');

function seturlavatarluiz() {
    client.users.fetch(`${usersids.luiz}`).then((infos) => {
        tagimgluiz.setAttribute('src', `https://cdn.discordapp.com/707608125825482894/${infos.avatar}.png?size=1024`)
        }).catch(console.error); 
};

windows.onload = (ev) => {
    seturlavatarluiz();
}

client.login(token);
javascripthtmldiscordrequire


Solution 1:[1]

You can use module bundlers such as Webpack or Rollup.

These work best with ES modules, as they are tree-shakeable, so that your website isn't too slow.

When you import something, the bundler will automatically detect that and minify the code that you've imported.

Normally, these are npm modules, but they just minify the build; they don't come in your website.

With an example such as Webpack, you first have to install it.

$ npm install webpack webpack-cli

Then, you provide an config file (webpack.config.js), and add some configuration in there. For example:

webpack.config.js

module.exports = {
  entry: ["./src/index.js"],
  output: {
    filename: "./public/bundle.js",
  },
};

There are many more keys you can add.

Finally, you have to add a build script, something like:

package.json

{
  "scripts": {
    "build": "webpack"
  }
}

Then, you can write your code, and Webpack (or any other module bundler) will bundle it!

See the documentation for more information.

This post is not advertising or recommending any module bundlers. They are just for the sole purpose of examples.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arnav Thorat

Related Questions