The Broccoli Plugin: [LESSPlugin] failed with: undefined #873

Activity

1. patrykbialek commented on May 23, 2016

   

   patrykbialek

   on May 23, 2016

   More actions

   I have the same problem, didn't fixed yet... but in my case if I have @import statement insisde the .less file the error occures.

   Pat
2. melquic commented on May 28, 2016

   

   melquic

   on May 28, 2016

   More actions

   Same problem here. Any news?

   Melq
3. balteo commented on May 28, 2016

   

   balteo

   on May 28, 2016

   Author

   More actions

   @melquic Not on my side unfortunately...
4. watzon commented on May 28, 2016

   

   watzon

   on May 28, 2016

   More actions

   Also getting this error. Seems to happen anytime a component or vendor file is added or removed. Has to do with the ng build task not running correctly
5. j6s commented on May 29, 2016

   

   j6s

   on May 29, 2016

   More actions

   +1 - also present on Linux based systems
6. cvharris commented on May 29, 2016

   

   cvharris

   on May 29, 2016

   More actions

   Same problem here. Has this just been a known issue? Has @import in LESS files worked yet on this build?
7. j6s commented on May 29, 2016

   

   j6s

   on May 29, 2016

   More actions

   @cvharris as mentioned before, it works, if you move the imported less files out of the src/ folder and add the following to your angular-cli-build.js:

     return new Angular2App(defaults, {
       vendorNpmFiles: [
           // ...
       ],
       lessCompiler: {
         'paths': [__dirname + '/less'] // this is the important configuration
       }
     });

   But this really is only a workaround for the currently existing problem.

   👍React with 👍1Reacted by Maulik Bengali
8. cvharris commented on May 31, 2016

   

   cvharris

   on May 31, 2016

   More actions

   That did work, thanks for the workaround @j6s. However, this exposed what I think is at the heart of the issue: that compilation errors from less.render() are not being bubbled out by the Broccoli build. I think that would be a nice enhancement to this build, to prevent such undefined errors.

   At least, that was the source of the issue in my case.
9. j6s commented on Jun 1, 2016

   

   j6s

   on Jun 1, 2016

   More actions

   I agree. We did spend about an hour debugging to come to a conclusion that we could have reached very easily, if the messages would be bubbled out
10. filipesilva

    added

    type: bug/fix

    command: build

    on Jun 2, 2016
