Search code examples
requirejscldr

require.js + cldrjs Why renaming a config paths entry break it?

Summary

The rename below (s/cldr/cldrjs) breaks load functionality.

require.config({ paths: { - cldr: "./bower_components/cldrjs/dist/cldr" + cldrjs: "./bower_components/cldrjs/dist/cldr" } });

require([ - "cldr", - "cldr/supplemental" + "cldrjs", + "cldrjs/supplemental" ], function( Cldr ) { console.log( "Cldr instance", new Cldr( "en" ) ); }, function() {

Setup

Install libraries.

bower install cldrjs requirejs

You should get:

cldrjs /tmp/cldrjs ├── cldrjs#0.3.2 extraneous └── requirejs#2.1.11 extraneous

Usage

Open index.html (available at https://gist.github.com/rxaviers/10194312). Require.js should load Cldr, and your console should log an instance of it, eg:

Cldr instance Object { attributes={...}, locale="en", supplemental=function(), more...}

Question

Why does the rename break it?

To make it easier for you, I've placed both main files (available at https://gist.github.com/rxaviers/10194312). Simply change the reference to test it.

--- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> - <script data-main="main.cldr.js" src="bower_components/requirejs/require.js"></script> + <script data-main="main.cldrjs.js" src="bower_components/requirejs/require.js"></script>

</body> </html>

Apendix

Piece of info worth knowing...

Header of cldr.js: (available at https://gist.github.com/rxaviers/10194312)

define(function() { // implementation... Yeap, no dependencies. })

Header of cldr/supplemental.js: (available at https://gist.github.com/rxaviers/10194312)

define(["../cldr"], function() { // implementation... Dependency is the above cldr.js file. })

Solution

  • https://github.com/jrburke/requirejs/issues/1084#issuecomment-40112805

    I have chatted with @jrburke on IRC and he pointed out that

    `../cldr’ is resolved relative to ‘supplemental’ as an ID first, which ends up with a ‘cldr’ in the ID, then that is converted to a path but since that path already was used for a module called ‘cldrjs’ that is a problem, does not find a ‘cldr’ module in it more in a bit after i set up the project but i think the end result is that you will want to use either a map or packages config

    Solution:

    the general rule of thumb is: if the package only contains one JS module then paths config is good enough. If it contains multiple modules (as in this case) package config is usually a better fit unless the package manager knows about front end modules

    Thanks @jrburke