1

I've been trying to get a grip on imports and exports so that I can slim down my JS application. I've tried incorporating these Mozilla and this Stack Overflow examples without any luck. It looks like Chrome should support this now. I'm not sure what I'm doing wrong.

I have a function like this in export.js:

export crossingover() {
dynamicText.setText('Some text');
canvas.renderAll();
}

I import the above in my main app.js file like this, where the original function was:

import { crossingover } from 'export';

In my index.html file I have the two script tags:

<script src="app.js"></script>
<script type="module" src="export.js"></script>

In my mind, the result should be the same as having the original function where the import now is in app.js but it breaks the application. What am I missing?

I'm getting these 2 errors when I inspect my application:

Uncaught SyntaxError: Unexpected token {

index.html:1 Access to Script at 'file:///myappdirectory/export.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
anonymoose
  • 1,169
  • 2
  • 21
  • 62
  • "breaks the application" - what errors are shown, etc.? and you say "the following should result", though you have no 'following'...... (I think you mean 'the result should be the same', though please be clear if you meant to have something else...) – Apps-n-Add-Ons Jan 02 '18 at 15:23
  • @CFPSupport Noted, I made changes to my question. Thank you. – anonymoose Jan 02 '18 at 15:30
  • 1
    that makes a MASSIVE difference! see @ChrisApplegate's updated answer - the error code tells a lot! – Apps-n-Add-Ons Jan 02 '18 at 15:44

1 Answers1

1

First, your import path needs to be path-like:

import { crossingover } from './export.js';

Then you only need have a script tag for app.js, and this should be type module:

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

Finally, the syntax for your export needs to be:

export function crossingover() {
[...]

Update

One further thing which I didn't realise - in your updated answer you reveal you are serving from a file:/// URL. Security settings in your browser may not permit JS module loading from a file URL - instead run a local web server and load that in your web browser.

Chris Applegate
  • 752
  • 3
  • 11
  • I followed your directions. After I got it onto a server I got a new error, `Uncaught ReferenceError: crossingover is not defined at HTMLAnchorElement.onclick (10.0.1.52/:30)`. I followed that to my index.html file which was `"Crossing Over"`. – anonymoose Jan 02 '18 at 15:45
  • 1
    @code4ever Probably because the `crossingover` is only available in the scope of the `app.js` module and not globally. You could assign it with `window.crossingover = crossingover;` in `app.js`, and that should make it available to your `onclick` – Chris Applegate Jan 02 '18 at 15:56
  • I did what you said and it wanted me to do that with every function so for the sake of testing I did what you've suggested in total to a different function and it worked. Solved! I'll open a new question for the new issue. Thanks. – anonymoose Jan 02 '18 at 16:45