YVES assets not build in shop-suite


#1

Hello everyone,

in the demoshop before our configuration works well, but the workflow changed in the shop-suite. i got a problem while building the yves frontend assets. the proccess abort with the following error:

ERROR in ./src/Pyz/Yves/ShopUi/Theme/default/styles/basic.scss
Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

[...]

ERROR in ./src/Pyz/Yves/ShopUi/Theme/default/fonts/custom-icons.ttf?asdfasdfasdfasdf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??postcss!./node_modules/sass-loader/lib/loader.js??ref--5-3!./node_modules/sass-resources-loader/lib/loader.js??ref--5-4!./src/Pyz/Yves/ShopUi/Theme/default/styles/basic.scss 7:8036-8089

For me, it looks like Oryx try to implement the icon-font into the (s)css file. i already try a lot to fixed that, without making progress. can someone help or is there any documenation for shop-suite? i only found that quite small docs for suite-frontend-builder but it didnt help me. I already found out that the error is related to the fileloader. but it should be correct configured by default.


#2

Hello,

It feels like npm and/or node migration was not completed. Can you do the following:

  1. Check node version.
  2. Check npm version.
  3. Run npm install.
  4. Try building assets.

Regards,
The Forum Team


#3

Hey volodymyr, thanks for your help.

after updating node to v10.4.1 and npm to v6.1.0 i got the same error.

how to create a individuel config for webpack? in the demoshop i have created the webpack.config.js at assets/Yves/Theme/build. how to that for the suite? i am not sure if i have unterstand the workflow right.


#4

Hi! I’m Alessandro, frontend architect @ Spryker.

So, the new suite env runs on node 8.x and npm 5.6.x at least, due to some es6 implementation that would be lacking otherwise.
In your case, though, the problem seems to be related to webpack configuration, as you pointed out.
In the new suite we do not provide any file loader for fonts as long as we do not use any.
When, in scss, webpack finds a url(font.tff) file, it tries to load it but no loader is configured and the build fails.

Oryx, in the new suite, is not relatet to yves anymore, just zed.
Latest master suite contains the full code for webpack and can be fully customised.
We provide a basic implementation for asset management (copy from a folder to the public one) but you can implement your own following webpack documentation.

My advices are:

  • integrate a file loader for fonts into your existing oryx configuration;
  • or update to our last suite and get the new webpack configuration to update.

Unfortunately, without seeing the actual code, is a bit hard for me to understand the issue on a code level, but feel free to share some and let me help you in a better way.

Documentation for our new suite is undergoing and will be published asap.

Let me know.
Alessandro