Questions tagged [es6-module-loader]

ES6 Module Loader Polyfill dynamically loads ES6 modules in browsers and NodeJS with support for loading existing and custom module formats through loader hooks.

Dynamically loads ES6 modules in browsers and NodeJS with support for loading existing and custom module formats through loader hooks.

This project implements dynamic module loading through System exactly to the previous ES6-specified loader API at 2014-08-24 ES6 Specification Draft Rev 27, Section 15. The specification for the module loader was removed from the ES6/ES2015 specification in 2014, and a new loader implementing the new draft WhatWG loader spec is pending alpha release on the 1.0 branch.

For an overview of build workflows, see the production guide.

For an example of a universal module loader based on this polyfill for loading AMD, CommonJS and globals, see SystemJS.

Documentation

294 questions
298
votes
23 answers

Importing lodash into angular2 + typescript application

I am having a hard time trying to get the lodash modules imported. I've setup my project using npm+gulp, and keep hitting the same wall. I've tried the regular lodash, but also lodash-es. The lodash npm package: (has an index.js file in the package…
Davy
  • 6,295
  • 5
  • 27
  • 38
196
votes
14 answers

"You may need an appropriate loader to handle this file type" with Webpack and Babel

I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message: You may need an appropriate loader to handle this file type. | import React from 'react'; | /* | import { render } from 'react-dom' Here is…
egidra
  • 8,537
  • 19
  • 62
  • 89
102
votes
12 answers

Path aliases for imports in WebStorm

I use webpack path aliases for ES6 module loading. E.g. If I define an alias for utils instead of something like import Foo from "../../../utils/foo", I can do import Foo from "utils/foo" The problem is that once I start using aliases, WebStorm…
Bogdan D
  • 5,321
  • 2
  • 31
  • 32
102
votes
6 answers

ES6: import module from URL

Is it possible to import javascript module from external url in ES6? I tried (using babel-node): import mymodule from 'http://...mysite.../myscript.js'; // Error: Cannot find module 'http://...mysite.../myscript.js'
madox2
  • 49,493
  • 17
  • 99
  • 99
62
votes
3 answers

Module.exports and es6 Import

React with babel. I have this confusion with imports and module.exports. I assume babel when converting the ES6 code to ES5 converts the imports and exports to require and module.exports respectively. If I export a function from one module and…
Nani
  • 731
  • 1
  • 6
  • 6
61
votes
2 answers

What is the defined execution order of ES6 imports?

I've tried searching the internet for the execution order of imported modules. For instance, let's say I have the following code: import "one" import "two" console.log("three"); Where one.js and two.js are defined as follows: //…
Max
  • 15,157
  • 17
  • 82
  • 127
60
votes
7 answers

How to fix this ES6 module circular dependency?

EDIT: for more background, also see the discussion on ES Discuss. I have three modules A, B, and C. A and B import the default export from module C, and module C imports the default from both A and B. However, module C does not depend on the values…
trusktr
  • 44,284
  • 53
  • 191
  • 263
49
votes
5 answers

How to import everything exported from a file with ES2015 syntax? Is there a wildcard?

With ES2015 syntax, we have the new import syntax, and I've been trying to figure out how to import everything exported from one file into another, without having it wrapped in an object, ie. available as if they were defined in the same file. So,…
mikl
  • 23,749
  • 20
  • 68
  • 89
47
votes
5 answers

Which browsers support import and export syntax for ECMAScript 6?

I am currently writing a web application using the MEAN Stack, and am attempting to write code in ECMAScript 6 JavaScript; however, I am getting errors in both Chrome and Firefox when using import and export syntax. Are there currently any browsers…
42
votes
5 answers

How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

I am using vue-loader to construct my *.vue single-file components, but I am having trouble with the process of extending a single-file component from another. If one component follows the spec to export default { [component "Foo" definition] }, I…
Rhys
  • 1,581
  • 2
  • 14
  • 22
34
votes
2 answers

How to correctly use ES6 "export default" with CommonJS "require"?

I've been working through Webpack tutorial. In one of the sections, it gives the code example that contains one line of essence to this question: export default class Button { /* class code here */ } In the next section of said tutorial, titled…
mr.b
  • 4,932
  • 11
  • 38
  • 55
34
votes
6 answers

Can I use an ES6/2015 module import to set a reference in 'global' scope?

I have this situation where I am trying to import an existing library, which I'll call troublesome (using Webpack/Babel FWIW) and it has a global reference to jQuery in it which i am trying to resolve using module syntax. I have successfully…
tony_k
  • 1,983
  • 2
  • 20
  • 27
28
votes
5 answers

Node.js + TypeScript: Unclear syntax with type script compiled code

I'm trying to work with TypeScript in my node project, but I have some issues with that. This is my index.ts file: import express from 'express'; const app = express(); I'm running: tsc --module commonsjs -d index.ts My output is index.js: var…
Shikloshi
  • 3,761
  • 7
  • 32
  • 58
27
votes
2 answers

How to import "old" ES5 code in ES6

I have an ES6 application (with Babel 6.5 and Webpack) and it successfully imports my modules like this: import $ from 'jquery'; I wanted to install https://github.com/robflaherty/riveted/blob/master/riveted.js (a plugin for Google Analytics), but…
grssnbchr
  • 2,877
  • 7
  • 37
  • 71
23
votes
7 answers

Can you deconstruct lazily loaded React components?

Using es6 imports, you can do this: import { MyComponent } from "../path/to/components.js"; export default function () { return ; } Can I do it with React.lazy too? const { MyComponent } = lazy(() =>…
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
1
2 3
19 20