I have a monjs module, which was generated by Typescript 3.3.3.

Is it possible to use it with an es6 import statement? Here's what I have tried.

The generated module exports CountUp like this at the end of the file:

exports.CountUp = CountUp;

In my main.js:

import { CountUp } from './js/countUp.js';

And in index.html:

  <script src="./js/countUp.js"></script>
  <script src="./main.js" type="module"></script>

But I get

countUp.js:13 Uncaught ReferenceError: exports is not defined at countUp.js:13

(Note: countUp.js is now distributed as an es6 module)

I have a monjs module, which was generated by Typescript 3.3.3.

Is it possible to use it with an es6 import statement? Here's what I have tried.

The generated module exports CountUp like this at the end of the file:

exports.CountUp = CountUp;

In my main.js:

import { CountUp } from './js/countUp.js';

And in index.html:

  <script src="./js/countUp.js"></script>
  <script src="./main.js" type="module"></script>

But I get

countUp.js:13 Uncaught ReferenceError: exports is not defined at countUp.js:13

(Note: countUp.js is now distributed as an es6 module)

• javascript
• typescript
• es6-modules

• MDN says it should be. developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Get Off My Lawn Commented Mar 14, 2019 at 16:50
• I also think you want it to generate the file like one of these export class CountUp {} or export function CoutUp(){} What does you tsconfig.json look like? – Get Off My Lawn Commented Mar 14, 2019 at 16:52
• Your countUp code seems not to check whether exports exists before attempting the CommonJS export. – Pointy Commented Mar 14, 2019 at 16:52
• @Pointy it does all that, I didn't include the whole file. You can see it here: github./inorganik/countUp.js/blob/master/dist/countUp.js – inorganik Commented Mar 14, 2019 at 16:54
• Line 13: Object.definePropert(exports, ...) — if exports is not defined, that's an exception. – Pointy Commented Mar 14, 2019 at 16:55

3 Answers 3

Short Answer: No

When using es6, you need to export using export and not exports. exports is a monjs feature primarily used within node and not a web browser.

If you would like to use monjs you need to use a third party library like requirejs, but this uses require() and not import, and exports and not export. You will then be able to write your code using import/export with typescript but it will be piled using require and requirejs will handle the rest.

So, to use it in the browser properly, you would do it like so:

test.js

export function Test() {
  console.log('hello')
}

index.js

import { Test } from './test.js'
Test()

Then when you load the file in your html, the function test will execute.

<script src="index.js" type="module"></script>

Yes by using esm like this:

1. Install esm like

npm i -save esm

2. Run the app like

node -r esm filename.js

You can use import in cjs

Actually you can use module.exports and import. It works with webpack, so does it with vs code