[ERR_INVALID_CALLBACK]: Callback must be a function while Dockerizing

[superjose]

Hi danguilherme! Thank you so much for the loader. It's been working very well with Angular. It took me a while to get everything running (Angular-issues).

I'm having some issues when I try to use Docker with the loader. Whenever I run "node ./ng-add-pug-loader.js", I get:

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
 at maybeCallback (fs.js:133:9)
 at Object.writeFile (fs.js:1139:14)
 at fs.readFile (/usr/app/ng-add-pug-loader.js:20:6)
 at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)
error Command failed with exit code 1.

I was able to fix it, by changing all the Asynchronous methods to Synchronous:

/**
 * Adds the pug-loader inside Angular CLI's webpack config, if not there yet.
 * @see https://github.com/danguilherme/ng-cli-pug-loader
 */
const fs = require('fs');
const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';
const pugRule = '{ test: /.pug$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] },';

fs.readFile(commonCliConfig, (err, data) => {
  if (err) { throw err; }

  const configText = data.toString();
  // make sure we don't add the rule if it already exists
  if (configText.indexOf(pugRule) > -1) { return; }

  // Insert the pug webpack rule
  const position = configText.indexOf('rules: [') + 8;
  const output = [configText.slice(0, position), pugRule, configText.slice(position)].join('');
  const file = fs.openSync(commonCliConfig, 'r+');
  fs.writeFileSync(file, output);
  fs.closeSync(file);
});

Again, thank you so much for the loader! It's been of great help 😁

[danguilherme]

Thank you!

What's the version of node you're using? Maybe the problem was with the arrow functions. I recommend using Node 8+ to run the build, as it supports most of the ES6 functionalities.

I'll update the README with this info, thanks!

[superjose]

@danguilherme Thanks for the reply :) I'm currently under Node 10.5.0 in the Docker image.

[danguilherme]

That's odd... I'll take a look at this, thanks for reporting

[superjose]

@danguilherme Thank you! I made this post in Medium, in which I document the process: (Check Steps 3 and 4) https://hackernoon.com/using-docker-docker-compose-angular-cli-6-sass-and-pug-jade-160896dfd208

There's probably something that I may be doing wrong! I'm open to feedback!

[danguilherme]

Hmm I believe your call to readFileSync is wrong, as you're passing a callback function, but as it's synchronous, it's not invoked: https://github.com/superjose/angular-cli-pug-sass-docker/blob/5fd4ccdfecc4ac73a3fd5dc7c5a5d47d25873ee7/ng-add-pug-loader.js#L9-L22

This way, the loaders are not being injected to CLI's Webpack config (maybe they were added in the first run, but now the code that injects them is not being called).

Also, I executed the steps of your tutorial, and did not have the error of this issue.

$ ng new angular-pug-sass-docker-app --style=scs
$ cd angular-pug-sass-docker-app
$ ng add ng-cli-pug-loader
$ npm run postinstall # Rerunning the file manually

[superjose]

@danguilherme Jeez, sorry again for the late reply... Huh, that is correct.

Can someone explain to me why this is somehow working? Or did it work from the first try and the file is not working anymore?

Sigh I wonder what I ended up doing wrong in my setup that caused that issue. I'll look back into it and check.

Thank you very much for the reply!

[danguilherme]

Exactly, it worked at the first time, despite the error.

If you do a clean install of your dependencies (rm -rf node_modules && npm install), the script will have no effect and your pug files will not be transformed to HTML.

[tim545]

There were some changes to the File system functions added in Node v10 which make the callback parameter for fs.write() and fs.close() required, from the docs: "The callback parameter is no longer optional. Not passing it will throw a TypeError at runtime."

Locally in my project I just made a small change to ng-add-pug-loader.js to fix it, replaced lines 20,21 with:

fs.writeFile(file, output, {}, () => {
  fs.close(file, () => {});
});

[danguilherme]

Thanks for the info @tim545, will fix this as soon as possible.

[davidrichied]

Thanks for the tip @tim545 For anyone wondering, the error also occurs for fs.rename. After I added the function as the third parameter, the error went away. fs.rename(path.resolve(dirname, '../dist2'), path.resolve(dirname, '../dist'), () => {})

[xenikopa]

I want to offer an alternative solution found in the article https://medium.com/@MarkPieszak/using-pug-or-jade-templates-with-the-angular-cli-9e37334db5bc -  just use comand in your project's directory ng add ng-cli-pug-loader Good luck, have fun

[danguilherme]

@xenikopa this is the source repo of the ng-cli-pug-loader package.