TypeError: __WEBPACK_IMPORTED_MODULE_4_decimal_js__ is not a constructor

[limpep]

Hi,

getting the following error,

TypeError: __WEBPACK_IMPORTED_MODULE_4_decimal_js__ is not a constructor

I have installed,

npm install decimal.js --save
npm install --save @types/decimal.js

here is what I have done to get this error

import * as Decimal from 'decimal.js';
let amount = new Decimal(0.00);

using,

@angular/cli: 1.2.0
node: 8.1.2
os: darwin x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5

with "typescript": "~2.3.4"

[jblankenhorn]

Same here

[josdejong]

I had something similar, had to change an import require('decimal.js') to require('decimal.js/decimal.js') to get a bundle with decimal.js working in the browser. In my case require('decimal.js') returned {default: Decimal} instead of Decimal.

Have you tried the following?

import { Decimal } from 'decimal.js';

[eloyleonardo]

Same problem here
Using @josdejong tip it give me the error: Module ''decimal.js'' has no exported member 'Decimal'.

[MikeMcl]

// test.ts
import * as Decimal from 'decimal.js';
let amount = new Decimal(0.00);
console.log(amount.toFixed(2));

Use npm init to create a test project and then install dependencies

> npm install -g typescript
> npm install decimal.js --save
> npm install --save @types/decimal.js

Compile and execute

> tsc test.ts
> node test.js
0.00

(typescript v2.4.1, node v8.1.3)

It works fine for me.
How are you using webpack and typescript exactly?

#49 is related to this issue.

I also think the typings need updating as discussed at this stackoverflow question regarding bignumber.js (related issue).

decimal.js typings

[eloyleonardo]

I'm using angular-cli (it uses webpack do run)
I already include the .js in the index file (unsing angular cli way), and import as you did.
Any ideas ?
I will try to create a plunkr to reproduce the error

[MikeMcl]

@eloyleonardo

I have no experience of using Angular CLI.

Does the code work if you change

let amount = new Decimal(0.00);

to

let amount = new Decimal.Decimal(0.00);

[eloyleonardo]

my-app.zip
it doesn't work. If i put in this way the compiler give me an error.

I create a simple example of the problem (the zip attached).
Sorry for the dummy, but i don't know how to make a plunkr using all of this.

i use the angular-cli, create a new project, install the dependencies, change the constructor to log the decimal, add the decimal.js/decimal.js as dependency in .angular-cli.json and try to use the decimal.js.

to test is just unzip an run:

npm install -g @angular/cli
ng serve

Thank you @MikeMcl for your help

Edit: Forgot the attachement

Edit2: If you change the app.component.ts and remove the import this example works. Looks like the import its all done by the configurations of the angular-cli (src/tsconfig.app.json and .angular-cli.json). One note, the type is decimal.Decimal and to access the constructor you shold use new Decimal(10.21).
Sory for the trouble and hope it help the others with the same problem.

[jblankenhorn]

Hello together,

i tried to follow your instructions, but couldn't get it working in angular-cli v.1.1.1

[eloyleonardo]

@jblankenhorn
try to run this example . It works here. it just print on console a decimal and format one in the header decimal with a pipe.

to run

npm i
ng serve

I'm using angular-cli 1.2

[jblankenhorn]

@eloyleonardo i am not sure if this is the preferred way ... as far as I See, you are loading the decimal.js as a global script here ... and not via an import statement ...

[ColinBradley]

I have a similar issue to this. Everything works fine in a node environment where decimal.js (the file) is loaded. The problem is that webpack loads decimal.es6.js (the file) and that has a different export format (it uses default). Note that webpack picks up on the "module": "decimal.es6.js" property on the package.json for decimal.js and node does not.

With that kind of export, webpack appears to think that everything will import it a specific way too (accounting for defaults).

