Webpack parsing liquid? Errors, (1.x)

[logandeancall]

Webpack seems to be trying to parse my liquid files? I'm not sure if this is expected or not, if so I'd expect it to not have an issue with standard liquid syntax.

For instance, I have a layout/password.liquid file that's including a script with asset_url
<script src="{{ 'modernizr.custom.js' | asset_url }}"></script>

When I run yarn build, it fails and gives me this error...

WARNING in ./src/layout/password.liquid
Module build failed: module.js:557
    throw err;
    ^

Error: Cannot find module '/Users/logan/code/slate-shopify/veyep/src/layout/modernizr.custom.js'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at /Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:73:24
    at require (/Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:56:33)
    at /Users/logan/code/slate-shopify/veyep/src/layout/password.liquid:1:1494
    at Script.runInContext (vm.js:74:29)
    at Script.runInNewContext (vm.js:80:15)
    at Object.extractLoader (/Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:87:12)
 @ ./src ^\.\/.*\.liquid$
 @ ./node_modules/@shopify/slate-tools/lib/static-files-glob.js

Not sure what's really going on here, if slate is doing something weird or if I am?

[t-kelly]

Yes we are parsing liquid files for asset_urls so we can serve them from localhost when developing. Can you try adding modernizr.custom.js to your src/assets/vendors folder?

[logandeancall]

Did that. Still getting errors...

WARNING in ./src/layout/password.liquid
Module build failed: module.js:557
    throw err;
    ^

Error: Cannot find module '/Users/logan/code/slate-shopify/veyep/src/layout/modernizr.custom.js'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at /Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:73:24
    at require (/Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:56:33)
    at /Users/logan/code/slate-shopify/veyep/src/layout/password.liquid:1:1494
    at Script.runInContext (vm.js:74:29)
    at Script.runInNewContext (vm.js:80:15)
    at Object.extractLoader (/Users/logan/code/slate-shopify/veyep/node_modules/extract-loader/lib/extractLoader.js:87:12)
 @ ./src ^\.\/.*\.liquid$
 @ ./node_modules/@shopify/slate-tools/lib/static-files-glob.js

ERROR in   Error: Child compilation failed:
  Module build failed: module.js:557
      throw err;
      ^
  Error: Cannot find module '/Users/logan/code/slate-shopify/veyep/src/layout/modernizr.custom.js'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - extractLoader.js:73 
    [veyep]/[extract-loader]/lib/extractLoader.js:73:24
  
  - extractLoader.js:56 require
    [veyep]/[extract-loader]/lib/extractLoader.js:56:33
  
  - password.liquid:1 
    /Users/logan/code/slate-shopify/veyep/src/layout/password.liquid:1:1494
  
  
  - Error: Cannot find module '/Users/logan/code/slate-shopify/veyep/src/layout/modernizr.custom.js'
  
  - compiler.js:76 
    [veyep]/[html-webpack-plugin]/lib/compiler.js:76:16
  
  - Compiler.js:300 compile
    [veyep]/[webpack]/lib/Compiler.js:300:11
  
  - Compiler.js:510 applyPluginsAsync.err
    [veyep]/[webpack]/lib/Compiler.js:510:14
  
  - Tapable.js:202 next
    [veyep]/[tapable]/lib/Tapable.js:202:11
  
  - run-compilation.js:49 Compiler.<anonymous>
    [veyep]/[stylelint-webpack-plugin]/lib/run-compilation.js:49:5
  
  - Tapable.js:204 next
    [veyep]/[tapable]/lib/Tapable.js:204:14
  
  - CachePlugin.js:78 Compiler.<anonymous>
    [veyep]/[webpack]/lib/CachePlugin.js:78:5
  
  - Tapable.js:206 Compiler.applyPluginsAsyncSeries
    [veyep]/[tapable]/lib/Tapable.js:206:13
  
  - Compiler.js:507 compilation.seal.err
    [veyep]/[webpack]/lib/Compiler.js:507:11
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [veyep]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:680 self.applyPluginsAsync.err
    [veyep]/[webpack]/lib/Compilation.js:680:19
  
  - Tapable.js:195 Compilation.applyPluginsAsyncSeries
    [veyep]/[tapable]/lib/Tapable.js:195:46
  
  - Compilation.js:671 self.applyPluginsAsync.err
    [veyep]/[webpack]/lib/Compilation.js:671:11
  
  - Tapable.js:202 next
    [veyep]/[tapable]/lib/Tapable.js:202:11
  
  - index.js:257 
    [veyep]/[uglifyjs-webpack-plugin]/dist/index.js:257:13
  
  - index.js:63 _class.runTasks
    [veyep]/[uglifyjs-webpack-plugin]/dist/uglify/index.js:63:9

It looks like it thinks the asset should be living in the same directory as the liquid file that's calling it.

[weotch]

Running into same thing trying to reference a svg from src/assets/svg/. With:

<img src="{{ 'icon-amazon_payments.svg' | asset_img_url }}">

I get the error:

Failed to compile.

/Users/reinhard/Work/Openpath/Site/node_modules/@shopify/slate-tools/lib
Error in ./src/sections/header.liquid
Module not found: Can't resolve './icon-amazon_payments.svg' in '/Users/reinhard/Work/Openpath/Site/src/sections'

 @ multi ./node_modules/@shopify/slate-tools/lib/hot-client.js ./node_modules/@shopify/slate-tools/lib/static-files-glob.js

It does work, though, with:

<img src="{{ '../assets/svg/icon-amazon_payments.svg' | asset_img_url }}">

[t-kelly]

As @weotch mentioned, files need to be referenced relatively. Webpack will take care of spitting out the correct URL for Shopify on build. e.g.

<img src="{{ '../assets/svg/icon-amazon_payments.svg' | asset_img_url }}">

gets transformed into

<img src="{{ 'icon-amazon_payments.svg' | asset_img_url }}">

[t-kelly]

Closing this in preference to #409 and #410. Feel free to continue the conversation here tho!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.