Use npm modules in browser js

Question

I had a script that ran well in the JS terminal, but I tried to transfer to the browser and it would not run. I have been trying to figure out how to use npm packages in browser, specifically pythonia, which is necessary for my program. I tried using browserify to bundle, which didn't work, but I learned that I should switch to esbuild, which gave me

✘ [ERROR] Could not resolve "http"

bundle.js:198:23:
  198 │     var http = require("http");

that error every time I tried to use a package (basically the packages used node js preinstalled modules like http, but require does not work in browser). I also needed to use "child_spawn" but got the same error because I had to use require. I tried using a cdn, specifically jsdeliver. I used this code:

    <script
type="module"
src="https://cdn.jsdelivr.net/npm/translate@2/index.min.js"
></script>
<script>
    const text = translate("Hello world", "es").then(() => {
        console.log(text);
    });
</script>

but I got the error "translate is not defined", which I think must mean I'm doing something wrong? Clearly there is some user error here, but I've been searching for days and I've gone in circles. What method would be best/what am I doing wrong to include npm modules in browser? I know this question has a lot to it, but I don't really know what path to go down here. Any help would be much appreciated. Thank you!

that package likely does not support the browser – Daniel A. White Aug 28 '23 at 01:21 — Daniel A. White, Aug 28 '23 at 01:21

score -1 · Answer 1 · answered Aug 28 '23 at 02:12

Here is the code that demonstrates how to use npm modules in the browser:

<!-- Include the module using a script tag -->
<script type="module" src="your-script.js"></script>

In your "your-script.js" file:

// Import the npm module using an import statement
import translate from 'translate';

// Use the imported function
const text = await translate("Hello world", "es");
console.log(text);

Ensure that your module supports ES modules (type="module"), and you're using the correct import syntax (import). Also, make sure that the npm package you are trying to use is compatible with browser environments. Not all npm packages are designed to work in browser environments, especially if they rely on Node.js-specific features like "http" or "child_process". If the package doesn't have a browser-compatible version, you might need to find alternatives or consider re-implementing certain functionalities in a browser-friendly way.

Use npm modules in browser js

1 Answers1