R.js build fails with external resources defined in the "paths" config property

[dchekanov]

main.js:

require.config({
    paths: {
        bootstrapCss: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min'
    },
    map: {
        '*': {
            'css': '../../css'
        }
    }
});

require(['css!bootstrapCss'], function() {});

build.js:

({
    name: 'main',
    out: 'main-optimized.js',
    mainConfigFile: 'main.js'
})

P:\require-css\test\2>node ../../node_modules/requirejs/bin/r.js -o build.js

Tracing dependencies for: main
Error: ENOENT: no such file or directory, open 'P:\require-css\test\2\https:\maxcdn.bootstrapcdn.com\bootstrap\3.3.6\css\bootstrap.min.css'
In module tree:
    main
      ../../css

This happens because css-builder.js checks if the module name is an absolute URL but not if the final file URL is.

I'll make a PR to fix this shortly.

[narol1024]

so how to solve this error?

[dchekanov]

@linjinying, until my PR is merged or another fix is implemented, you can try replacing css-builder.js file with this one: https://raw.githubusercontent.com/dchekanov/require-css/bug-207/css-builder.js to fix the issue.

[narol1024]

@dchekanov ok,thanks~

[ffflabs]

Taken from RequireJS API

Also, only use absolute module IDs for map config. Relative IDs (like '../some/thing') do not work

This means that you should declare a path definition beforehand:

require.config({
    paths: {
        bootstrapCss: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min',
        requireCssPath: '../../'
    },
    map: {
        '*': {
            'css': 'requireCssPath/css'
        }
    }
});

[dchekanov]

Thanks for the tip, @amenadiel. "../../css" mapping was actually working for me while testing, but maybe it would break in actual application.

I copied require-css files to the same folder where main.js is, removed map directive altogether, and the issue was still there. So some fixing is still required.

[xqxian]

@dchekanov Thank you for your css-builder.js file, it works fine on Windows but seems to have some issues on Linux? I ran a build with it on CentOS 7, but no css was included in js files. Everything is the same, but on Windows it just works fine, css was included in js files after optimization. Can you have a look at it? Thanks again for your work!

update:
Now I know exactly where's the problem:  the 'fileUrl' values on Linux are starting with '/', which will match the absUrlRegEx, so they will be treated as external resources and won't be included in js files. However, 'fileUrl' values on Windows are starting with drive letter (eg, 'C:'), they don't match the absUrlRegEx, so won't be treated as external resources.

[dchekanov]

@xqxian Good catch, thanks. I replaced the previously used regex with a simple check if path includes "://" sub-string. Please give it a try. https://raw.githubusercontent.com/dchekanov/require-css/bug-207/css-builder.js

[xqxian]

@dchekanov I'm very sorry for the late reply, I've been busy with my project these days... Actually I replaced the 'absUrlRegEx' value with

/^((ht|f)tps?)://[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/+#]*[\w-@?^=%&/+#])?$/ (RegExp for urls)

after I've found the problem, and it works properly. I also tested the file you gave me above and it works fine too. Thank you for your work again!