Linking Multiple .JS files together

Hi all,

I’ve been playing around with a few .js files, creating functions, arrays, objects and classes. The test script I have has become pretty messy so I’m trying to split it out into other scripts and relate it all back to one space. I know you can use import / export to relate individual files, but i’m having no luck getting this to work.

The error I’m getting is: SyntaxError: Cannot use import statement outside a module

I’m still new to this all, I just got code happy over the weekend and wrote up a lot!

Any help or advice is much appretiated.

Thanks!

What JavaScript environment are you working in? (either Node or a web browser w/HTML and CSS)

My guess would be you’re working with HTML and CSS and you need to include type='module'

It’s not allowing me to edit the post lol. That would go in the script tag of your HTML file

If that’s not where your issue is coming from, you’ll probably need to include some snippets of your code, from the primary JS file and one from which you are trying to import.

Hey! Thanks for the response, I’m using node (I believe). just two basic /js files.

I’ve created a main.js and a test.js, just to make it as simple as possible so I can figure out the problem. The idea would be to export from test, and import into main.

Test:

const url = ‘https://test.url’;
export {url};

Main:

import { url } from “./Test”;
console.log(url)

Full Error:
PS C:.…\JavaScript> node main.js
(node:19652) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
C:..\JavaScript\main.js:1
import { url } from “./Test”;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1055:15)
at Module._compile (node:internal/modules/cjs/loader:1090:27)
at Object.Module._extensions…js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47

Hopefully, that’s all clear!

1 Like

Yup, that clears it up!

There are a couple of different flavors of syntax for importing and exporting files in JavaScript, and which one you use depends on the environment you’re working in. You’re using web importing syntax instead of Node importing syntax (I’m pretty sure there are ways to work around this, but Node won’t interpret the web syntax by default)


For Node, the exporting syntax uses module.exports, like so:

module.exports = url;

and the corresponding import syntax is:

const url = require('./Test');

If you wanted to export multiple things from the same file, it’s slightly different:

module.exports = {
  url,
  filePath
};

To import url only:

const { url } = require('./Test');

To import both variables:

const { url, pathName } = require('./Test');

Codecademy has two articles from Learn Intermediate JavaScript that you may find helpful:

Implementing Modules in Node | Learn Intermediate JavaScript
Implementing Modules in ES6 | Learn Intermediate JavaScript

This is the official Node documentation on modules: Modules | Node Documentation

And this is the Node documentation on web module syntax – it looks like under the “Enabling” heading, there are some instructions on how to use this syntax in Node and make it work: ECMAScript Modules | Node Documentation

Whether you choose to convert to Node imports or configure your project to read the web imports is up to you, either should be valid!

1 Like

Hey, okay so that sort of worked - it’s now bringing up a new error.

C:.…\Coding> node main.js
node:internal/modules/cjs/loader:959
throw err;
^

Error: Cannot find module ‘C:.…\Coding\main.js’
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
at Function.Module._load (node:internal/modules/cjs/loader:804:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: ‘MODULE_NOT_FOUND’,
requireStack:
}

I had a little scan online but couldn’t find anything direct.

Also, thanks for the links! I think if I can get all of this working smoothly I’ll move onto the intermediate java stuff! (exciting stuff)

Cool what are you making?

Ah, at the moment I’m just playing around and learning the strings. Eventually I want to start creating little games and apps as a bit of a hobby :slight_smile:
The current setup has numerous equations to work out different bits and pieces, but the number of functions and objects has become unwieldy, so I’m trying to space them out in specific documents but have them pointed to one destination

me to :grinning: which programming language is your favorite?

I made a dino game like the offline google chrome one it took forever but it was fun to play I wish I could make more complex games but that comes with time I know.

1 Like

do you want me to send you the link??

Ah I’m still learning them! Javascript is quite fun though. I need to learn more python for my job too! What about yourself?

Bravo on the game btw! I’m sure it’ll definitely get much easier as you go. You’ll pick up all the tricks and shortcuts! :smiley: Do you have a blog or show your stuff anywhere?

Well it isn’t the best website the login part is kinda still confusing me but here it is BowserJrPlayz.com | HTML/CSS/JS Workspace | Codecademy

a little old lol because I don’t play minecraft as much as i did then need to edit it and i don’t play roblox anymore

In your previous post it looks like you were running node main.js in the directory C:.…\JavaScript> but in this more recent post you’re running it in C:.…\Coding>. Did you change the file that main.js is in or are you maybe running the command in the wrong directory?

Basically, the error you got indicates that there is no file main.js in the directory in which you are running the node command.

Right! I finally had a chance to sit down and play around with it. It took me a bit, but I figured out what was going wrong my end.
In one of the connected files i already had a console.log() running to test something out, so when I joined it to my main.js script, & output the console.log and then did what I wanted it to do.
Anyways, I went back through the info that you sent me - now making my way through the intermediate stuff, and it’s all coming together ha!
Thanks so much for the help!
Have a great day!

1 Like

i,m a beginner pleas don,t laugh at me