CODEWITHSUNDEEP
javascript
anonymoose
anonymoose

Reputation: 1243

Stuck On Imports and Exports

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.

Upvotes: 1

Views: 514

Answers (1)

Chris Applegate
Chris Applegate

Reputation: 762

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.

Upvotes: 1

Related Questions