0

For simplification purposes, I want to create a simple HTML file with inline javascript that utilizes the strtotime function at https://locutus.io/php/datetime/strtotime/ (also on Github) as follows:

<html>
    <head>
        <script src='strtotime.js'></script>
    </head>
    <body>
        <script>
            alert(strtotime('today'));
        </script>
    </body>
</html>

When I load the page in my browser, it says:

Uncaught ReferenceError: module is not defined

Is it possible to use this javascript function without node? If so, what do I need to do in order to make it work?

EDIT: As per @streetcoder's comment, I tried this:

<html>
  <body>
    <script type="module">
      import { strtotime } from 'strtotime.js'; 
      alert(strtotime('today'));
    </script>
  </body>
</html>

and I get

Uncaught SyntaxError: import not found: strtotime
Ben Holness
  • 2,457
  • 3
  • 28
  • 49
  • Does this answer your question? [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) – StreetCoder Apr 10 '21 at 02:56
  • I don't think so, I have edited my post with what I tried based on your link - am I doing it right? – Ben Holness Apr 10 '21 at 03:02
  • 1
    In your case: just remove `module.exports =` from the code. – CherryDT Apr 10 '21 at 03:03
  • @CherryDT - that did the trick! Thanks :) If you make it an answer, I can accept it. – Ben Holness Apr 10 '21 at 03:05

1 Answers1

3

To convert the code you need to an ES 6 module, so you can properly import it in the browser, you need to replace the line

module.exports = function strtotime (str, now) {

with

export function strtotime (str, now) {

When you have done that with your local version of the script, it's not necessary to add it in a <script> tag on your page, as you can now dynmically import the module from the server using import in your own Javascript.

Instead, you need to do the following in your own script:

  1. Place your js in an external file instead of inlining it in a script tag. Let's call it main.js.
  2. Include your script in your page like this: <script type="module" src="path/to/main.js"></script>
  3. In main.js, before using the function you need, import it: import { strtotime } from 'path/to/strtotime.js';

That's it!

connexo
  • 53,704
  • 14
  • 91
  • 128
  • Does it have to be imported from an external js file? Is there a way to do it with inline javascript only? – Ben Holness Apr 10 '21 at 03:25
  • I haven't checked recently, but from what I remember the `src` attribute is mandatory when using `type="module"`. But even if that were not - or no longer - the case, I'd still stay away from inline JS for security reasons. – connexo Apr 10 '21 at 03:33
  • I'm aware of the security implications, but I'm dynamically generating the JS with PHP for use in an HTML modal, and it may or may not need to use the strtotime function depending on various factors. Having an external file means generating a temporary external file every time it is needed. It's much less hassle to keep it inline in this situation. To clarify - the strtotime function js file might be external, but I want to import it if needed from inline js, not from another external js file. – Ben Holness Apr 10 '21 at 05:16