after (correct) building, optimized.js wants to load less.js about require-css

[rangermeier]

I'm facing a similar problem. My optimized project tries to load css.js. I created a repo with a sample project: https://github.com/rangermeier/require-css-example

All JavaScript and CSS should be packaged to optimized/main.js. When opening optimized/index-optimized.html the inlined CSS is correctly injected but require still attempts to load optimized/css.js (which fails) and optimized/example/example.css (which works but is superfluous because all styles are already injected)

[polarity]

I think the problem "could be" a ordinary path problem. but i still not solved the problem. i analyzed the build a bit:

the css-builder writes some new modules into the build, like this (when separateCSS== true):

define('less!widgets/mywidget',[],function(){});

then, theres the module that requires it:

define('widgets/mywidget/module',['less!../errorhandler.less'],function() {
     // my code
});

requirejs now looks for the required (css/less block) module. when its not loaded (or found because of a wrong path/id) he tries to load it from a url. So at first it tries to load/look for for the less! plugin, which is not present.

About changing paths and config the whole day, im on the way to create a grunt task to clean the build from all less! require strings and fake modules.

[guybedford]

@polarity has got this correct. The css and less modules are used in production for injection, normalization and also for dynamic loads in production . There may be a way to exclude these so that the injection is independent of the modules, but it still depends on how requirejs/r.js#412 works out.

So yes the issue is that it is looking for css, not finding it and then trying to dynamically load it.

The reason this breaks in your case is because the configuration is being injected AFTER the CSS in the layer. So that RequireJS doesn't know where to find css.

One fix I can do for this is to use the ID "require-css/css!" in the plugin that is built into the layer so it can work without the configuration injection. But it would still need to know the paths configuration, which would break this approach.

So I think this is a problem of configuration injection - you need to ensure you get it built in higher up. If you manually move the configuration in the built main.js to just below RequireJS, it will work fine. I would follow this up as an r.js issue - configuration is an area I think is having quite a bit of work in the next release, so good to get these points in now.

[guybedford]

Ok I managed to sort this out by changing main.js to look like:

require(["config"], function() {
  require(["example/example"]);
});

config.js:

  require.config({
    baseUrl: ".",
    paths: {
        "require-css": "lib/require-css"
    },
    map: {
        "*": {
            "css": "require-css/css"
        }
    }
});

And then build.js referencing mainConfigFile at config.js.

[polarity]

after looking further, seems my build lacks the css module completely. it´s just not there, neither with a wrong id

[guybedford]

Now that is odd. Can you send a copy of your build log output?

[polarity]

you mean this one?

