CODEWITHSUNDEEP
javascriptecmascript-6importexportinstance
Ömürcan Cengiz
Ömürcan Cengiz

Reputation: 2159

Javascript imports / exports CORS problem

I need to create an instance of classes from a certain javascript file which contains 3 classes and call the methods of that classes from another javascript file. Classes in main javascript file is like:

function Class1(param1, param2) {
    this.openTag;
    this.closeTag;
    this.htmlTags;

    this.openTag = '<div id="' + this.elementId + '">';
    this.closeTag = '</div>';

    this.htmlTags = {
        sectionTitle: {
            openTag: '<h2 class="class1">',
            closeTag: '</h2>'
        },
        group: {
            openTag: '<div class="class2">',
            closeTag: '</div>'
        },
        table: {
            openTag: '<table class="class3">',
            closeTag: '</table>'
        }
    }
   ...
}

And methods like:

 Class1.prototype.someName = function (index) {
    var outputHtml = '';

    var text = this.tableHeaders[index] || '';

    outputHtml += '<th>' + text + '</th>';

    return outputHtml;
}

How can I create an instance of these classes and call them from another javascript file or how can I use them in HTML? When I try to do ES6 imports/exports or creating new object referring to those classes it gives me this error:

Access to script at 'file:///Users/user/Desktop/project/someName.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

&

app.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

Upvotes: 3

Views: 4781

Answers (2)

&#214;m&#252;rcan Cengiz
&#214;m&#252;rcan Cengiz

Reputation: 2159

So, I figured it out my problem. I wasn't using node.js. I was trying to call the functions from another file and display them in a HTML file. But CORS policy don't let me use them. What I did is, installed Live Server extension on VS Code.

It stars a localhost server and the problem solves. Because what you need is http://. Since when you open a HTML file, it will load the model from file:// and that causes a problem. You can simply start the localhost by open a HTML file and right-click on the editor and click on Open with Live Server.

I used instances like const abc = new Class(); and abc.someMethod();.

Important Notes

Do not forget to add script tags to your HTML and make sure your main script tag is below the others like:

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="./readyFunctions.js"></script> <!-- Functions you will call -->
 <script src="./main.js"></script> <!-- js file where you call functions -->

The other important note is, if you are getting this kind of error even you did what I told, make sure your script tags don't have type= "module".

You can also check this post for other kind of solutions. Hope it helps :)

Upvotes: 2

fullstackmofo
fullstackmofo

Reputation: 66

javascript modules works best if your project was created using npm i.e you are not loading script file at the bottom of your index.html. And if you did load script at the bottom you may have to do something like this 

<script type="module">

       import btn from './helper'

   </script>

Upvotes: 0

Related Questions