Do I need to configure webpack for ES6?

Question

I have an angular app with a .tsconfig file targeting ES6.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom",
      "es2018.promise"
    ]
  }
}

The following angular component (Typescript):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { DispositifsDATIRoutingModule } from './dispositifsDATI.routes';
import { SharedModule } from '../shared/shared.module';
import { DISPOSITIFS_DATI_COMPONENTS } from './index';

import { InputUtilitiesModule } from 'ng-uikit-pro-standard';
import { MaterialChipsModule, BadgeModule, IconsModule, WavesModule } from 'ng-uikit-pro-standard';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    HttpClientModule,
    DispositifsDATIRoutingModule,
    InputUtilitiesModule,
    MaterialChipsModule,
    BadgeModule,
    IconsModule,
    WavesModule
  ],

  declarations: [DISPOSITIFS_DATI_COMPONENTS]
})

export class DispositifsDATIModule { }

is transpiled by webpack to:

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DispositifsDATIModule", function() { return DispositifsDATIModule; });

Which fails at runtime with:

ReferenceError: Cannot access 'DispositifsDATIModule' before initialization

I have no idea what is going on here.

Is there something to change in the webpack config around the use of ES6?

EDIT: This seems to be an issue in angular and/ or TypeScript regarding ES2015

I was getting this error due to an error in the ts code. When I navigated to the url of the route it gave me a more specific error message. — Andres, Sep 10 '19 at 18:06

Yozi · Answer 1 · 2019-07-05T09:57:19.227

2

I guess you have circular dependencies here, your component file (let's say it is MyComponent.ts) imports DISPOSITIFS_DATI_COMPONENTS from the ./index.ts while index.ts imports the component from the ./MyComponent.ts.

So they depend on each other. In that case, DISPOSITIFS_DATI_COMPONENTS can be not initialized by the time you use it.

I would extract it to a third file in order to avoid circular dependencies

UPD: here is an useful article https://blog.angularindepth.com/how-to-break-a-cyclic-dependency-between-es6-modules-fd8ede198596

edited Jul 05 '19 at 09:57

answered Jul 04 '19 at 09:34

Yozi

11,435
1
22
25

Thanks, but after reviewing our code, this is nota a circular reference issue. Question has been updated. – Jul 05 '19 at 12:43
The links you added are about circular dependencies. They say "we got circular dependencies here but it should not be so". Even so, the only way to get your error is a circular dependency. And importing something from "./index" is like evidence. – Yozi Jul 06 '19 at 13:30

score 2 · Accepted Answer · 2019-09-10T18:40:26.950

All right, this error was caused because I was referencing a module that was using TypeScript decorators. I removed the decorators in favor of the equivalent API and the problem is gone.

EDIT 04/09/2019:

Just to be clear, I was using Angular 7.5 which requires emitDecoratorMetadata to be set to true. I just learned that my external module requires experimentalDecorators not emitDecoratorMetadata.

So, upgrading to angular 8 and setting emitDecoratorMetadata to false, allows me to use this external library.

Do I need to configure webpack for ES6?

2 Answers2

Linked