Running build:production error

sage
1

I receive error messages like this one Module build failed: ModuleNotFoundError: Module not found: Error: Can’t resolve './owl.video.play.png when running yarn build:production. I know that you should add “…/path/to/image” in your scss files but what about with 3rd party packages? Owl carousel is just one of the packages I just used.

2

Hey @aomanansala - as you suspected, the problem is that the relative path of the image included in owl.carousel is off. This situation is referenced in the docs, with a pointer on how to solve it:

  1. Running yarn build:production will fail if 3rd party package’s relative paths are not configured before imported. For example, to load Slick Carousel’s paths add the following line in your common/_variables.scss file:
    /* sage/assets/styles/common/_variables.scss */
// Slick Carousel font path
$slick-font-path: "~slick-carousel/slick/fonts/";
// Slick Carousel ajax-loader.gif path
$slick-loader-path: "~slick-carousel/slick/";

https://roots.io/sage/docs/theme-development-and-building/#3rd-party-packages

To find out what variable to set in _variables.scss, you have two options:

  1. Hope it’s documented somewhere for the package you’re trying to use. (Googling may be the easiest option.)
  2. Check the package’s source.

If you Google the error you got, here’s the first result: https://github.com/OwlCarousel2/OwlCarousel2/issues/2107. This thread discusses the variable you need to set so that the image can be found.

To find out via the package’s source, just search the its SCSS to locate the relevant line. In this case, it’s in _video.scss:

background: url("#{$owl-image-path}owl.video.play.png") no-repeat;

Now that we know what to set, add this to _variables.scss to solve the problem:

$owl-image-path: "~owl.carousel/src/img/";
4 Likes
3

Thank you for your response, I solved my problem from this ticket Debugging `ModuleNotFoundError` encountered while running `yarn build:production`. My question now is, does putting this code

{
//…
“enabled”: {
“sourceMaps”: true
}
}

ALWAYS solve the problem I just encountered?

4

No. If enabling sourceMaps solves your issue, it does so incidentally. The solution @mmirus posted is a much more robust one.

1 Like
5

@aomanansala yes, I would definitely recommend directly fixing the underlying problem by adding the line to your _variables.scss rather than relying on enabling sourceMaps to seemingly fix it.