11. gsaadeh commented on Jun 3, 2016

    

    gsaadeh

    on Jun 3, 2016

    Last edited by gsaadeh

    More actions

    I am having an issue importing less and css files with the (less) and (inline) keywords such as:

    @import (inline) "test.css";

    I've tried importing from the same directory and from the node_modules directory and I got the same error.

    File: input (1)
    The Broccoli Plugin: [LESSPlugin] failed with:
    undefined
    
    The broccoli plugin was instantiated at:
        at LESSPlugin.Plugin (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
        at LESSPlugin.CachingWriter [as constructor] (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
        at new LESSPlugin (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:21:12)
        at Object.Plugin.build.compile.exports.makeBroccoliTree (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
        at Angular2App._buildTree (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular2-app.js:125:27)
        at new Angular2App (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
        at module.exports (/Users/George/Documents/Dev/ng2-kendoui/angular-cli-build.js:6:10)
        at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
        at Class.module.exports.Task.extend.init (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
        at new Class (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
        at Class.module.exports.Task.extend.run (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
        at /Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
        at lib$rsvp$$internal$$tryCatch (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
        at lib$rsvp$$internal$$invokeCallback (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
        at /Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
        at lib$rsvp$asap$$flush (/Users/George/Documents/Dev/ng2-kendoui/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    
12. filipesilva

    added

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent

    on Jun 4, 2016
13. stevefarwell commented on Jun 20, 2016

    

    stevefarwell

    on Jun 20, 2016

    More actions

    any updates yet?

    added "less":"^2.0.0" to devDependencies in package.json
    did npm install

    Still having error
    The Broccoli Plugin: [LESSPlugin] failed with:
    undefined

    added:
    return new Angular2App(defaults, {
    vendorNpmFiles: [
    // ...
    ],
    lessCompiler: {
    'paths': [__dirname + '/less'] // this is the important configuration
    }
    });

    no luck
14. ohanspace commented on Jun 22, 2016

    

    ohanspace

    on Jun 22, 2016

    More actions

    any update??
15. 5 remaining items

    Load more

16. balteo commented on Jul 13, 2016

    

    balteo

    on Jul 13, 2016

    Last edited by balteo

    Author

    More actions

    I am still struggling with this issue. The lack of explicitness of the error message is really making things difficult. What is the way of determining what's the real error message?

    I tried to refer the entry point less file as follows:

    lessCompiler: { 'paths': [__dirname + '/src/assets/styles/bootstrap.less'] }

    Which gives me the same cryptic error message:

    Build failed.
    File: input (1029)
    The Broccoli Plugin: [LESSPlugin] failed with:
    undefined
    
    The broccoli plugin was instantiated at: 
        at LESSPlugin.Plugin (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
        at LESSPlugin.CachingWriter [as constructor] (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
        at new LESSPlugin (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:21:12)
        at Object.Plugin.build.compile.exports.makeBroccoliTree (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
        at Angular2App._buildTree (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:133:27)
        at new Angular2App (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
        at module.exports (/Users/julien/Documents/projects/bignibou/bignibou-client/angular-cli-build.js:10:10)
        at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
        at Class.module.exports.Task.extend.init (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
        at new Class (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
        at Class.module.exports.Task.extend.run (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
        at /Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
        at lib$rsvp$$internal$$tryCatch (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
        at lib$rsvp$$internal$$invokeCallback (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
        at /Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
        at lib$rsvp$asap$$flush (/Users/julien/Documents/projects/bignibou/bignibou-client/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
    

    Can anyone please tell me how to figure out what the real error message is?

    For your information, I use the following versions:

    angular-cli: 1.0.0-beta.9
    node: 4.4.5
    os: darwin x64
    

    P.S. Using the lessc compiler like so lessc src/assets/styles/bootstrap.less hello.css properly generates a hello.css file.
17. Dammmien commented on Jul 19, 2016

    

    Dammmien

    on Jul 19, 2016

    Last edited by Dammmien

    More actions

    I had the same error, I think this is only because LESS compiler errors aren't recovered by the Broccoli stacktrace. I had errors when using import statements so i guessed it was a path problem. So you have to defined the src folder in the lessCompiler property of your angular-cli-build.js file.

    {
        ...
        lessCompiler: {
            'paths': [ __dirname + '/src' ]
        },
        ...
    }
    

    And then you have to make all your imports from this path :

    @import "/path/to/my-file.less";
    

    As LESS errors aren't recovered by the Broccoli stacktrace you don't know what is the problem, so maybe it's not the solution to your problem... but it worked for me.
18. balteo commented on Jul 19, 2016

    

    balteo

    on Jul 19, 2016

    Last edited by balteo

    Author

    More actions

    Thanks for your message. Can you please tell me where your import:

    import "/path/to/my-file.less";

    is located? I am not sure where that is (within index.html for instance). I use SystemJS.

    Thanks in advance.
19. Dammmien commented on Jul 20, 2016

    

    Dammmien

    on Jul 20, 2016

    More actions

    The import statement is located in a LESS file to import another LESS file as mentionned in the LESS documentation : import directive feature.

    The path of the import is relative to the path declared in the lessCompiler option.
20. balteo commented on Jul 20, 2016

    

    balteo

    on Jul 20, 2016

    Author

    More actions

    I see. But how do you refer to the main bootstrap.less file from within your index.html?
21. Dammmien commented on Jul 20, 2016

    

    Dammmien

    on Jul 20, 2016

    More actions

    Your boostrap.less file will be compiled into a boostrap.css file in the dist folder of your project. You have just to follow the path from your index.html file to your boostrap.css file like you do to import a classic stylesheet in an html file.
22. balteo commented on Jul 20, 2016

    

    balteo

    on Jul 20, 2016

    Author

    More actions

    As LESS errors aren't recovered by the Broccoli stacktrace you don't know what is the problem, so maybe it's not the solution to your problem... but it worked for me.

    What you said abvove about the exception being hidden is interesting. Do you or someone else know of any way of having more insight into the underlying exception? I find it impossible to advance blindly. There must be a way of accessing the underlying exception through some debugging...
23. db6edr commented on Jul 21, 2016

    

    db6edr

    on Jul 21, 2016

    Last edited by db6edr

    More actions

    I know this is not a proper solution to get less' error message - it is rather a quick and dirty hack dumping the entire error object from less to console:

    Edit node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js and make the function compile(...) look like this:

    compile(fileName, inputPath, outputPath) {
        let content = fs.readFileSync(fileName, 'utf8');
    
        return less.render(content, this.options)
          .then(output => {
            let filePath = fileName.replace(inputPath, outputPath).replace(/\.less$/, '.css');
            fse.outputFileSync(filePath, output.css, 'utf8');
          }, error => {
            console.log(error);
            return Promise.reject( error );
          });
    }
    

    In my case, it revealed that one of the input files contained invalid CSS / less code.

    👍React with 👍3Reacted by balteo, Matt Ford and Yuri Andrushenko
24. zgosalvez commented on Jul 23, 2016

    

    zgosalvez

    on Jul 23, 2016

    More actions

    For anyone else trying to use Bootstrap less files to compile, here's how I got it to work. Caveat is that this approach is hard-coded in the dependency. Thanks to @db6edr for pointing out how to display error messages. The error message I got was that Less was trying to compile my Less partials. This workaround forces angular-cli to only compile bootstrap.less.

    1. Download Bootstrap Source Code
    2. Move less directory into /src/css/less
    3. Follow remaining steps below:

    Add lessCompiler flag in angular-cli-build.js

    //...
    lessCompiler: {
        compress: true,
        paths: [ __dirname + '/src/css/less' ],
    },
    vendorNpmFiles: [
    //...

    Modify build() in angular-broccoli-less.js like so

    build() {
        return Promise.all(this.listEntries().map(e => {
    
            if (path.basename(e.relativePath) != 'bootstrap.less') {
                return;
            }
    
            let fileName = path.resolve(e.basePath, e.relativePath);
            return this.compile(fileName, this.inputPaths[0], this.outputPath);
        }));
    }

    This is inspired by #1150 fix(sass): don't compile partials pull request.
25. balteo commented on Jul 23, 2016

    

    balteo

    on Jul 23, 2016

    Author

    More actions

    Using db6edr's modification of the compile function, I managed to get more insight into the error/stacktrace.

    Here is the error message:

    { [Error: .border-right-radius is undefined]
      type: 'Name',
      filename: 'input',
      index: 31093,
      line: 1029,
      callLine: NaN,
      callExtract: undefined,
      column: 2,
      extract: 
       [ '.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {',
         '  .border-right-radius(0);',
         '}' ],
      message: '.border-right-radius is undefined',
      stack: undefined }
    

    My IDE does warns me of this with the following message:

    Element 'border-right-radius' is resolved only by name without using of explicit imports less... (⌘F1)
    This inspection warns about less elements that are not imported explicitly and resolved through all project less-files only by name. You have no guaranties that these elements will be resolved at the production.

    Now what puzzles me is that the following manual compilation using the this command line passes without problem:

    lessc src/assets/styles/bootstrap.less dist/assets/styles/style.css

    What could cause this inconsistency between lessc and broccoli?
26. balteo commented on Jul 23, 2016

    

    balteo

    on Jul 23, 2016

    Last edited by balteo

    Author

    More actions

    I think I am getting why my use of broccoli-less fails. I need just one less file to be compiled and not all less files within the directory mentioned by path.

    If I change the makeBroccoliTree within angular-broccoli-less.js from

    exports.makeBroccoliTree = (sourceDir, options) => {
      if (less) {
        let lessSrcTree = new Funnel(sourceDir, {
          include: ['**/*.less'],
          allowEmpty: true
        });
    
        return new LESSPlugin([lessSrcTree], options);
      }
    };
    

    to this:

    exports.makeBroccoliTree = (sourceDir, options) => {
      if (less) {
        let lessSrcTree = new Funnel(sourceDir, {
          include: ['**/bootstrap.less'],//Pointing to just the one file!
          allowEmpty: true
        });
    
        return new LESSPlugin([lessSrcTree], options);
      }
    };
    

    Then a bootstrap.css file is generated properly.

    Now I can't obviously fiddle with the node_modules sources. How can I configure this properly?
27. filipesilva commented on Jul 27, 2016

    

    filipesilva

    on Jul 27, 2016

    Contributor

    More actions

    Closed as this issue was made obsolete by #1455.
28. filipesilva

    closed this as completedon Jul 27, 2016
29. angular-automatic-lock-bot commented on Sep 5, 2019

    

    angular-automatic-lock-botbot

    on Sep 5, 2019

    More actions

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    _{This action has been performed automatically by a bot.}
30. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 5, 2019