Windows only: Incorrectly resolved webpack aliases paths

[daomatys]

package.json

"@webdiscus/pug-loader": "^1.5.0"

webpack.config.json

const PATHS = {
  src: path.join(__dirname, '/src'),
  dist: path.join(__dirname, '/dist')
};

...

{
  test: /\.pug$/i,
  loader: '@webdiscus/pug-loader',
  options: {
    basedir: PATHS.src,
  }
},

...

resolve: {
  alias: {
    '@images': path.join( PATHS.src, '/assets/images/' ),
  }
},

I've tried to build fresh dist-kit, but got a longread full of similar errors instead:

Module build failed: UnhandledSchemeError: Reading from "D:MaxcoderjScriptBaymetalamp-fedsec-layoutssrcassetsimages/favicon/favicon-96x96.png" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "d:" URIs. at D:\Max\coder\jScriptBay\metalamp-fedsec-layouts\node_modules\webpack\lib\NormalModule.js:825:25

For some reasons, webpack aliases is nothing but a plain text without any special file path characters there.

So i tried to look around the sourcecode. Here is @webdiscus/pug-loader/src/utils.js:

/**
 * Replace founded alias in require argument.
 *
 * @param {string} value The value of extends/include/require().
 * @param {{}} aliases The `resolve.alias` of webpack config.
 * @param {function(string):string} regexp The function return a regex pattern string. The argument is alias name.
 * @return {string} The string with replaced alias.
 */
const resolveAlias = (value, aliases, regexp) => {
  const patternAliases = Object.keys(aliases).join('|');

  if (!patternAliases) return value;

  const [, alias] = new RegExp(regexp(patternAliases)).exec(value) || [];

  return alias ? value.replace(new RegExp(regexp(alias)), aliases[alias]).replace('//', '/') : value;
};

But everything looks well there, so i can't find a reason of that strange problem with webpack aliases.

Hope my debut issue request is a bit helpful. Thank you for an attention!

[daomatys]

Sorry, i forgot to add an example of alias usage:

./src/components/favicons-bulk/favicons-bulk.pug

mixin faviconsBulk()
  link( rel="icon" type="image/png" href=require("@images/favicon/favicon-196x196.png") sizes="196x196" )
  link( rel="icon" type="image/png" href=require("@images/favicon/favicon-96x96.png"  ) sizes="96x96"   )
  link( rel="icon" type="image/png" href=require("@images/favicon/favicon-32x32.png"  ) sizes="32x32"   )

[webdiscus]

Hello @daomatys,

thank you for the bug report. In linux it works. It looks like the problem is in Windows environment. I will try fix it for Windows.

[webdiscus]

Hello @daomatys,

I have fixed the issues on windows (tested on Win 10), ver. 1.5.1. Can you please try test it?

npm run test

[daomatys]

Hello, @webdiscus,

Yea, here is my test log

OS: Win 10 Pro, ver. 21H1,

> @webdiscus/pug-loader@1.5.1 test D:\Max\coder\jScriptBay\pug-loader
> jest --detectOpenHandles --config ./test/jest.config.js

 PASS  test/index.unit.test.js
 FAIL  test/index.integration.test.js (23.431 s)
  ● pug tests › escape render

    expect(received).toEqual(expected) // deep equality

    - Expected  - 3
    + Received  + 3

    - <h1>Hello world!</h1><p>"double quotes"</p><p>'single quotes'</p><p>`backtick`</p><p>Newline string,
    + <h1>Hello world!</h1><p>"double quotes"</p><p>'single quotes'</p><p>`backtick`</p><p>Newline string,
    - next newline
    + next newline
    - </p><p>Add strings:string1 with |
    + </p><p>Add strings:string1 with |
      string2 with |</p>

      21 |     const received = readTextFileSync(path.join(absTestPath, PATHS.webRoot, receivedFile));
      22 |     const expected = readTextFileSync(path.join(absTestPath, PATHS.expected, expectedFile));
    > 23 |     expect(received).toEqual(expected);
         |                      ^
      24 |     done();
      25 |   });
      26 | };

      at utils/helpers.js:23:22

  ● pug tests › escape render

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      39 |   });
      40 |
    > 41 |   test('escape render', (done) => {
         |   ^
      42 |     const relTestCasePath = 'escape-render';
      43 |     compareContent(PATHS, relTestCasePath, done);
      44 |   });

      at index.integration.test.js:41:3
      at Object.<anonymous> (index.integration.test.js:35:1)

  ● extend / include / raw include › include-alias

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 1

    - <h1>Test includes</h1><h2>include A</h2><p>mixin A</p><h3>include B</h3><p>mixin B</p><h4>include C</h4><h1>Markdown test</h1>
    + <h1>Test includes</h1><h2>include A</h2><p>mixin A</p><h3>include B</h3><p>mixin B</p><h4>include C</h4><h1>Markdown test</h1>
      <p>end</p>

      21 |     const received = readTextFileSync(path.join(absTestPath, PATHS.webRoot, receivedFile));
      22 |     const expected = readTextFileSync(path.join(absTestPath, PATHS.expected, expectedFile));
    > 23 |     expect(received).toEqual(expected);
         |                      ^
      24 |     done();
      25 |   });
      26 | };

      at utils/helpers.js:23:22

  ● extend / include / raw include › include-alias

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      56 |   });
      57 |
    > 58 |   test('include-alias', (done) => {
         |   ^
      59 |     const relTestCasePath = 'include-alias';
      60 |     compareContent(PATHS, relTestCasePath, done);
      61 |   });

      at index.integration.test.js:58:3
      at Object.<anonymous> (index.integration.test.js:47:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       2 failed, 73 passed, 75 total
Snapshots:   0 total
Time:        25.211 s
Ran all test suites.

[webdiscus]

Hello @daomatys,

thank you for test report. These errors are not important. Main and important tests are passed. The problem in two cases is either with cached old tests or with the wrong formatting of Newline in Git on Windows.

For example, in this case extend / include / raw include › include-alias: the expected file contain 1:1 what is received:

<h1>Test includes</h1><h2>include A</h2><p>mixin A</p><h3>include B</h3><p>mixin B</p><h4>include C</h4><h1>Markdown test</h1>
<p>end</p>

How is configured Git on Windows? Git configuration for Newline must be as is, without NL transformation

Yet one cause: sometime at first run test some tests failed. But the next attempt was successful. Try 2-3 times.

So, on Win 10 all test are passed. Your project metalamp-fedsec-layouts with the @webdiscus/pug-loader has been successfully builded on Win 10. The project started local on Windows with npm run host as well successful.

Please, try run your project with @webdiscus/pug-loader.