Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
balteo opened this issue May 20, 2016 · 30 comments
Closed

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

balteo opened this issue May 20, 2016 · 30 comments
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix

Comments

@balteo
Copy link

balteo commented May 20, 2016

  1. OS:
    Mac OSX (El Capitan)
  2. Versions:
    angular-cli: 1.0.0-beta.5
    node: 4.3.1
    os: darwin x64
  3. Repro steps.
    I have installed less css
  4. The log given by the failure:
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
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-site/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at LESSPlugin.CachingWriter [as constructor] (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new LESSPlugin (/Users/julien/Documents/projects/bignibou/bignibou-site/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-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular-broccoli-less.js:52:12)
    at Angular2App._buildTree (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:125:27)
    at new Angular2App (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/julien/Documents/projects/bignibou/bignibou-site/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-site/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-site/bignibou-client/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/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at /Users/julien/Documents/projects/bignibou/bignibou-site/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-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/julien/Documents/projects/bignibou/bignibou-site/bignibou-client/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

I am trying to get less css to work with my angular CLI- generated application.

I have tried and configure the plugin as follows in angular-cli-build.js

module.exports = function (defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)'
    ],
    lessCompiler: {
      includePaths: [
        'src/assets/styles'
      ]
    }
  });
};

Can anyone please help?

@patrykbialek
Copy link

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

@melquic
Copy link

melquic commented May 28, 2016

Same problem here. Any news?

Melq

@balteo
Copy link
Author

balteo commented May 28, 2016

@melquic Not on my side unfortunately...

@watzon
Copy link

watzon commented May 28, 2016

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

@j6s
Copy link

j6s commented May 29, 2016

+1 - also present on Linux based systems

@cvharris
Copy link

Same problem here. Has this just been a known issue? Has @import in LESS files worked yet on this build?

@j6s
Copy link

j6s commented May 29, 2016

@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.

@cvharris
Copy link

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.

@j6s
Copy link

j6s commented Jun 1, 2016

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

@gsaadeh
Copy link

gsaadeh commented Jun 3, 2016

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)

@filipesilva filipesilva added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jun 4, 2016
@stevefarwell
Copy link

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

@ohanspace
Copy link

any update??

@nmorenor
Copy link

Hey,

I had this same issue, it turns out that the stacktrace is because one of the less files is referencing to a variable from a file that is not being imported by the file itself, on less you could have one file that do many imports so that you can split your css on different files. I think we could have the Angular2App to tell the lessCompiler plugin to exclude a set of files from inside our src/app dir. This change is adding that capability to the lessCompiler plugin, what do you think?

@minhnguyenwp
Copy link

Hi,

I had same. Pls help me use lessCompliler option !

@cvharris
Copy link

cvharris commented Jul 6, 2016

Is this error only because LESS compile errors aren't being bubbled out to
the Broccoli stacktrace? Maybe thats the real issue here and we should seek
an enhancement to expose it for swifter troubleshooting
On Wed, Jul 6, 2016 at 05:44 Minh Nguyen notifications@github.com wrote:

Hi,

I had same. Pls help me use lessCompliler option !


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#873 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AD0_QOVFYLq-cQgPZUWpf9GDRBp1ij0Rks5qS4btgaJpZM4IjkkS
.

@nmorenor
Copy link

nmorenor commented Jul 6, 2016

Right part of the issue is that the Stacktrace is not that helpful, but also the fact that some less files should not be compiled alone, they are only useful if they get imported from another file. The approach I was following was to set a less compiler property to disable the compile a certain path inside src/app, although if I follow this and modify these files brocoli does not detect a change in this excluded path. I see two issues.

  • Expose a Less compiler on the console so you can get to know why the less files did not compile, as troubleshooting.
  • Allow you to have a set excluded directories with less files inside the src dir that will not get compiled.

@nmorenor
Copy link

nmorenor commented Jul 6, 2016

Hi,

I have closed the previous pull request and generated another one, this one will let you exclude files but at the same time, will let broccoli watch for changes inside this exclusion and trigger a build if any less file changes under the src directory. change. Although, It will also nice to have a way to dump a nice message when the less compiler throws an exception.

@balteo
Copy link
Author

balteo commented Jul 13, 2016

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.

@Dammmien
Copy link

Dammmien commented Jul 19, 2016

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.

@balteo
Copy link
Author

balteo commented Jul 19, 2016

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.

@Dammmien
Copy link

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.

@balteo
Copy link
Author

balteo commented Jul 20, 2016

I see. But how do you refer to the main bootstrap.less file from within your index.html?

@Dammmien
Copy link

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.

@balteo
Copy link
Author

balteo commented Jul 20, 2016

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...

@db6edr
Copy link

db6edr commented Jul 21, 2016

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.

@zgosalvez
Copy link

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.

@balteo
Copy link
Author

balteo commented Jul 23, 2016

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?

@balteo
Copy link
Author

balteo commented Jul 23, 2016

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?

@filipesilva
Copy link
Contributor

Closed as this issue was made obsolete by #1455.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix
Projects
None yet
Development

No branches or pull requests