ReferenceError: exports is not defined

[proper mural]

I have been trying to implement modules into my project, but it didn't work so I tried it on a smaller scale; where I got the same problem. In my main .html file I do have the type="module" src="main.js" link. Besides the main.ts file I also have a dashboard.ts file in a folder where I simply made a variable called trips and stored a array in it. I exported it like normal and in the main.ts file I imported it. However, when I run this on the browser it gives me the problem that export is not defined with the compiled in main.js. I know that I probably have to do something in the tsconfig.json file, but even when I changed some parts, it still didn't work.

Is there anything I'm missing? Just in case I will show the tscondig.json file:

{
    "compilerOptions": {
        "target": "ES5", //verander naar es2017 
        "experimentalDecorators": true,
        "useDefineForClassFields": false,
        "module": "ESNext", //verander naar ESNext
        "moduleResolution": "Node",
        "moduleDetection": "force",
        "strict": true,
        "sourceMap": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "noEmit": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "skipLibCheck": true,
        "lib": ["ESNext", "DOM"]
    },
    "exclude": ["./node_modules"]
}

[cosmic cipher]

Export not defined sounds like it is not running the file as a module

Can I see the <script> tag?

It does sound correct from what you say. An example project might be needed to see what's going on, or otherwise the HTML, the JS file being imported, and the full error message

[proper mural]

Ofcourse

That is the main page the user will see. When the user goes to the 'dashboard page', I want to load in the array from the other file.

The dashboard page is as like this

The directory is like this. Thought those 3 informations would be helpful.

[cosmic cipher]

Seems OK. What about the error?

[cosmic cipher]

oh your TS is being compiled to CJS

Which is strange when you set ESNext

!:module

[molten phoenix]

sandiford#0

`!sandiford:module`:

"module" in tsconfig today usually refers to your environment rather than the module type you want to use.

If you are using recent versions of Node, use "module": "Node16". This will automatically set "moduleResolution" to the same value, so it's not necessary to set "moduleResolution". To control the module type, in package.json set "type": "module" for ESM or "type": "commonjs" (or don't set "type") for CJS.

For Bun or code that will be bundled before being run, use "module": "preserve".

For Deno use "module": "ES...".

"module": "commonjs" refers to a pure CommonJS environment without new features like import() and is almost never appropriate.

[cosmic cipher]

try following this

!:tsc*

[molten phoenix]

gerrit0#0

`!gerrit0:tsc-files`:

When you provide tsc with a file like tsc index.ts, TypeScript will ignore your tsconfig.file. TypeScript will compile all of your files as specified by the include option (https://www.typescriptlang.org/tsconfig#include) if you don't provide any files on the command line.

[cosmic cipher]

Also make sure you aren't specifying a file when running tsc, as it will ignore your tsconfig

[proper mural]

I will try that now, sorry for the late reply.

I just worked around it and put everything into 1 file

But the project is getting bigger and it's really starting to haunt me with how unclean it looks