'Getting "Uncaught ReferenceError: x is not defined" How to reference data from a typescript bundled js file from another script?

I'm doing a little testing setup for typescript. My main focus is to bundle all .ts modules into a single .js file that can be client-side referenced in a simple index.html. This is my test module:

// index.ts
import { Example } from './example'

class x {
  example(): void {
    console.log(Example)
  }
}

let test = new x()
test.example()

// example.ts
export const Example : string = 'Example Message'

I compile everything into a bundle.js file using Webpack 5 and ts-loader. Then, I created an .html file to test the created class. There the test.example() inside index.ts (and then bundle.js) executed correctly, but the second one, inside the <script/> reports Uncaught ReferenceError: x is not defined.

<!-- index.html -->
<html>
  <script src="../dist/js/bundle.js"></script>
  <script>
    // Uncaught ReferenceError: x is not defined
    let test = new x()
    test.example()
  </script>
</html>

How can I reference my class x from the second <script/>?

javascripthtmlnode.jstypescriptwebpack


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions