Installing Twig Engine on new project causes errors on npm run patternlab build

[hdwebpros]

I am using Patternlab edition-node@1.0.0-alpha.13 on Windows, with Node 9.9.0, using a Vanilla Edition.

Expected Behavior

npm run patternlab build turns .twig files into public twig patterns without error

Actual Behavior

Seems like for each pattern you get:
(node:11932) [DEP0013] DeprecationWarning: Calling an asynchronous function without callback is deprecated.
and then

{ Error: Command failed: php C:\websites\fail3\node_modules\exec-php\lib\php\cli.php -pC:\Users\RYANBO~1\AppData\Local\Temp\tmp-11932tjn5me1.m9qf.tmp -rC:\Users\RYANBO~1\AppData\Local\Temp\tmp-11932tus7wsp.18ge.tmp
PHP Fatal error:  Uncaught Twig_Error_Loader: The "..\..\..\..\source\_patterns" directory does not exist ("C:\websites\fail3\node_modules\node-twig\php\..\..\..\..\source\_patterns"). in C:\websites\fail3\node_modules\node-twig\php\vendor\twig\twig\lib\Twig\Loader\Filesystem.php:101
Stack trace:
#0 C:\websites\fail3\node_modules\node-twig\php\vendor\twig\twig\lib\Twig\Loader\Filesystem.php(82): Twig_Loader_Filesystem->addPath('..\\..\\..\\..\\sou...', '__main__')
#1 C:\websites\fail3\node_modules\node-twig\php\vendor\twig\twig\lib\Twig\Loader\Filesystem.php(40): Twig_Loader_Filesystem->setPaths(Array)
#2 C:\websites\fail3\node_modules\node-twig\php\Twig.php(80): Twig_Loader_Filesystem->__construct('..\\..\\..\\..\\sou...')
#3 C:\websites\fail3\node_modules\exec-php\lib\php\functions.php(28): render('02-pages\\00-gen...', Array)
#4 C:\websites\fail3\node_modules\exec-php\lib\php\cli.php(14): _exec_php_call_user_function('C:\\websites\\fai...', 'render', Array)
#5 {main}
  thrown in C:\websites\fail3\node_modules\node-twig\php\vendor\twig\twig\lib\Twig\Loader\Filesystem.php on line 101

    at ChildProcess.exithandler (child_process.js:273:12)
    at ChildProcess.emit (events.js:180:13)
    at maybeClose (internal/child_process.js:936:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
  killed: false,
  code: 255,
  signal: null,
  cmd: 'php C:\\websites\\fail3\\node_modules\\exec-php\\lib\\php\\cli.php -pC:\\Users\\RYANBO~1\\AppData\\Local\\Temp\\tmp-11932tjn5me1.m9qf.tmp -rC:\\Users\\RYANBO~1\\AppData\\Local\\Temp\\tmp-11932tus7wsp.18ge.tmp' }
undefined

sidenote this happens on the initial npm run patternlab build. If you run it after the error, it says patternlab → build: Yay, your Pattern Lab project was successfully built ☺ but the patterns within public still show only the text "undefined". Example location public/patterns/00-test-00-testpattern/00-test-00-testpattern.markup-only.html

Steps to Reproduce

*In Windows, go to a blank folder via cmd
*Run npm init -y && npx @pattern-lab/cli -c patternlab init (this issue works through how you can even do that if you have npx/npm cache issues)
*Since the starterkit doesn't allow you to choose an engine... run npm install @pattern-lab/engine-twig
*Edit your package.json and include "patternlab": "patternlab" within the scripts section
*Create a twig pattern
*Create a folder within source called fonts since the build looks for that. (I may submit another issue around that)
*Run npm run patternlab build

[hdwebpros]

Here are some steps to get you to this point on Windows

Pre dev
Get the latest versions of node, npm, git and npx
If you get an error stating that npx is not installed, ensure you are on npm 5.2.0 or later by running npm -v or install it globally with npm install -g npx.

Getting Node setup properly on Windows
Node is weird on Windows. Let's get it setup properly

• Ensure that the npm and nodejs folders are in the system variables, not the user
• Make sure that npm is listed before nodejs (C:\Users\My Name\AppData\Roaming\npm;C:\Program Files\nodejs)
• For the heck of it, run npm cache clean --force
• npm doesn't seem to set the prefix folder right, especially if the username has spaces in it. Open the .npmrc file in C:\Users\Your Name and find the prefix line. Uncomment that and add the proper prefix. It would be prefix=C:\Users\My Name\AppData\Roaming\npm and replace "My Name" with your username
• The cache folder still may act up on you. If it does, run npm config set cache C:\tmp\nodejs\npm-cache --global

By doing the above, I could run the steps to reproduce this error

[hdwebpros]

Reopened task, accidentally closed. Still an issue

[NateAGeek]

I have found the issue. It does have to do with Windows and the way the paths are setup. I'm not sure if on other platforms there would be issue to use absolute paths over relative. However, my suggested fix is to change line @pattern-lab\engine-twig\lib\engine_twig.js:48 path.resolve

Full example:

renderPattern: function renderPattern(pattern, data) {
    return Promise.resolve(
      twig(
        pattern.relPath,
        {
          root: path.resolve( //Update
            __dirname,
            path.resolve(process.cwd(), 'source', '_patterns')
          ),
          context: data,
        },
        (error, template) => {
          if (error) {
            console.log(error);
          }
          console.log(template);
          return template;
        }
      )
    );
  },

[alamowo]

I have the same problems on MacOS 10.13.x

@NateAGeek: When add your changes, i'm getting this in the console:

<html>
      <head>
        <title>Twig Error</title>
        <style>
          @import 'https://fonts.googleapis.com/css?family=Roboto+Mono';
          body {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0b0c12;
          }
          .error {
            color: #fff;
            padding: 10px 20px;
            font-size: 18px;
            border-left: 3px solid #a4d233;
            font-family: "Roboto Mono", monospace;
            margin: 20px;
          }
        </style>
      </head>
      <body>
        <div class="error">Template "_meta/_01-foot.twig" is not defined.</pre>
      </body>
    </html>

Pattern Lab is served, but only with undefined as described by @hdwebpros

[DanielRuf]

At least there are the callbacks missing:

See https://nodejs.org/docs/latest-v10.x/api/fs.html#fs_fs_unlink_path_callback

[DanielRuf]

The root of the issue (no pun intended) is

pattern.relPath,
        {
          root: path.resolve(
            __dirname,
            path.resolve(process.cwd(), 'source', '_patterns')
          ),
          context: data,
        },

Which sets the root to .../source/_patterns which is the same for the Twig engine in node-twig

// Get the root template directory either from the given file or specified in the options.
  $rootDir = array_key_exists('root', $options) && $options['root']
    ? $options['root'] : $fileInfo['dirname'];

  $prefix = _getFilepathPrefix($rootDir, $fileInfo['dirname']);

  $loader = new Twig_Loader_Chain(array(
    new AliasLoader(array(), $options['aliases']),
    new Twig_Loader_Filesystem($rootDir),
  ));

  // @todo Provide a mechanism to allow custom Twig extensions either via PHP or better JS.
  $twig = new Twig_Environment($loader);

path.resolve(process.cwd(), 'source') seems to fix this.

[DanielRuf]

Because you can fix the initial issue by moving _meta into _patterns.

[DanielRuf]

Now we get

yarn run pl:build
yarn run v1.12.1
$ node ./node_modules/.bin/patternlab build --config ./patternlab-config.json
Pattern Lab Node v3.0.0-beta.1
Pattern Engine mustache: good to go
/Users/druf/projects/pl-node-twig/source/_meta/_00-head.twig
/Users/druf/projects/pl-node-twig/source/_meta/_01-foot.twig
Pattern Engine twig: good to go
Incremental builds enabled.
WARNING: missing or malformed source/_data/listitems.json file.  Pattern Lab may not work without this file.
(node:71089) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
Built Pattern Lab front end
⊙ patternlab → build: Yay, your Pattern Lab project was successfully built ☺
null
null
null
null
null
null
null
null
<!--DO NOT REMOVE-->
<script type="text/json" id="pl-pattern-data-footer" class="pl-js-pattern-data">
  {"patternPartial":"viewall-atoms-all"}
</script>

<script>
  /*!
   * scriptLoader - v0.1
   *
   * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
   * Licensed under the MIT license
   *
   */

  var scriptLoader = {

    run: function(js,cb,target) {
      var s  = document.getElementById(target+'-'+cb);
      for (var i = 0; i < js.length; i++) {
        var src = (typeof js[i] != 'string') ? js[i].src : js[i];
        var c   = document.createElement('script');
        c.src   = '../../'+src+'?'+cb;
        if (typeof js[i] != 'string') {
          if (js[i].dep !== undefined) {
            c.onload = function(dep,cb,target) {
              return function() {
                scriptLoader.run(dep,cb,target);
              }
            }(js[i].dep,cb,target);
          }
        }
        s.parentNode.insertBefore(c,s);
      }
    }

  }
</script>

<script id="pl-js-polyfill-insert-1541159223948">
  (function() {
    if (self != top) {
      var cb = '1541159223948';
      var js = [];
      scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
  })();
</script>

<script id="pl-js-insert-1541159223948">
  /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
  !function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);

  (function() {
    if (self != top) {
      loadJS('../../styleguide/js/patternlab-pattern.js');
    }
  })();
</script>


</body>
</html>
null
null
<!DOCTYPE html>
<html class="">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" href="../../css/style.css?1541159223948" media="all" />
    <link rel="stylesheet" href="../../css/pattern-scaffolding.css?1541159223948" media="all" />

    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    <link rel="stylesheet" href="../../styleguide/css/pattern-lab.css?1541159223948" media="all">
    <!-- End Pattern Lab -->

  </head>
  <body class="">
<!--DO NOT REMOVE-->
<script type="text/json" id="pl-pattern-data-footer" class="pl-js-pattern-data">
  {"patternPartial":"viewall-atoms-all"}
</script>

<script>
  /*!
   * scriptLoader - v0.1
   *
   * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
   * Licensed under the MIT license
   *
   */

  var scriptLoader = {

    run: function(js,cb,target) {
      var s  = document.getElementById(target+'-'+cb);
      for (var i = 0; i < js.length; i++) {
        var src = (typeof js[i] != 'string') ? js[i].src : js[i];
        var c   = document.createElement('script');
        c.src   = '../../'+src+'?'+cb;
        if (typeof js[i] != 'string') {
          if (js[i].dep !== undefined) {
            c.onload = function(dep,cb,target) {
              return function() {
                scriptLoader.run(dep,cb,target);
              }
            }(js[i].dep,cb,target);
          }
        }
        s.parentNode.insertBefore(c,s);
      }
    }

  }
</script>

<script id="pl-js-polyfill-insert-1541159223948">
  (function() {
    if (self != top) {
      var cb = '1541159223948';
      var js = [];
      scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
  })();
</script>

<script id="pl-js-insert-1541159223948">
  /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
  !function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);

  (function() {
    if (self != top) {
      loadJS('../../styleguide/js/patternlab-pattern.js');
    }
  })();
</script>


</body>
</html>
null
null
null
null
<!--DO NOT REMOVE-->
<script type="text/json" id="pl-pattern-data-footer" class="pl-js-pattern-data">
  {"patternPartial":"viewall-atoms-all"}
</script>

<script>
  /*!
   * scriptLoader - v0.1
   *
   * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
   * Licensed under the MIT license
   *
   */

  var scriptLoader = {

    run: function(js,cb,target) {
      var s  = document.getElementById(target+'-'+cb);
      for (var i = 0; i < js.length; i++) {
        var src = (typeof js[i] != 'string') ? js[i].src : js[i];
        var c   = document.createElement('script');
        c.src   = '../../'+src+'?'+cb;
        if (typeof js[i] != 'string') {
          if (js[i].dep !== undefined) {
            c.onload = function(dep,cb,target) {
              return function() {
                scriptLoader.run(dep,cb,target);
              }
            }(js[i].dep,cb,target);
          }
        }
        s.parentNode.insertBefore(c,s);
      }
    }

  }
</script>

<script id="pl-js-polyfill-insert-1541159223948">
  (function() {
    if (self != top) {
      var cb = '1541159223948';
      var js = [];
      scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
  })();
</script>

<script id="pl-js-insert-1541159223948">
  /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
  !function(e){var t=function(t,n){"use strict";var o=e.document.getElementsByTagName("script")[0],r=e.document.createElement("script");return r.src=t,r.async=!0,o.parentNode.insertBefore(r,o),n&&"function"==typeof n&&(r.onload=n),r};"undefined"!=typeof module?module.exports=t:e.loadJS=t}("undefined"!=typeof global?global:this);

  (function() {
    if (self != top) {
      loadJS('../../styleguide/js/patternlab-pattern.js');
    }
  })();
</script>


</body>
</html>
null
null
✨  Done in 1.66s.

[DanielRuf]

But still undefined in the html. Will check this.

[DanielRuf]

Got a bit deeper the rabbit hole:

patternlab-node/packages/core/src/lib/ui_builder.js

Lines 801 to 802 in 543558a

	return Promise.all([headerPromise, footerPromise]).then(
	headFootPromiseResults => {

is undefined as the render method calls do not return anything.

node-twig is not used by many and was not updated for two years now. twig, twing or other alternatives may be much better and work.

Currently the Twig engine of the Node edition can not be used due to the current issues.