12

I have a commonjs 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)

Improve this question
10
  • MDN says it should be. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 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? Commented Mar 14, 2019 at 16:52
  • Your countUp code seems not to check whether exports exists before attempting the CommonJS export. 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.com/inorganik/countUp.js/blob/master/dist/countUp.js Commented Mar 14, 2019 at 16:54
  • Line 13: Object.definePropert(exports, ...) — if exports is not defined, that's an exception. Commented Mar 14, 2019 at 16:55

3 Answers 3

Reset to default
3

Short Answer: No

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

If you would like to use commonjs 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 compiled 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>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So the answer to the OP's question is simply: NO.
I think your answer is no. Maybe you could reword it. Because the entire purpose of the question is to use commonjs. I can't change how it's exported.
It's worth clearing up (what seems to be) the OP's mixing-up terminology. OP title asks "Is it possible to es6 import a commonjs module?", to which the answer is: Depends on where the import is done. If it's in Node.js, then yes, it's possible, but if it's in the browser (which is what the OP refer to in the question body), then no, as you elaborate.
Imagine cjs=>esm rollup api import { generate } from 'astring'; export class DurableObjectExample {constructor(el, env){ this.el = el; this.env = env; this.el.blockConcurrencyWhile(async()=> { let stored = await this.el.storage.get("esm"); watcher.on("event", (event) => { const ast = event.result.cache.modules.ast; const esm = generate(ast); this.el.storage.put("esm", JSON.stringify(esm)) });});}}; Like a programatic global namespace in an opinionated, read-only self v8 engine webworker, or a durable object!
Why are people up-voting this answer if it does not answer the question? The question is obviously/directly/clearly asking if that is possible. If you need to change the commonjs code, that's not an answer anymore.
0

Yes by using esm like this:

  1. Install esm like
npm i -save esm
  1. Run the app like
node -r esm filename.js

You can use import in cjs

Improve this answer

Comments

-2

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.