Using globalize with webpack 2 and typescript

Question

I am trying to use the Globalize library with webpack 2 in a TypeScript project. The typescript/Webpack 2 setup already works, however, when importing and accessing Globalize, I am getting the following error message when running webpack:

ERROR in ./.tmp-globalize-webpack/C--Projects-webpack2-testing-app-index.ts
(1,1): error TS2304: Cannot find name 'module'.

ERROR in ./app/index.ts
(2,23): error TS7016: Could not find a declaration file for module 'globalize'. 'C:\Projects\webpack2-testing\node_modules\globalize\dist\node-main.js' implicitly has an 'any' type.

So I tried installing the globalize types:

npm install --save-dev @types/globalize

Now I get the following error:

ERROR in ./.tmp-globalize-webpack/C--Projects-webpack2-testing-app-index.ts
(1,1): error TS2304: Cannot find name 'module'.

ERROR in ./app/index.ts
(2,23): error TS2306: File 'C:/Projects/webpack2-testing/node_modules/@types/globalize/index.d.ts' is not a module.

Unfotunately this is all very new to me. Don't know if I should check webpack or typings or globalize or typescript...

This is my package.json:

{
"name": "webpack2-testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack-config.js"
  },
  "devDependencies": {
    "cldr-data": "^30.0.4",
    "globalize": "^1.2.2",
    "globalize-webpack-plugin": "^0.3.10",
    "html-webpack-plugin": "^2.28.0",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.6",
    "webpack": "^2.2.1"
  }
}

and the index.ts:

import Globalize from "globalize";

function component () {
  let element = document.createElement('div');

  let currencyFormatter = Globalize.currencyFormatter( "USD" );
  element.innerHTML = currencyFormatter( 69900 );
  return element;
}

document.body.appendChild(component());

The complete project files (including webpack-config) are available at this github repository.

Note: This question arose while trying to solve a question I asked previously. If this works, it could also resolve my previous question.

1. index.ts is not a module, refer to: https://www.typescriptlang.org/docs/handbook/modules.html and 2. If you are manipulating the DOM you probably should do it inside of a DOMContentLoaded event listener https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded — redconservatory, Feb 16 '17 at 04:12

Alen Liang · Answer 1 · 2017-02-27T11:18:44.493

I did the following steps to use globalize.js in typescript project.

1. Install the library

npm install globalize
npm install @types/globalize

2. Create a file to export module (globalize.d.ts)

/// <reference types='globalize' />

/* tslint:disable */

declare namespace globalize { }
declare module 'globalize' {
    export default Globalize;
}

3. Use in my main file

import globalize from 'globalize';

// Formatter creation.
var formatter = globalize.numberFormatter();

// Formatter execution (roughly 10x faster than above).
formatter( Math.PI );

However, I never success download the cldr lib, so my browser has errors like:

./src/client/index.tsx
(5,23): error TS2306: File '/Users/alen/Workspace/Qunhe/core/node_modules/@types/globalize/index.d.ts' is not a module.
./~/globalize/dist/globalize.js
Module not found: Error: Cannot resolve module 'cldr' in /Users/alen/Workspace/Qunhe/core/node_modules/globalize/dist
@ ./~/globalize/dist/globalize.js 22:2-25:14
./~/globalize/dist/globalize.js

I'm not sure it's the globalize.js issue or cldr.js issue, still trying. Sorry I made the early reply other than solve your question.

Edit:

To solve the error above, I use the webpack plugin to help me pack data, and install the cldr-data. and it did works.

Add globalize-webpack-plugin https://github.com/rxaviers/globalize-webpack-plugin

and use in webpack.config.js as demo illustrate here. https://github.com/globalizejs/globalize/tree/master/examples/app-npm-webpack

Install the cldr-data library, because this issue https://github.com/globalizejs/globalize/issues/548

I have to install using

npm install globalize cldr-data

And back in browser, every thing works well.

I did this: npm install --save-dev @types/globalize (see question above). Do I have to skip the save-dev? — Dominic, Feb 24 '17 at 07:30
You should using npm install --save instead of --save-dev, because you'll using these lib in production anyway. You can refer here http://stackoverflow.com/questions/22891211/what-is-difference-between-save-and-save-dev — Alen Liang, Feb 27 '17 at 11:21
Thank you for the detailed explanation! The application now compiles with webpack, however I am getting "Uncaught TypeError: Cannot read property 'currencyFormatter' of undefined" in the browser. Are you using webpack 2 or webpack 1? Do you maybe have your working project somehwere on github so I could compare? — Dominic, Mar 02 '17 at 14:23
@AlenLiang have you write that demo program you said you'll write on github ? — adkstar, Feb 01 '18 at 06:58

score 2 · Answer 2 · answered Jul 18 '17 at 14:15

I finally got it to work:

In your globalize.d.ts file:

 declare module 'globalize' {
     export = Globalize;
 }

In your webpack config:

plugins: [
    new webpack.ProvidePlugin({
        Globalize: "globalize"
    })
]

And finally, when you import globalize in all your .ts files:
```
import * as Globalize from 'globalize';
```

Using globalize with webpack 2 and typescript

2 Answers2