webpack critical dependency warning

Hi,

I’m successfully using liquidjs in my projects for a while, but today I encountered a small issue while trying to pack it in a VSCode extension, webpack reported the following:

ilg@wks vscode-xpack-extension-ts.git % npm run publish

> xpack@0.2.1 publish
> vsce publish

Executing prepublish script 'npm run vscode:prepublish'...

> xpack@0.2.1 vscode:prepublish
> webpack --mode production

asset extension.js 89.2 KiB [compared for emit] [minimized] (name: main) 2 related assets
runtime modules 937 bytes 4 modules
modules by path ./ 221 KiB
  modules by path ./src/ 65.3 KiB 11 modules
  modules by path ./node_modules/ 155 KiB
    modules by path ./node_modules/@xpack/logger/ 12.2 KiB 2 modules
    modules by path ./node_modules/make-dir/ 44.2 KiB 2 modules
    modules by path ./node_modules/liquidjs/dist/ 93.7 KiB 2 modules
    ./node_modules/vscode-cpptools/out/api.js 5.34 KiB [built] [code generated]
external "assert" 42 bytes [built] [code generated]
external "vscode" 42 bytes [built] [code generated]
external "fs" 42 bytes [built] [code generated]
external "os" 42 bytes [built] [code generated]
external "path" 42 bytes [built] [code generated]
external "util" 42 bytes [built] [code generated]
external "process" 42 bytes [built] [code generated]

WARNING in ./node_modules/liquidjs/dist/liquid.node.esm.js 254:15-36
Critical dependency: the request of a dependency is an expression
    at RequireResolveContextDependency.getWarnings (/Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/webpack/lib/dependencies/ContextDependency.js:82:18)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/webpack/lib/Compilation.js:2525:24)
    at /Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/webpack/lib/Compilation.js:2156:10
    at _next2 (eval at create (/Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:1)
    at eval (eval at create (/Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:62:1)
    at /Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:352:11
    at /Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/neo-async/async.js:2850:39)
    at /Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:331:18
    at /Users/ilg/My Files/WKS Projects/xpack.github/vscode-extensions/vscode-xpack-extension-ts.git/node_modules/neo-async/async.js:2830:7
 @ ./src/lib/xpm-liquid.ts 22:19-38
 @ ./src/lib/data-model.ts 24:21-44
 @ ./src/lib/manager.ts 19:21-44
 @ ./src/extension.ts 17:18-42

webpack 5.32.0 compiled with 1 warning in 3281 ms
Publishing ilg-vscode.xpack@0.2.1...
 INFO  Extension URL (might take a few minutes): https://marketplace.visualstudio.com/items?itemName=ilg-vscode.xpack
 INFO  Hub URL: https://marketplace.visualstudio.com/manage/publishers/ilg-vscode/extensions/xpack/hub
 DONE  Published ilg-vscode.xpack@0.2.1.
ilg@wks vscode-xpack-extension-ts.git % 

In line 254 of liquid.node.esm.js there is require object, which apparently confuses webpack:

function fallback(file) {
    try {
        return require.resolve(file);
    }
    catch (e) { }
}

The webpack documentation warns that these messages should be taken seriously:

• https://code.visualstudio.com/api/working-with-extensions/bundling-extension#webpack-critical-dependencies

I’m quite new to webpack/VSCode extensions/TypeScript, so I don’t have a solution, but it would be great to have a webpack friendly liquidjs, in order to avoid workarounds like having to exclude liquidjs from web bundles.

Thank you in advance,

Liviu

[harttle]

“loading partials from node modules” is no longer supported in LiquidJS when compiled by webpack. webpack tries to pack all dependencies (including ones in node_modules) into its output bundles, which is against the idea of “resolving by node’s require & reading the file as template". (though one can create a sophisticated webpack loader for this purpose)

Adding the following into your webpack config will suppress this warning:

  // Here's a demo for using Liquid with webpack
  // https://github.com/harttle/liquidjs/tree/master/demo/webpack
  plugins: [
    new (require('webpack').ContextReplacementPlugin)(/liquidjs/)
  ],

[ilg-ul]

I don’t know, this seems a bit too technical for me.

From a user point of view, the warning thrown by webpack is a concern; you, as the author, can asses that it is not harmful, but me, as the less knowledgeable user whose general strategy is to avoid all warnings, can not, so whenever I see it I’m concerned. 😦

So, if you, together with the webpack team, can find a solution to suppress this warning, it would be great.