If you are using node style imports (require('decimal.js')) and not ES6 style imports (import Decimal from 'decimal.js') then you are going to have a bad time as decimal.js + webpack are now incompatible with commonjs style modules (that require decimal.js).. I think? It's nothing to do with TypeScript or Angular. decimal.js can't do much about this as an ES6+ module export can't directly be the thing you want to use anymore - it has to be named (or be default).

There will be something you can do with webpack to use the non ES6 version of decimal.js (I'm not overly familiar with webpack to suggest anything). Otherwise, you will have to update all your imports to be ES6 style too. Or just do as @josdejong said and change your require to be require('decimal.js/decimal.js') ;)

[akana]

same problem. any workaround will be appreciated

[MikeMcl]

Hopefully, this issue is fixed in v7.2.4.
Please let me know.

[rferrerasm]

I have code like this:

import * as decimal from 'decimal.js';
this.roundingMode = decimal.ROUND_HALF_EVEN;

It works with 7.1.2 and still fails with 7.2.4.

It's an Angular CLI app (WebPack vesion 3.4.1). ng build gives this warning:

15:28-51 "export 'ROUND_HALF_EVEN' (imported as 'decimal') was not found in 'foo.js'
    at HarmonyImportSpecifierDependency._getErrors (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15)
    at HarmonyImportSpecifierDependency.getWarnings (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\Compilation.js:677:24)
    at Compilation.finish (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\Compilation.js:535:9)
    at applyPluginsParallel.err (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\Compiler.js:512:17)
    at C:\Dev\sources\brainbond\ngclient\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\Compilation.js:481:11)
    at processModuleDependencies.err (C:\Dev\sources\brainbond\ngclient\node_modules\webpack\lib\Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

And at runtime I get:

TypeError: __WEBPACK_IMPORTED_MODULE_0_decimal_js__ is not a function

[MikeMcl]

@rferrerasm

Following Colin Bradley's comment above, does your code work if "module": "decimal.es6.js", is removed from the decimal.js package.json?

[rferrerasm]

Yes, removing that line works. The compile and runtime messages disappear.

[MikeMcl]

@rferrerasm

Okay, thanks.

And using

import Decimal from 'decimal.js';

works fine also does it, even with the "module": "decimal.es6.js" present?

Also, you could try adding the following to your webpack options object

resolve: {
  mainFields: ["main", "module"]
}

[rferrerasm]

Using import Decimal from 'decimal.js'; works with and without "module": "decimal.es6.js".

However, there is something I don't understand (I'm a Java programmer, new to JS...).

When creating a variable I have to change decimal(value) to Decimal(value), which seems logical given the new import.

But when declaring a variable type I have to use decimal.Decimal, just Decimal gives a "Cannot find name 'Decimal'." error. How does decimal.Decimal work if I'm not importing any decimal?

I'm using Angular CLI, I don't know if there is a way of configuring webpack as it's managed internally by the tool.

[MikeMcl]

@rferrerasm

The decimal.Decimal is from decimal.js typings.

[MOZGIII]

I have _decimal2.default.plus is not a function, and I think it's related. Using this package with CRA.

[dagumak]

I'm also unable to get this to work with webpack, any ideas?

[MOZGIII]

Create and use your own decimal.js:

// @flow
import toFormat from "toformat";
const RawDecimal = require("decimal.js/decimal.js");
export const Decimal = toFormat(RawDecimal);
export default Decimal;

Usage:

import Decimal from "./decimal.js"
const x = new Decimal(1);

Worked for me.

[qhxin]

i use this way to fix:
import Decimal from 'decimal.js/decimal';

[MikeMcl]

A TypeScript delaration file is now included in this repository.

The typings at DefinitelyTyped are outdated, so npm install --save @types/decimal.js should no longer be used.

[vudduu]

be careful using:
import Decimal from 'decimal.js/decimal';
If you are using webpack and you have no full support to use .mjs extensions, you will have problems resolving something like this:
extensions: [ '.mjs', '.js', '.json', '.jsx'] because It will load decimal.js/decimal.mjs instead of decimal.js/decimal.js