How to import function from within my project into script.JS

Question

Things work fine when I make a standalone project with two files, one called helperFuncs.js and the other called index.js, where helperfuncs.js has

function stringOfZeros(numZeros) {
 //takes in a number and outputs a string with that many zeros;
 ...
}
module.exports = {
 stringOfZeros: stringOfZeros,
}

and index.js has

const helperFuncs = require("./helperFuncs.js");
const stringOfZeros=helperFuncs.stringOfZeros;
let myZeroString = stringOfZeros(17);
console.log(myZeroString);

This works even with no package.json file in the project.

However, if I do the same thing where I create an identical helperFuncs.js file in a small HTML project that has an index.html page and a script.js file on the same level in the directory, and I set the above lines of code from the index.js file into the script.js file where the lines execute inside a window event load listener that otherwise works, I get this error:

TypeError: stringOfZeros is not a function

What am I doing wrong? Does the fact that it's inside a script file somehow require me to use "import" instead of require, or make it mandatory to make a package.json file where otherwise it was optional?

• colecmc: For an html only project, module.exports is not valid. That's for node.js environments.
• Invizi: You need to import the JS files using a script tag. Remember to defer them, so they run after the page has loaded.

Answer 1

Looks like you are trying to run Node JS compatible code in a browser.

Currently browsers do not support this kind of import/export syntax. To use the code above for web applications you need additional special tools that will re-build your code in a way that browser will understand it.

I'd recommend you to try this tools:

• Webpack
• Babel (requires additional plugins configuration)
• Vite.js (thanks Invizi for suggestion)

• Invizi: @AndregProgr There is also a newer library called Vite that is simpler and faster.

Answer 2

Web browsers don't support CommonJS modules or cjs. Instead what you are looking for is ES modules or esm.

It is common for modules on production websites to be bundled into a single javascript file with a bundler. This allows you to use whatever module type you like, and you can apply transformations to your code such as minifying it or adding support for older browsers.

If you like to write your code and run it directly without a bundler. You should use ES modules. You can find lot's of info on this page. But in your case it would look something like this:

helperfuncs.js

export function stringOfZeros(numZeros) {
}

index.js

import {stringOfZeros} from "./helperFuncs.js";
let myZeroString = stringOfZeros(17);
console.log(myZeroString);

You can then load your index.js in your html with the type tag set to module like so:

<script src="index.js" type="module"></script>

• Todd R: I think it's possible that I'm having additional problems as a result of using Replit, because I get "SyntaxError: Unexpected token '{' " on the import line, whether I use your syntax or attempt to mimic pegasusroe's example from the question "[JS] ES6 Import/Export Syntax Not Working".
• Todd R: And that's if I tell the html that my script.js file is of type "module." Otherwise, I get a different error saying that I can't use import outside a module.
• Jespertheend: I have a working replit here: replit.com/@jespertheend/esm-imports