Skip to content
← Back to Community
[JS] ES6 Import/Export Syntax Not Working
Profile icon
Zavexeon

Does repl.it support Javascript ES6's import/export syntax? For example, I'll have this line: import module from './module.js', but it'll give me a Syntax error. import { module } from './module.js' doesn't seem to work either. I've gotten this to work on other sites, so how come it doesn't work on repl.it?

Answered by Vandesm14 [earned 5 cycles]
View Answer
Voters
Profile icon
MarcellPerger1
Profile icon
victor_villacis
Profile icon
TheDNAHero
Profile icon
SAMSIL
Profile icon
liuman2
Profile icon
dudeactualdev
Profile icon
novachief101
Profile icon
GentryDemchak
Profile icon
gurkirpal
Profile icon
geewey
Comments
hotnewtop
Profile icon
Vandesm14

ES6 Imports do not work on repl.it

Profile icon
Zavexeon

@Vandesm14 Hmm... that's unfortunate. It's a really nice feature from ES6.

Profile icon
pegasusroe

Actually, you CAN import ES modules from other replit files, but you have to somehow figure out what its real URL is before using it.
Here is my demo.

Profile icon
aramirez2

@pegasusroe I don't know how to figure out the url :C

Profile icon
pegasusroe

@aramirez2 You have to use the HTML template first (JavaScript template won't work, it'll use Node.js require function). Secondly, put a <A> tag in the index.html file, (for example <a id="a" href="#hello">link</a>), then type console.log(a.href) into script.js file and run. Then you'll see the real url in the console.

Profile icon
amasad

It's mostly so that repl.it is not "magical." Basically anything that you write on the site should work locally. Once we start precompiling your code then we're making it a bit too magical. However, If that's something that's important we can make it work.

Profile icon
Zavexeon

@amasad It would be greatly appreciated. I've used import/export several times on my laptop's built-in text editor and it's worked perfectly fine. It's a very useful feature of ES6 if you want your code to be modular.

I know node.js has a method of importing other files, but personally I prefer plain JS.

Profile icon
GentryDemchak

@amasad what percentage of browsers need to support a feature to consider it no longer "magical"? https://caniuse.com/#search=es6%20module%20import

Profile icon
amasad

@GentryDemchak we run on node.js. which I think this will be supported with mjs in the next release. You can use browser JavaScript using our html environment.

Profile icon
AdCharity

yeah idk if arrow functions even work it threw an error too

Profile icon
Zavexeon

@AdCharity They do for me. I made an example.

const multiply = (x, y) => { return x * y; } console.log(multiply(5, 4));
Profile icon
AdCharity

@Zavexeon ohh thanks maybe I was refering to promises? idk I like "normal" functions i guess

Profile icon
Zavexeon

@AdCharity I'll usually use normal functions too, unless I'm creating a callback in a function call.

Profile icon
WilliamPenrod

You have to import stuff using the package import tool (the cube on the far left side of any js repl). After that you can use the package as you normally would minus the import statement.

Profile icon
Zavexeon

@WilliamPenrod I'm not trying to use externally hosted packages.

Thanks for the reply, though. :)

Profile icon
WilliamPenrod

@Zavexeon Ah, sorry. :)