In a JavaScript ES6-module, there may be many, small, easy-to-test functions that should be tested, but shouldn&#39;t be exported. How do I test functions in a module without exporting them? (without using [Rewire][1]).

  [1]: https://github.com/jhnns/rewire#limitations





How can I unit test non-exported functions?

As far as I understand it, if I create an ES6 module, I can only import it from code that is itself a module. This means non-module code, i.e. inline Javascript, or the Chrome dev tools console can never access code that is in a module.

Is that true? Is there any way around this because it seems like a fairly extreme limitation.

How to use ES6 modules from dev tools console

I am trying to determine if there are any big differences between these two, other than being able to import with `export default` by just doing:

    import myItem from &#39;myItem&#39;;

And using `export const` I can do:

    import { myItem } from &#39;myItem&#39;;

Are there any differences and/or use cases other than this?


`export const` vs. `export default` in ES6

I&#39;ve been looking all over the Internet without a clear answer for this.

Currently Node.js uses only [CommonJS][1] syntax to load modules, and if you really want to use the standard ECMAScript 2015 modules syntax, you either have to transpile it beforehand or use an external module loader at runtime.

Currently I&#39;m not too positive to use either of those two methods, are the Node.js maintainers even planning to support ECMAScript 2015 modules or not? I haven&#39;t found an hint at all about this.

At the moment Node.js 6.x claims to support 96% of the ECMAScript 2015 features, but there isn&#39;t any reference to modules ([Node.js ECMAScript 2015 support link][2]).

Do you know if Node.js will support these modules out of the box, in the near future?

  [1]: https://en.wikipedia.org/wiki/CommonJS
  [2]: http://node.green/





Node.js plans to support import/export ES6 (ECMAScript 2015) modules

I&#39;ve tried searching the internet for the execution order of imported modules. For instance, let&#39;s say I have the following code:

    import &quot;one&quot;
    import &quot;two&quot;
    console.log(&quot;three&quot;);

Where `one.js` and `two.js` are defined as follows:

    // one.js
    console.log(&quot;one&quot;);
    
    // two.js
    console.log(&quot;two&quot;);

Is the console output guaranteed to be:

    one
    two
    three

Or is it undefined?

What is the defined execution order of ES6 imports?

After looking at the documentation for the import/no-named-as-default eslint rule, I&#39;m still confused about what exactly I&#39;m doing wrong.

I have the following file structure

    .
    ├── ButtonBack.css
    ├── ButtonBack.jsx
    ├── __tests__
    │   └── ButtonBack.test.jsx
    └── index.js

The ButtonBack.jsx contains the following code

    import React from &#39;react&#39;;
    import PropTypes from &#39;prop-types&#39;;
    
    export default class ButtonBack extends React.Component {
      ... code removed to keep example short ...
    }

\__tests__/ButtonBack.test.jsx contains the following code

    import React from &#39;react&#39;;
    import { shallow } from &#39;enzyme&#39;;
    import ButtonBack from &#39;../ButtonBack&#39;; // &lt;== this line has an eslint warning

    ... code removed to keep example short ...

The problem is, my linter says that ```import ButtonBack from &#39;../ButtonBack``` violates the following lint rules:

 - [import/no-named-as-default][1]
 - [import/no-named-as-default-member][2]

    
I can&#39;t figure out why my import statement violates the lint rule.  Removing the name of the class in ButtonBack.jsx (```export default class extends React.Component```) does not solve the issue either.  


  [1]: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md
  [2]: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md

How do I resolve eslint import/no-named-as-default

ES6 modules allows us to create a single point of entry like so:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // main.js

    import foo from &#39;foo&#39;;

    foo()

&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;scripts/main.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;

&lt;!-- end snippet --&gt;


**foo.js** will be stored in the browser cache. This is desirable until I push a new version of **foo.js** to production. 

It is common practice to add a query string param with a unique id to force the browser to fetch a new version of a js file (**foo.js?cb=1234**)

How can this be achieved using the es6 module pattern?

How do I cache bust imported modules in es6?

From https://2ality.com/2019/04/nodejs-esm-impl.html Node 12 should support es6 modules; however, I just keep getting the error:


Question: How do I make a MVP of using es6 modules in node 12?



**package.json**
```
{
  &quot;name&quot;: &quot;dynamic-es6-mod&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;src/index.mjs&quot;,
  &quot;scripts&quot;: {
    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
    &quot;start&quot;: &quot;node src/index.mjs&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;globby&quot;: &quot;^10.0.1&quot;
  }
}
```

```
$ node -v
$ 12.6.0
$ npm run start


internal/modules/cjs/loader.js:821
  throw new ERR_REQUIRE_ESM(filename);
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/dev/dynamic-es6-mod/src/index.mjs
    at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)
    at internal/main/run_main_module.js:17:11
```


Error [ERR_REQUIRE_ESM]: How to use es6 modules in node 12?

I&#39;m not familiar with ECMAScript 6 yet. I&#39;ve just cloned the React Starter Kit repo, which uses ES6 for application code. I was surprised to see that the linter is [configured][1] to forbid occurences of the `use strict` directive, which I thought was recommended in pre-ES6 JavaScript. So what&#39;s the point?


  [1]: https://github.com/kriasoft/react-starter-kit/blob/master/.eslintrc

Not recommended to use &quot;use strict&quot; in ES6?

I use the flag `--experimental-modules` when running my Node application in order to use ES6 modules.

However when I use this flag the metavariable `__dirname` is not available. Is there an alternative way to get the same string that is stored in `__dirname` that is compatible with this mode?

Alternative for __dirname in Node.js when using ES6 modules

Let&#39;s say I have a variable that I want to export. What&#39;s the difference between

    export const a = 1;

vs

    export let a = 1;

I understand the difference between `const` and `let`, but when you export them, what are the differences?

Javascript ES6 export const vs export let

Is it possible to pass options to ES6 imports?

How do you translate this:

    var x = require(&#39;module&#39;)(someoptions);

to  ES6?

Pass options to ES6 module imports

Using ES6 modules, I know I can alias a named import:

    import { foo as bar } from &#39;my-module&#39;;

And I know I can import a default import:

    import defaultMember from &#39;my-module&#39;;

I&#39;d like to alias a default import and I had thought the following would work:

    import defaultMember as alias from &#39;my-module&#39;;

But that results in a parsing (syntax) error.

How can I (or can I?) alias a default import?





How can I alias a default import in JavaScript?

I came across a javascript library that uses the following syntax to import libraries:

    import React, { Component, PropTypes } from &#39;react&#39;;

What is the difference between the above method and the following?

    import React, Component, PropTypes from &#39;react&#39;;

using brackets with javascript import syntax

These are my sample files:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;script src=&quot;t1.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
    &lt;/html&gt;


t1.js:

    import Test from &#39;t2.js&#39;;

t2.js:

    export const Test = console.log(&quot;Hello world&quot;);

When I load the page in Firefox 46, it returns &quot;SyntaxError: import declarations may only appear at top level of a module&quot; - but I&#39;m not sure how much more top-level the import statement can get here. Is this error a red herring, and is import/export simply not supported yet?

ES2015 import doesn&#39;t work (even at top-level) in Firefox

In ES6, is it possible to shorten the following code. I have an `App.js` file and an `index.js`.

**index.js**

    import App from &#39;./App&#39;;

    export default App;

Something like this

**index.js**

    export default App from &#39;./App.js&#39;

Re-export default in ES 6 modules

Does the code inside the js file gets run during the import? if yes, then once or each time?
e.g.

    // a.js
    console.log(&quot;A&quot;);
    const a = &quot;a&quot;; 
    export default a;

    // b.js
    import a from &quot;./a&quot;; // =&gt; console logs?

    // c.js
    import a from &quot;./a&quot;; // =&gt; console logs again?

Does ES6 module importing execute the code inside the imported file?

I&#39;m trying to get the hang of ES6 imports in Node.js and am trying to use the syntax provided in this example:

### [Cheatsheet Link][1]

I&#39;m looking through [the support table][2], but I was not able to find what version supports the new import statements (I tried looking for the text import/require). I&#39;m currently running Node.js 8.1.2 and also believe that since the cheatsheet is referring to .js files it should work with .js files.

As I run the code (taken from the cheatsheet&#39;s first example):

    import { square, diag } from &#39;lib&#39;;

I get the error:

&gt; SyntaxError: Unexpected token import.

Reference to library I&#39;m trying to import:

    //------ lib.js ------
    export const sqrt = Math.sqrt;
    export function square(x) {
        return x * x;
    }
    export function diag(x, y) {
        return sqrt(square(x) + square(y));
    }

What am I missing and how can I get `node` to recognize my `import` statement?

  [1]: https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f
  [2]: http://node.green/





How can I use an ES6 import in Node.js?

I want to use `import fs from &#39;fs&#39;` in JavaScript. Here is a sample:

    import fs from &#39;fs&#39;

    var output = fs.readFileSync(&#39;someData.txt&#39;)

    console.log(output)

The error I get when I run my file using `node main.js` is:

    (function (exports, require, module, __filename, __dirname) { import fs from &#39;fs
    &#39;
                                                                  ^^^^^^
    SyntaxError: Unexpected token import

What should I install in Node.js in order to achieve importing modules and functions from other places?



Using import fs from &#39;fs&#39;

I have some TypeScript files:

*MyClass.ts*

    class MyClass {
      constructor() {
      }
    }
    export = MyClass;

*MyFunc.ts*

    function fn() { return 0; }
    export = fn;

*MyConsumer.ts*

    import * as MC from &#39;./MyClass&#39;;
    import * as fn from &#39;./MyFunc&#39;;
    fn();

This gives me errors when trying to use `new`

&gt; Module &quot;MyClass&quot; resolves to a non-module entity and cannot be imported using this construct.

and when trying to call `fn()`

&gt; Cannot invoke an expression whose type lacks a call signature.

What gives?

What does &quot;... resolves to a non-module entity and cannot be imported using this construct&quot; mean?

I prefer using the `import x from &#39;y&#39;` syntax, but all I&#39;ve seen online is `const path = require(&#39;path&#39;)`.

Is there a way to import the path module using this syntax?

Can you import node&#39;s path module using import path from &#39;path&#39;

I&#39;m new to **ES6** (ECMAScript 6), and I&#39;d like to use its **module system** in the browser. I read ES6 is supported by Firefox and Chrome, but I&#39;m getting the following error using `export`

`Uncaught SyntaxError: Unexpected token import`


I have a test.html file

    &lt;html&gt;
    	&lt;script src=&quot;test.js&quot;&gt;&lt;/script&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;

and a test.js file

    &#39;use strict&#39;;

    class Test {
    	
    	static hello() {
    		console.log(&quot;hello world&quot;);
    	} 
    }
    
    export Test;	

Why?	

ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

Can I destructure a default export object on import?  

Given the following export syntax (`export default`)

    const foo = ...
    function bar() { ... }

    export default { foo, bar };

is the following import syntax valid JS?

    import { foo, bar } from &#39;./export-file&#39;;

I ask because it DOES work on my system, but I&#39;ve been told it should NOT work according to the spec.  

Destructuring a default export object

I am using node v6.0.0 and wanted to use ES2016 (ES6). However I realized that the &quot;import&quot; syntax is not working. Isn&#39;t &quot;import&quot; fundamental to for writing modular code in ES2015? I tried running node with `--harmony_modules` option as well but still got the same error about &quot;import&quot;. Here&#39;s the code.

Working code without &quot;import&quot;:

    &#39;use strict&#39;;
    let sum = 0;
    class Number {
    
      addNumber(num1, num2) {
        return num1 + num2;
      }
    }
    let numberObj = new Number();
    sum = numberObj.addNumber(1,2);
    console.log(&quot;sum of two number 1 and 2 &quot;+ sum);

Notworking code with &quot;import&quot;:

server.js

    &#39;use strict&#39;;
    import Number from &quot;./Number&quot;;
    
    let sum = 0;
    
    
    let numberObj = new Number();
    
    sum = numberObj.addNumber(1,2);
    console.log(&quot;sum of two number 1 and 2 &quot;+ sum);

Number.js

    &#39;use strict&#39;;
    export default class Number {
    
      addNumber(num1, num2) {
        return num1 + num2;
      }
    }

I also checked http://node.green/ to see the supported es6 however not able to understand why it doesn&#39;t work with --harmony_modules option. Please help.






ES2015 &quot;import&quot; not working in node v6.0.0 with with --harmony_modules option

We&#39;re trying to use the new ways of exporting and importing modules for ES6 with Node.js. It&#39;s important for us to get the version number from the `package.json` file. The following code should do that:
```js
import {name, version} from &#39;../../package.json&#39;
```
However, on execution the following error is thrown:                       
    
    TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension &quot;.json&quot; for T:\ICP\package.json imported from T:\ICP\src\controllers\about.js

Is there something we&#39;re missing?  
Is the extension `.json` not supported?  
Is there another way to retrieve this information using Node.js 13+?

Import &#39;.json&#39; extension in ES6 Node.js throws an error

I was under the impression that this syntax:

    import Router from &#39;react-router&#39;;
    var {Link} = Router;

has the same final result as this:

    import {Link} from &#39;react-router&#39;;

Can someone explain what the difference is?

(I originally thought it was a [React Router Bug][1].)


  [1]: https://github.com/rackt/react-router/issues/2468

ES6 Destructuring and Module imports

Is it possible to import javascript module from external url in ES6?

I tried (using babel-node):

    import mymodule from &#39;http://...mysite.../myscript.js&#39;;
    // Error: Cannot find module &#39;http://...mysite.../myscript.js&#39;

ES6: import module from URL

I&#39;ve been experimenting with new [native ECMAScript module support](https://jakearchibald.com/2017/es-modules-in-browsers/) that has recently been added to browsers. It&#39;s pleasant to finally be able import scripts directly and cleanly from JavaScript.

#### [&amp;nbsp;&amp;nbsp;&amp;nbsp; **&lt;code&gt;&amp;nbsp;/example.html &#128269;&amp;nbsp;&lt;/code&gt;** &amp;nbsp;&amp;nbsp;&amp;nbsp;](https://795258201.glitch.me/example.html)

&lt;!-- language: lang-html --&gt;

    &lt;script type=&quot;module&quot;&gt;
      import {example} from &#39;/example.js&#39;;

      example();
    &lt;/script&gt;

#### [&amp;nbsp;&amp;nbsp;&amp;nbsp; **&lt;code&gt;&amp;nbsp;/example.js&amp;nbsp;&lt;/code&gt;** &amp;nbsp;&amp;nbsp;&amp;nbsp;](https://795258201.glitch.me/example.js)

&lt;!-- language: lang-js --&gt;

    export function example() {
      document.body.appendChild(document.createTextNode(&quot;hello&quot;));
    };

However, this only allows me to import modules that are defined by separate **external** JavaScript files. I usually prefer to inline some scripts used for the initial rendering, so their requests don&#39;t block the rest of the page. With a traditional informally-structured library, that might look like this:

#### [&amp;nbsp;&amp;nbsp;&amp;nbsp; **&lt;code&gt;&amp;nbsp;/inline-traditional.html &#128269;&amp;nbsp;&lt;/code&gt;** &amp;nbsp;&amp;nbsp;&amp;nbsp;](https://795258201.glitch.me/inline-traditional.html)

&lt;!-- language: lang-html --&gt;

    &lt;body&gt;
    &lt;script&gt;
      var example = {};

      example.example = function() {
        document.body.appendChild(document.createTextNode(&quot;hello&quot;));
      };
    &lt;/script&gt;
    &lt;script&gt;
      example.example();
    &lt;/script&gt;

However, naively inlining modules files obviously won&#39;t work, since it would remove the filename used to identify the module to other modules. HTTP/2 server push may be the canonical way to handle this situation, but it&#39;s still not an option in all environments.

Is it possible to perform an equivalent transformation with ECMAScript modules?

Is there any way for a `&lt;script type=&quot;module&quot;&gt;` to import a module exported by another in the same document?

---

I imagine this could work by allowing the script to specify a file path, and behave as though it had already been downloaded or pushed from the path.

#### [&amp;nbsp;&amp;nbsp;&amp;nbsp; **&lt;code&gt;&amp;nbsp;/inline-name.html &#128269;&amp;nbsp;&lt;/code&gt;** &amp;nbsp;&amp;nbsp;&amp;nbsp;](https://795258201.glitch.me/inline-name.html)

&lt;!-- language: lang-html --&gt;

    &lt;script type=&quot;module&quot; name=&quot;/example.js&quot;&gt;
      export function example() {
        document.body.appendChild(document.createTextNode(&quot;hello&quot;));
      };
    &lt;/script&gt;

    &lt;script type=&quot;module&quot;&gt;
      import {example} from &#39;/example.js&#39;;

      example();
    &lt;/script&gt;

Or maybe by an entirely different reference scheme, such as is used for local SVG references:

#### [&amp;nbsp;&amp;nbsp;&amp;nbsp; **&lt;code&gt;&amp;nbsp;/inline-id.html &#128269;&amp;nbsp;&lt;/code&gt;** &amp;nbsp;&amp;nbsp;&amp;nbsp;](https://795258201.glitch.me/inline-id.html)

&lt;!-- language: lang-html --&gt;

    &lt;script type=&quot;module&quot; id=&quot;example&quot;&gt;
      export function example() {
        document.body.appendChild(document.createTextNode(&quot;hello&quot;));
      };
    &lt;/script&gt;
    &lt;script type=&quot;module&quot;&gt;
      import {example} from &#39;#example&#39;;

      example();
    &lt;/script&gt;

But neither of these hypotheticals actually work, and I haven&#39;t seen an alternative which does.




Inlining ECMAScript Modules in HTML

For a personal project, I&#39;m trying to use ES6 import to write cleaner code. As first test, I&#39;m writing an object that should generate a menu. The whole code is working when I&#39;m directly loading up the class, yet when using the import and export in ES6, it gives an &quot;Uncaught SyntaxError: Unexpected identifier&quot; error on the `import` line in `main.js`

I&#39;ve got the following files:

**assets/js/menu.module.js**

    &#39;use strict&#39;;

    export default class Menu
    { ... }

**assets/js/main.js**

    import Menu from &quot;./menu.module.js&quot;;

    window.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
        const menu = new Menu();
    });

**index.html**

    &lt;script type=&quot;module&quot; src=&quot;assets/js/menu.module.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/js/main.js&quot;&gt;

Note that these are only the relevant lines of code.

Using the `&lt;script type=&quot;module&quot;&gt;` line or not did not seem to make any difference for me. I do have both the chrome flags for experimental and ES6 Modules enabled, as without them I received an error about `import` not being defined.

Chrome version would be 62, so according to different sources (including google&#39;s update log itself) this should be working, even without the flags.

Can anyone enlighten me as of why this is not working, and what I am doing wrong?

ES6 module Import giving &quot;Uncaught SyntaxError: Unexpected identifier&quot;

With Rollup I can output an ES module by simply setting the `format` option to `&#39;es&#39;`. How can I do the same with webpack? If it&#39;s not possible now, does webpack have any plans to add it?

The only thing I&#39;ve found in the [documentation for `output.libraryTarget`](https://webpack.js.org/configuration/output/#output-librarytarget) that mentions ES modules is this:

&gt; `libraryTarget: &quot;commonjs-module&quot;` - Expose it using the `module.exports` object (`output.library` is ignored), `__esModule` is defined (it&#39;s threaded as ES2015 Module in interop mode)

However, it&#39;s rather unclear to me. Is it the same as `libraryTarget: &quot;commonjs2&quot;` with the only difference that `__esModule` is defined? What is &quot;interop mode&quot;?

Output an ES module using webpack

I have referred all the questions in stackoverflow. 
But none of the suggested why and when to use default export.

I just saw that default can be metioned  &quot;When there is only one export in a file&quot;

Any other reason for using default export in es6 modules?

Why and when to use default export over named exports in es6 Modules?

I am testing ES6 Modules and want to let the user access some imported functions using `onclick`:

test.html:

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    	&lt;meta charset=&quot;utf-8&quot;&gt;
    	&lt;title&gt;Module Test&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    	&lt;input type=&quot;button&quot; value=&quot;click me&quot; onclick=&quot;hello();&quot;/&gt;
    	&lt;script type=&quot;module&quot;&gt;import {hello} from &quot;./test.js&quot;;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

test.js:

    export function hello() {console.log(&quot;hello&quot;);}

When I click the button, the developer console says: *ReferenceError: hello is  not defined*. How can I import functions from modules so that they are available as onclick functions?

I am using Firefox 54.0 with `dom.moduleScripts.enabled` set to `true`.

ES6 Modules: Undefined onclick function after import

Just wondering which one is the best way to use import:

`import * as Foo from &#39;./foo&#39;;`

VS:

`import { bar, bar2, bar3 } from &#39;./foo&#39;;`

In terms of efficiency, say for example, I&#39;m using webpack for bundling all the JavaScript files. Will the first one actually importing everything even though I&#39;m not using them in the main code?

Some references that I can find are:

In [Airbnb style guide][1], they are recommending no wildcard so there will always be default import object, and [this][2].


  [1]: https://github.com/airbnb/javascript#modules--no-wildcard
  [2]: https://www.exratione.com/2015/12/es6-use-of-import-property-from-module-is-not-a-great-plan/

Wildcard or asterisk (*) vs named or selective import es6 javascript

I am not clearly understanding why the `nomodule` attribute exists in the new browsers that support ES6 modules.

In HTML 5, the `type` attribute is optional and [defaults to `text/javascript`][2]:

&gt; The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is &quot;text/javascript&quot;.


  [1]: http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1
  [2]: http://dev.w3.org/html5/spec/Overview.html#script


It doesn&#39;t default to `&lt;script type=&quot;module&quot; src=&quot;module.js&quot;&gt;&lt;/script&gt;`. Has this default changed? If not, why would `nomodule` be necessary? Can I just use `&lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;` without `nomodule`?

What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?

I just started to learn React today.
How do I get rid of that error message on my Console in the Terminal in Visual Studio. 
```
(node: 9374)Warning: To load an ES module,
 set &quot;type&quot;: &quot;module&quot; in the package.json or use the .mjs extension. 
/Users/nishihaider/workspace-ui/react-todo-app/src/App.js:1
```
```
import React from &quot;react&quot;;
import &quot;./App.css&quot;;

function App() {
  &lt;&gt;
  return (
  &lt;h1&gt;ToDo&lt;/h1&gt;
  );
  &lt;/&gt;
}

export default App;
```

(node:9374) Warning: To load an ES module, set &quot;type&quot;: &quot;module&quot;

With ES6, I can import several exports from a file like this:

    import {ThingA, ThingB, ThingC} from &#39;lib/things&#39;;

However, I like the organization of having one module per file. I end up with imports like this:

    import ThingA from &#39;lib/things/ThingA&#39;;
    import ThingB from &#39;lib/things/ThingB&#39;;
    import ThingC from &#39;lib/things/ThingC&#39;;

I would love to be able to do this:

    import {ThingA, ThingB, ThingC} from &#39;lib/things/*&#39;;

or something similar, with the understood convention that each file contains one default export, and each module is named the same as its file.

Is this possible?

Is it possible to import modules from all files in a directory, using a wildcard?

I have two classes in two separate files and one extends from another. The base class contains some `import` statements using node modules. It is unclear to me why the derived class (which is in a separate file) does not recognize the base class!!!???

Can someone clarify this please?

    // UtilBase.ts

    /// &lt;reference path=&quot;../typings/node.d.ts&quot; /&gt;
    /// &lt;reference path=&quot;../typings/packages.d.ts&quot; /&gt;

    import * as path from &quot;path&quot;; // &lt;---- THIS LINE BREAKS THE BUILD!!!!

    namespace My.utils {

        export class UtilBase {

            protected fixPath(value: string): string {
                return value.replace(&#39;/&#39;, path.sep);
            }
       }
    }

And then

    // UtilOne.ts
    /// &lt;reference path=&quot;UtilBase.ts&quot; /&gt;

    namespace My.utils {

        export class UtilOne extends My.utils.UtilBase {

        }
    }

After compiling I get:

    src/UtilOne.ts(6,47): error TS2339: Property &#39;UtilBase&#39; does not 
    exist on type &#39;typeof utils&#39;

All Es6 Modules Solutions on Gang of Coders

Total of 37 Es6 Modules Solutions