Running "requirejs:compile" (requirejs) task
Verifying property requirejs.compile exists in config...OK
File: [no files]
importing /development/can/_pre/less/bootstrap/bootstrap.less
importing /development/can/_pre/less/bootstrap/responsive-utilities.less
importing /development/can/_pre/less/vertical-rhytm.less
importing /development/can/_pre/less/dezem-bootstrap-theme.less
importing /development/can/_pre/less/header.less
importing /development/can/_pre/less/menu.less
importing /development/can/_pre/less/main_leftright.less
importing /development/can/_pre/less/tables.less
importing /development/can/_pre/less/main_right_step_container.less
importing /development/can/_pre/less/main_right_step_overview_container.less
importing /development/can/_pre/less/main_right_step_choose_container.less
importing /development/can/_pre/less/main_right_step_finish_container.less
importing /development/can/_pre/less/main_right_step_print_container.less
importing /development/can/_pre/less/main_right_step_user_access.less
importing /development/can/_pre/less/tree.less
importing /development/can/_pre/less/print.less
importing /development/can/_pre/less/bootstrap/reset.less
importing /development/can/_pre/less/bootstrap/variables.less
importing /development/can/_pre/less/bootstrap/mixins.less
importing /development/can/_pre/less/bootstrap/scaffolding.less
importing /development/can/_pre/less/bootstrap/grid.less
importing /development/can/_pre/less/bootstrap/layouts.less
importing /development/can/_pre/less/bootstrap/type.less
importing /development/can/_pre/less/bootstrap/code.less
importing /development/can/_pre/less/bootstrap/forms.less
importing /development/can/_pre/less/bootstrap/tables.less
importing /development/can/_pre/less/bootstrap/sprites.less
importing /development/can/_pre/less/bootstrap/dropdowns.less
importing /development/can/_pre/less/bootstrap/wells.less
importing /development/can/_pre/less/bootstrap/component-animations.less
importing /development/can/_pre/less/bootstrap/close.less
importing /development/can/_pre/less/bootstrap/buttons.less
importing /development/can/_pre/less/bootstrap/button-groups.less
importing /development/can/_pre/less/bootstrap/alerts.less
importing /development/can/_pre/less/bootstrap/navs.less
importing /development/can/_pre/less/bootstrap/navbar.less
importing /development/can/_pre/less/bootstrap/breadcrumbs.less
importing /development/can/_pre/less/bootstrap/pagination.less
importing /development/can/_pre/less/bootstrap/pager.less
importing /development/can/_pre/less/bootstrap/modals.less
importing /development/can/_pre/less/bootstrap/tooltip.less
importing /development/can/_pre/less/bootstrap/popovers.less
importing /development/can/_pre/less/bootstrap/thumbnails.less
importing /development/can/_pre/less/bootstrap/media.less
importing /development/can/_pre/less/bootstrap/labels-badges.less
importing /development/can/_pre/less/bootstrap/progress-bars.less
importing /development/can/_pre/less/bootstrap/accordion.less
importing /development/can/_pre/less/bootstrap/carousel.less
importing /development/can/_pre/less/bootstrap/hero-unit.less
importing /development/can/_pre/less/bootstrap/utilities.less
importing /development/can/_pre/less/widget_diagrambox.less

/development/can/dist/optimized.js
----------------
/development/can/deps/requirejs/require.js
/development/can/deps/dezem/require-config.js
/development/can/deps/requirejs/require-css/normalize.js
/development/can/deps/requirejs/require-css/css-builder.js
/development/can/deps/requirejs/require-less/lessc.js
/development/can/deps/requirejs/require-less/lessc-server.js
/development/can/deps/requirejs/require-less/less.js
require-less/less!app/_pre/less/report_styles
/development/can/report.js


/development/can/dist/optimized.js
----------------
/development/can/deps/requirejs/require.js
/development/can/deps/dezem/require-config.js
/development/can/deps/requirejs/require-css/normalize.js
/development/can/deps/requirejs/require-css/css-builder.js
/development/can/deps/requirejs/require-less/lessc.js
/development/can/deps/requirejs/require-less/lessc-server.js
/development/can/deps/requirejs/require-less/less.js
require-less/less!app/_pre/less/report_styles
/development/can/report.js
>> RequireJS optimizer finished
Reading /development/can/dist/optimized.js...OK
Uncompressed size: 250063 bytes.
Compressed size: 59363 bytes gzipped.

[guybedford]

/development/can/deps/requirejs/require-css/css-builder.js

Ahh, this would be the pluginBuilder issue again - note the build info at the bottom of the RequireLESS page.

Include the following config:

{
  excludeShallow: ['require-css/css-builder', 'require-less/lessc-server', 'require-less/lessc'],
  include: ['require-css/css']
}

Until issue requirejs/r.js#289 is addressed there is nothing I can do about this.

[polarity]

yea that seems to work, the build loads like a charme 💃

i tried the excludeShallow option already, but the note on the build info at the bottom of the RequireLESS page says:

{
  excludeShallow: ['require-css/css-builder', 'require-less/lessc-server']
}

maybe it should be updated with all needed files and a hint that it´s meant to be on the build config not the requirejs frontend config. just to make it clear. thx for your quick help and great work!

[guybedford]

I've amended the RequireLESS page.

[rangermeier]

Thanks a lot for pointing out the issue. It works now.
I have updated the example repository in case someone is having the same problem.