0

starting-page.ts

export function startingPage () {...rest of function}

main.ts

import { startingPage } from "./starting-page";

startingPage();

index.html

<script src="/dist/main.js" type="text/javascript"></script>

Error:

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

Description

I suppose it does not work because in JS files it should be module.exports = startingPage; as it is in my previous vanilla JS projects and it works just fine, however it is TS project and I have no idea how to make it work. edit: obviosuly, I am then importing it as const startingPage = requrie('...')

7
  • What are you using to compile the typescript? Commented Jan 9, 2021 at 20:46
  • I am running tsc command, although I might have found a solution to my problem but I certainly need a confirmation on that one. On the other project I am using a Parcel for project build, is it possible that my problem here is that, I am using a node-side 'require' on the page-side script, without using webpack (which I think Parcel involves)? EDIT: I also removed module: 'commonjs' from ts.config as I am targeting es6, not es5 as by default Commented Jan 9, 2021 at 20:50
  • I am really new to all of these so I apologize if I am making it more difficult to understand Commented Jan 9, 2021 at 20:51
  • Parcel used Babel not webpack Commented Jan 9, 2021 at 20:54
  • You need type="module" added to your <script> tag Commented Jan 9, 2021 at 20:56

1 Answer 1

2

Solution to my problem was installing a Parcel - application bundler.

As I mentioned I used it in my vanilla JS projects, so I tried it also now, and it is working just fine. It was more of a JS syntax error than TS project build problem.

Sign up to request clarification or add additional context in comments.

1 Comment

Glad you found a solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.