0

I've been trying to use ES6 codes to split up my codes so I won't have everything all on my main.js

I've tried to use import/export such as:

 //example1.js
 export var str = 'hello world';

 //main.js
 import exampleStr from './example1';

However, I will get the following error:

Uncaught SyntaxError: Unexpected identifier

From what I had google'd, current web browsers do not support modules and I am using Google Chrome.

I tried to use Babel and Webpack but both of these seem to require everything to be bundled together. Even then, everything was even more confusing.

How would people split up their codes using import/export or do people simply use script tags to import their js files?

I am currently using Atom as well to program javascript/html.

Zulu
  • 81
  • 3
  • 10

1 Answers1

1

For your example to work, you need to do the following, (when importing the name has to be the exact same as what you're exporting):

import {str} from './example1';

If you want to import str by default you need to to the following (when importing you can name it whatever you wish it to be):

 //example1.js
 export default var str = 'hello world';

 //main.js
 import exampleStr from './example1';

If you're only exporting 1 object from your file, I recommend you use default, if you have multiple exports then use example 1.

kemicofa ghost
  • 16,349
  • 8
  • 82
  • 131
  • Hey! Thank you for responding! I appreciate the help! Unfortunately, as I've tried exactly what you have typed, I still end up with an error: **"Uncaught SyntaxError: Unexpected token {"** my main.js is completely blank for testing purposes and it only has what you have typed: import {str} from './example1'; along with the export: export default var str = 'hello world'; – Zulu Sep 02 '18 at 18:19
  • @Zulu show me your webpack/babel config – kemicofa ghost Sep 03 '18 at 08:32