Module parse failed: Invalid number

Question

I'm trying to make a Renko chart With the canvasJs library like this. But when I add these codes.

  data:[Object] = [{
    dataPoints: [
      {x: new Date(2012,10,10),y:[5198, 5629, 5159, 5385]},
      {x: new Date(2012,20,10),y:[5366, 5499, 5135, 5295]},
      {x: new Date(2012,30,10),y:[5296, 5378, 5154, 5248]},
      {x: new Date(2012,40,10),y:[5254, 5279, 4788, 5124]},
      {x: new Date(2012,50,10),y:[4910, 5286, 4770, 5278]},
      {x: new Date(2012,60,10),y:[5283, 5348, 5032, 5229]},
      {x: new Date(2012,70,10),y:[5220, 5448, 5164, 5258]},
      {x: new Date(2012,08,10),y:[5276, 5735, 5215, 5703]},
      {x: new Date(2012,09,10),y:[5704, 5815, 4888, 5619]},
      {x: new Date(2012,10,10),y:[5609, 5885, 5548, 5879]},
      {x: new Date(2012,11,10),y:[5878, 5965, 5823, 5905]},
      {x: new Date(2013,10,10),y:[5937, 6111, 5935, 6034]},
      {x: new Date(2013,10,10),y:[6040, 6052, 5671, 5693]},
      {x: new Date(2013,20,10),y:[5702, 5971, 5604, 5682]},
      {x: new Date(2013,30,10),y:[5697, 5962, 5477, 5930]},
      {x: new Date(2013,40,10),y:[5911, 6229, 5910, 5985]},
      {x: new Date(2013,50,10),y:[5997, 6011, 5566, 5842]},
      {x: new Date(2013,60,10),y:[5834, 6093, 5675, 5742]},
      {x: new Date(2013,70,10),y:[5776, 5808, 5118, 5471]},
      {x: new Date(2013,08,10),y:[5480, 6142, 5318, 5735]},
      {x: new Date(2013,09,10),y:[5756, 6309, 5700, 6299]},
      {x: new Date(2013,10,10),y:[6289, 6342, 5972, 6176]},
      {x: new Date(2013,11,10),y:[6171, 6415, 6129, 6304]}
    ]
  }];

I'm getting the 'Module parse failed: Invalid number' error:

Error: ./src/app/pages/stockdetails/stockdetails.component.ts 24:40
Module parse failed: Invalid number (24:40)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|                     { x: new Date(2012, 60, 10), y: [5283, 5348, 5032, 5229] },
|                     { x: new Date(2012, 70, 10), y: [5220, 5448, 5164, 5258] },
>                     { x: new Date(2012, 08, 10), y: [5276, 5735, 5215, 5703] },
|                     { x: new Date(2012, 09, 10), y: [5704, 5815, 4888, 5619] },
|                     { x: new Date(2012, 10, 10), y: [5609, 5885, 5548, 5879] },

This is my tsconfig.json file.

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

I tried many answers to other questions but nothing works. my angular version is 11.2.6 and my node version is 14.16.0

score 3 · Accepted Answer · answered Apr 10 '21 at 09:51

3

You cant use values like '08' and '09'.

you have to replace new Date(2012,08,10) by new Date(2012,8,10)

Just delete 0 before.

answered Apr 10 '21 at 09:51

Piva Gregory

442
2
13

score 1 · Answer 2 · answered Apr 14 '21 at 06:43

JavaScript engines interpret leading zeroes as octal numbers - if they are valid, else it's considered as decimal number. You can either remove leading zero new Date(2012,8,10) or pass date in ISO format new Date("2012-08-10"). Checkout this stackoverflow thread for more info.

Module parse failed: Invalid number

2 Answers2