1

So let's imagine i have two js scripts

script1.js

export default function Hello() {
     return "Hello buddy!";
}

script2.js

import { Hello } from './script1.js';

function print(){
     let val = Hello;
     console.log(val);
}

When i run the function print in browser i get the following error

Uncaught SyntaxError: Cannot use import statement outside a module

Unexpected token 'export'

I did some investigation and this is solved by adding type module to script2.js. But the question is. I dont have a HTML to change the script. I do everything in vanilla javascript. so, is the solution to get the scripts by ID and change the type of the script2.js from text/javascript to module?

Is there any other way to change the script2.js to module?

Nuno Marques
  • 43
  • 6
  • 3
    If you don't have a HTML file, how are you running the JS in your browser? – Dai May 15 '22 at 13:43
  • Im using Oracle Policy Modeling. Its a low code solution that generates a HTML – Nuno Marques May 15 '22 at 13:47
  • How is the code run? In a browser or in a different runtime environment? – jabaa May 15 '22 at 13:52
  • 2
    Unrelated to the current error message: `import { Hello } from './script1.js';` doesn't import the default export. `import Hello from './script1.js';` imports the default export. – jabaa May 15 '22 at 13:53
  • In a browser. So OPM doesnt support a lot of things like accordions. I use javascript only to make the accordion and integrate within OPM. – Nuno Marques May 15 '22 at 13:54
  • That means a HTML file is generated and you can modify the script tag. – jabaa May 15 '22 at 13:55
  • Yes i can modify via DOM manipulation. I already did but the error persists. – Nuno Marques May 15 '22 at 13:56
  • I don't think you can do this with JavaScript. Either, you try it before the tag is evaluated. In that case, you can't access it. Or you try it after the tag is evaluated. In that case, it's already too late. You can do it manually. You could add this tag using JavaScript, if this is possible. – jabaa May 15 '22 at 13:57
  • So let's say i want to import an existing npm module in vanilla javascript. thats not possible? – Nuno Marques May 15 '22 at 14:00
  • Does the server serve the module? – jabaa May 15 '22 at 14:05
  • my main problem here is that i want to import a Npm module and everytime i do it i get the error that i showed up in this post question. in a node.js project i would just use require. but javascript doesnt support the require. my only workaround is to import the export variable/function and everytime i do that javascript throw me the error that i cant use import statement outside a module – Nuno Marques May 15 '22 at 14:05
  • You can use modules in a browser environment. – jabaa May 15 '22 at 14:06
  • @jabaa with browserify you mean? – Nuno Marques May 15 '22 at 14:10
  • No, you can use modules with ` – jabaa May 15 '22 at 14:10
  • @jabaa lets say i want to import a npm module. i try that and still get the same error despite being a module type. so i dont think the problem is that – Nuno Marques May 15 '22 at 14:15
  • I saw the link you provide now and i just realize the import is not supported by Internet Explorer. So, OPM ( solution im using is based on IE browser). maybe thats the problem? – Nuno Marques May 15 '22 at 14:17
  • Yes, ES6 modules aren't supported by IE. IE is dead for multiple years. Most modern code, frameworks and libraries won't work with IE. – jabaa May 15 '22 at 14:21
  • Check this similar thread https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file – Kaashan May 15 '22 at 14:40

1 Answers1

0

You can add an .mjs file.

Example

// index.js

import otherFile from './otherFile.js';

// otherFile.js

import otherOtherFile from './otherOtherFile.mjs';

export default './otherFile.js';

// otherOtherFile.mjs

export default 'otherOtherFile.mjs';

EDIT: You can also add a type="module" to the script tag you're working on, but you need a web server so it can handle the module.

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

EDIT: That error is occurring because it's signifying you cannot add an import to a non-module file and .mjs literally means ECMASCRIPT MODULE

EDIT: You can import a NPM module with vanilla Javascript using CDN's

LouieMartin
  • 37
  • 1
  • 7