Can't build correctly

[dignifiedquire]

Hey I'm trying to use require-less and require-css in a build config but I can't seem to get it working. The setup is the following:

<!-- index.html -->

<script type="text/javascript">
  // RequireJS config
  var require = {
    baseUrl: "/",
    waitSeconds: 45
  };
</script>

<script type="text/javascript" src="/vendors/requirejs/requirejs.js"></script>
<script type="text/javascript" >
  require(['require.conf'], function () { require(['base']); })
</script>

// Gruntfile.js
options: {
  baseUrl: '<%= config.src %>',
  dir: '<%= config.src %>/',
  mainConfigFile: 'src/require.conf.js',
  keepBuildDir: true,
  preserveLicenseComments: false,
  skipDirOptimize: false,
  findNestedDependencies: true,
  removeCombined: true,
  generateSourceMaps: true,
  useSourceUrl: true,
  inlineText: true,
  optimize: 'none',
  create: true,
  paths: {
    Handlebars: 'vendors/handlebars/handlebars.runtime'
  },
  stubModules: ['css', 'json', 'text', 'hbars'],
  modules: [
    {
      name: 'base',
      include: ['css', 'templates'],
      excludeShallow: ['css/css-builder', 'less/lessc-server', 'less/lessc']
    }
  ]

// require.conf.js
require.config({
    baseUrl: '/',
    waitSeconds: 45,
    paths: {
        lodash: 'vendors/lodash',
        Handlebars: 'vendors/handlebars/handlebars',
        text: 'vendors/requirejs/text',
        json: 'vendors/requirejs/json',
        hbars: 'vendors/requirejs/hbars',
       // ...
    },
    shim: {
        //...
    },
    packages: [
        {
            name: 'css',
            main: 'css',
            location: 'vendors/require-css'
        },
        {
            name: 'less',
            main: 'less',
            location: 'vendors/require-less'
        }
    ]
});

This build correctly using the grunt task but it a request to css.js is still made and of course fails in the built version. Adding a map configuration as suggested results in the following error while building:

racing dependencies for: base
Error: ENOENT, no such file or directory '[path/to/files]/src/vendors/require-less/less/less-builder.js''
In module tree:
    base
      plugins
        ext/filetree/main
          ext/filetree/lib/filetree

Any help would be really appreciated!

[guybedford]

The reason for this is that the css and less plugin modules need to be included and not stubbed in production.

[dignifiedquire]

Switching to

stubModules: ['json', 'text', 'hbars'],
  modules: [
    {
      name: 'base',
      include: ['css', 'less', 'templates'],
      excludeShallow: ['css/css-builder', 'less/lessc-server', 'less/lessc']
    }
  ]

builds without problems but still requests css.js. :(

[guybedford]

This is a common issue and is typically because the package / map configuration is injected later in the build after the request to CSS is made. Try including your configuration file in the build layer before the css module. For previous discussion on the issue see guybedford/require-css#63.

[dignifiedquire]

As written above adding any map configuration results in a broken build, adding the map configuration only in the config used in the build results in a request to vendors/require-css/css, even with the configuration as above.

[guybedford]

Hmm it should be working when the configuration is built into the layer (by having require.conf as the first include in the layer). In the built file, can you see a define statement for define('vendors/require-css/css')?

[dignifiedquire]

No there is no `define('vendors/require-css/css');

The map file is included and there are define('css', ['css/css']) and define('css/css')statements in the build file.

[guybedford]

Ok that seems fine actually.

The issue sounds like the configuration one still. You need to be sure that the package configuration has already been applied before it tries to load css.

Perhaps check that the configuration is in the layer before these define scripts again.

You can also test early configuration by inserting the following as the first script in the browser page:

  <script>
    var requirejs = {
      packages: [
      {
        name: 'css',
        main: 'css',
        location: 'vendors/require-css'
      }
      ]
    };
  </script>

[dignifiedquire]

I manually inserted the snippet you posted above inside my index.html:

        <script type="text/javascript">
            // RequireJS config
            var require = {
                baseUrl: "/",
                waitSeconds: 45,
            packages: [
            {
            name: 'css',
            main: 'css',
            location: 'vendors/require-css'
            }
            ]
            };
        </script>


        <script data-main="base" type="text/javascript" src="/vendors/requirejs/requirejs.js"></script>

but it still makes two http requests, one to vendors/require-css/css.js and one to vendors/require-css/normalize.js.

[guybedford]

What if you try adding the following below the snippet:

  define('css/css', function(){});
  define('css/normalize', function(){});

[dignifiedquire]

Below the snippet fails because define is not defined. Adding it as the first statements of base.js changes nothing.

[guybedford]

Ok perhaps try changing it to vendors/require-css/css / vendors/require-css/normalize?

It sounds like that will work.

Then that means that the issue is that the names are being built incorrectly into the layer, which seems very odd.

A temporary fix to work this out at the build level could be to try using map config instead of package config in the build config.

[guybedford]

Sorry - I see that the map config isn't possible... perhaps try regressing the version of the r.js optimizer if this is a change in RequireJS we would need to chase that up. Thanks for your help with this.

[guybedford]

I've just tested the latest version of r.js and it seems to work correctly.

Perhaps it would be easiest if you can send a test repo and I can try and look into this for you?

[dignifiedquire]

Ok perhaps try changing it to vendors/require-css/css / vendors/require-css/normalize?

It sounds like that will work.

This results in Uncaught TypeError: Cannot call method 'addBuffer' of undefined.

I've just tested the latest version of r.js and it seems to work correctly.

Did you use map or package?

Perhaps it would be easiest if you can send a test repo and I can try and look into this for you?

Will try to set something up

[guybedford]

The error is exactly right for the module being empty. But at the request level it has stopped the requests.

When you have the file written in as vendors/require-css/css then this will be working. Updating the define statements should show this.

I have examples using both - the example folder in the RequireLESS plugin uses package config due to the map error. The example in the RequireCSS plugin for use on its own uses map config.