Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Error in plugin "sass"


Hello,

When trying to build assets i get the following error. I can not seem to get passed it.
Does anyone have an idea what this might be and how to solve this?


~/Metronic/_keenthemes/tools$ gulp --demo31
Using gulp config file: "../../gulp.config.js"
[23:33:56] Using gulpfile ~/Metronic/_keenthemes/tools/gulpfile.js
[23:33:56] Starting 'default'...
[23:33:56] Starting 'cleanTask'...
[23:33:57] Finished 'cleanTask' after 963 ms
[23:33:57] Starting 'buildBundleTask'...
[23:33:57] Finished 'buildBundleTask' after 260 ms
[23:33:57] Finished 'default' after 1.24 s
Error in plugin "sass"
Message:
node_modules/prism-themes/themes/prismjs.bundle.css
Error: TypeError: null: type 'JSNull' is not a subtype of type 'String'
/home/johanlijffijt/Metronic/_keenthemes/tools/node_modules/sass/sass.dart.js:6352
throw error;
^

Error: TypeError: null: type 'JSNull' is not a subtype of type 'String'
at Object.wrapException (/home/johanlijffijt/Metronic/_keenthemes/too


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)


Hi Johan,

We are currently working on fixing the issue with the "sass" plugin as soon as possible. This error is likely caused by a conflict with the latest version of a 3rd party plugin. Thank you for your patience. We will keep you updated and let you know the workaround.



Hi
I am getting the same error.
The ticket is marked as resolved. Can you tell me what the resolution was? Do i need to pin a package version or something like that?

Cheers



I too am getting this same error when trying to build Keen v3.0.6 with gulp



Hi Johan,

A conflict with the latest version of the dart-sass plugin likely causes this error. Try adding the following code to your package.json:


"resolutions": {
"gulp-dart-sass/sass": "1.70.0"
}


After adding this, remove the node_modules, package-lock.json, and yarn.lock files, and then run yarn and gulp --demo1 again. This should force the use of Dart Sass version 1.70.0 and resolve any conflicts with the latest version of the 3rd party plugin.

Let me know if you need further assistance



Worked like a charm! Thanks!



Hello Faizal,

Got a little further and could gulp localhost

Only the site i am aiming for is not shown.

http://localhost:8080/demo31/

Cannot GET /demo31/

Below is the output i get from the terminal,


(.venv) johan@NB-01160:~/starterkit/_keenthemes/tools$ gulp --demo31
Using gulp config file: "../../gulp.config.js"
[20:46:31] Using gulpfile ~/starterkit/_keenthemes/tools/gulpfile.js
[20:46:31] Starting 'default'...
[20:46:31] Starting 'cleanTask'...
[20:46:31] Finished 'cleanTask' after 82 ms
[20:46:31] Starting 'buildBundleTask'...
[20:46:31] Finished 'buildBundleTask' after 252 ms
[20:46:31] Finished 'default' after 341 ms
(.venv) johan@NB-01160:~/starterkit/_keenthemes/tools$ gulp localhost
Using gulp config file: "../../gulp.config.js"
[20:47:19] Using gulpfile ~/starterkit/_keenthemes/tools/gulpfile.js
[20:47:19] Starting 'localhost'...
[20:47:19] Starting server...
[20:47:19] Finished 'localhost' after 6.9 ms
[20:47:19] Server started http://localhost:8080
[20:47:19] LiveReload started on port 35729
[20:47:19] Running server



Hi Johan Lijffijt

If you are working on the Metronic HTML demo31, the correct folder name should be metronic_html_v8.2.3_demo31.

If you are not working with the Metronic HTML demo31, you may need to download it.

https://devs.keenthemes.com/metronic

Let me know if you need further assistance.



Hello Faisal,

I am trying to make this work under the Django file structure. What folder do you mean I have to change and where to place this?



Hi Johan,

At the moment, Django only has demo1 available. For demo31, you'll need to implement the layout and assets manually. You can use the Layout Builder tool from Metronic to customize the layout and download the partial files. Then, integrate these files into your Django project according to your project's file structure. You can find the Layout Builder tool here:

https://preview.keenthemes.com/metronic8/demo31/layout-builder.html



Faizal,

Are there any instructions on how to get eg Demo 31 working. I placed the files in Django and it seems to be readings all the asset files but in the end i get an empty page.

If you like i can create a new topic for this.

Thanks!

Johan



Hi Johan,

Yes, please create a new topic. In the meantime, here is my quick answer:

In the downloaded layout file, you can find a path comment that looks something like this: `<!--layout-partial:layout/_default.html-->`. This means that it needs to be included within the current file.

In Django, you can import the child file as follows:

{% include "./layout/_default.html" %}


Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(