Webpack and TSX files

[T00mm]

I am trying to get the ts-webpack example work with tiled but when loading the TSX file I get the following error

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,1)
      TS1109: Expression expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,2)
      TS1109: Expression expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,7)
      TS1005: ':' expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,21)
      TS1005: ';' expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,38)
      TS1109: Expression expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(35,1)
      TS1005: ':' expected.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,3)
      TS2304: Cannot find name 'xml'.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,7)
      TS2304: Cannot find name 'version'.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(1,21)
      TS2304: Cannot find name 'encoding'.

ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx
[tsl] ERROR in C:\Users\Tom\example-ts-webpack\src\images\tmw_desert_spacing.tsx(2,1)
      TS17004: Cannot use JSX unless the '--jsx' flag is provided.

I am not familiar with the TSX extension (Tiled map and something JSX like?) but should I exclude the images folder from webpack or? I am using the following code to add the Tiled map to my LevelOne

import TiledResource from '@excaliburjs/excalibur-tiled'

export class LevelOne extends ex.Scene {

  public onInitialize(engine: ex.Engine) {

    var map = new TiledResource("../../images/mainMap.json");
    var tm = map.getTileMap();
    this.add(tm);

[T00mm]

After trying out a lot of stuff I've made it to the point that he complains about my image

[Error] : Error loading texture assets/tmw_desert_spacing.png DOMException: "Index or size is negative or greater than the allowed amount"

Any idea what I am doing wrong? The image in the network inspector is just showing fine.

---

Edit: This error happens on Firefox 62.0.3 but in Chrome 69.0.3497.100 it works fine

[ttay24]

I encountered a similar problem and fixed it by excluding my maps in my tsconfig.json

In my case, webpack was thinking that my tiled files were react components

[kamranayub]

Ah yes, the test: /\.tsx?$/ module rule would detect that. The workaround would be to use a different extension (tmx?) or use the exclude regex to exclude your map folder as @ttay24 suggested. File extensions wouldn't matter to webpack so you could choose anything.