Mixing ES Next with typescript project

Help Requests
1

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 ?

Thanks

1 Like
2

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

3

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
4

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?

5

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

3 Likes
6

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
7

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

1 Like
8

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

ol.Feature
ol.geom.Point
ol.proj.fromLonLat
ol.style.Style
ol.source.Vector
ol.layer.Vector
ol.proj.transform
ol.proj.Projection
ol.extent.getCenter
ol.layer.Image
ol.source.ImageStatic

Mainly had no luck getting some of the functions imported.