Mixing ES Next with typescript project

I have a project in typescript / Webpack that is working fine. I am now trying to create a component
that uses openlayers 5 and unfortunately the types for that library are broken at this point and there
is little documentation so I decided just to use ESNext for that component.

However, I am getting the error

Module parse failed: Unexpected character ‘@’ (40:0)
You may need an appropriate loader to handle this file type.

@inject( …

Do I need todo something to the webpack config to allow ESNext js ?


1 Like

Can you help paste a bit more info about the error?

Sure. I have added a basic skeleton component.

import { Aurelia, inject } from 'aurelia-framework';
import { Shimmy } from 'shimmy';
import { User } from 'user';
import { App } from 'app';

@inject(App, Shimmy, User)
export class ShimmyMap {

  constructor(app, shimmy, user) {
    this.app = app;
    this.shimmy = shimmy;
    this.user = user;

The file is named shimmy_map.js

I have added babel stuff to package.json and installed
I have also added

{ test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
        options: coverage ? { sourceMap: 'inline', plugins: [ 'istanbul' ] } : {},

to webpack.config.js

When compiling I get the full error of.

ERROR in ./src/shimmy_map.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (7:0)

   5 | 
   6 | 
>  7 | @inject(App, Shimmy, User)
     | ^
   8 | export class ShimmyMap {
   9 | 
  10 |   constructor(app, shimmy, user) {

I have not used ESNext before so may be doing something silly.

1 Like

I see. I think it has something todo with your babel webpack configuration. It seems the required plugins/presets necessary for babel to understand the decorators are not there? Can you try search in that direction?

For bare minium, you need .babelrc file like this:

  "plugins": [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }]
  "presets": [
    ["@babel/preset-env", {"loose": true}]

Plus npm i -D @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties


i’m still on openlayers 4.x because of their typing issues. i think the upcoming version is supposed to have most of the issues worked out and should be out soon.

1 Like

Finally got it going also had to add
import ‘babel-polyfill’; to main

1 Like

Yeah. I thought I would try js as I couldn’t even get 4.x working

I had quite a simple task that used the following


Mainly had no luck getting some of the functions imported.