Skip to content

Globalize with webpack #593

@KlavdiiaKoval

Description

@KlavdiiaKoval

We are trying to create a wrapping library around Globalize modules.
But we can't really get it to work with webpack.
The problem is that we can't use runtime Globalize due to compiler limitations (rxaviers/globalize-webpack-plugin#20). And since globalize plugin is not suitable for us we can't use app-npm-webpack example project as a reference.

We get the following compilation errors:

ERROR in ./src/i18n.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./node_modules/globalize/dist/globalize.js in d:\git\sensei-i18n\src
 @ ./src/i18n.js 38:16-36

ERROR in ./~/cldr-data/Gruntfile.js
Module not found: Error: Cannot resolve module 'matchdep' in d:\git\sensei-i18n\node_modules\cldr-data
 @ ./~/cldr-data/Gruntfile.js 42:2-21

If we configure webpack to exclude node modules, we get "require is undefined" error in the html.

Could you please help us to figure out the correct way to resolve all the dependencies in webpack config?

i18n.js

var Globalize = require( "globalize" );
Globalize.load( require( "cldr-data" ).entireSupplemental() );

module.exports.num = function ( ) {
    Globalize.locale('en');
    var formatter = Globalize.numberFormatter({style: 'percent'});
    return formatter(99);
};

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo</title>
</head>

<body>
    <script src="builds/i18n.js"></script>
    <p id="demo"></p>
    <script>document.getElementById("demo").innerHTML = i18n.num();</script>
</body>

webpack.config.js

/*eslint-env node*/
var webpack = require( "webpack" );
var path = require('path');
var node_dir = __dirname + '/node_modules';

var config = {
    entry: {
        main: './src/i18n.js'
    },
    output: {
        path: 'builds',
        filename: 'i18n.js',
        library: "i18n"
    },
    resolve: {
        extensions: [ "", ".js" ],
        alias: {
            cldr: './node_modules/cldrjs/dist/cldr.js',
            globalize: './node_modules/globalize/dist/globalize.js'
        }
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ["es2015", "stage-2"]
            }
        }]
    }
};

module.exports = config;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions