Components: Webpack 1 / rc 8-1 "Uncaught SyntaxError: Unexpected token import"

Created on 4 Sep 2016 · 4Comments · Source: angular/components

[x] BUG (?)

What is the expected behavior?

Material2 should work with webpack1 like angular2 rc6 does.

What is the current behavior?

Error "Uncaught SyntaxError: Unexpected token import"

What are the steps to reproduce?

Any solution with angular2 rc6 / material alpha 8-1; bundles with webpack.

I'm just an amateur, but as far as I see angular2 exports umd modules by default and material should (does?!) aswell. The error comes from every material-component indicating that modules picked up by webpack are in es2015 format ... or am I missing something?

Which versions of Angular, Material, OS, browsers are affected?

angular2 rc6 / material 2 alpha 8-1 / win10 / typescript 2.0 beta

Source

ghost

Most helpful comment

I had the same problem and my solution was this.
Instead of :

import {MdCoreModule} from "@angular2-material/core"
import {RtlModule} from "@angular2-material/core/rtl/dir";
import {OverlayModule} from "@angular2-material/core/overlay/overlay-directives";
...

and other stuff from @angular2-material/core/..

Do this:

import {MdCoreModule,RtlModule, OverlayModule, ...} from '@angular2-material/core';

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "noEmitHelpers": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

mvukic on 4 Sep 2016

👍2

All 4 comments

I had the same problem and my solution was this.
Instead of :

import {MdCoreModule} from "@angular2-material/core"
import {RtlModule} from "@angular2-material/core/rtl/dir";
import {OverlayModule} from "@angular2-material/core/overlay/overlay-directives";
...

and other stuff from @angular2-material/core/..

Do this:

import {MdCoreModule,RtlModule, OverlayModule, ...} from '@angular2-material/core';

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "noEmitHelpers": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

mvukic on 4 Sep 2016

👍2

Actually your solution fixed it :)
And fixing some of my wrong imports

import {MdButtonToggleModule} from '@angular2-material/button-toggle/button-toggle';

import {MdButtonToggleModule} from '@angular2-material/button-toggle';

.. obvious but I totally missed that .. . .. Sorry. It's working now :+1:

ghost on 5 Sep 2016

👍1

Thanks @mvukic ! Your solution fixed my issue also. I was using the example file from https://github.com/jelbourn/material2-app/blob/master/src/app/app.module.ts. The readme example worked ok, but the actual code in the repo did not.