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

metronic_flask_v8.2.3 - bundling theme assets is not working with Gulp nor Webpack


Hi,

I just got your theme metronic_v8.2.3, but the bundling theme assets is not working with Gulp nor Webpack in Flask.

I am following the guide here: https://preview.keenthemes.com/flask/metronic/docs/getting-started

Errors:

For webpack: npm run build

* First removing "type": "module"

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration[0].entry['js/widgets.bundle'] should be a non-empty array.
-> All modules are loaded upon startup. The last one is exported.

Same for: npm run build --demo1


For gulp: gulp * npx gulp

* "type": "module", back in starterkit\_keenthemes\tools\package.json

Using gulp config file: "../../gulp.config.js"
[15:44:31] Using gulpfile D:\P\metronic_flask_v8.2.3\starterkit\_keenthemes\tools\gulpfile.js
[15:44:31] Starting 'default'...
[15:44:31] Starting 'cleanTask'...
[15:44:31] Finished 'cleanTask' after 6.2 ms
[15:44:31] Starting 'buildBundleTask'...
[15:44:31] Finished 'buildBundleTask' after 48 ms
[15:44:31] Finished 'default' after 56 ms
Error in plugin "sass"
Message:
..\src\sass\style.bundle.css
Error: TypeError: null: type 'JSNull' is not a subtype of type 'String'
D:\P\metronic_flask_v8.2.3\starterkit\_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 (D:\P\metronic_flask_v8.2.3\starterkit\_keenthemes\tools\node_modules\sass\sass.dart.js:2153:43)
at Object._failedAsCheck (D:\P\metronic_flask_v8.2.3\starterkit\_keenthemes\tools\node_modules\sass\sass.dart.js:3633:15)
etc.

Could there be something missing in the guide? Maybe more steps are required to make this work?

Kind regards,

Peter


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 (4)


Hi Peter,

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



Hi Faizal,

Thank you for your reply, unfortunately I did not have enough time, and I might be doing something wrong, but it does not work.

Could you please debug on your side and release updated version? I will download the newest version from https://themeforest.net/downloads.

I am sure it will be okay then.



Hi Peter,

We will update it as soon as possible for the next release update. Thank you.



Hi Faizal,

I'm sorry but the solution you provide did not work for me.
For the moment I cannot use the theme with django because of that.

I look for the gulp-dart-sass/sass library and the verion 1.70.0 does not exist, so I don't understand, the max version gulp-dart-sass is 1.1.0.

Can you tell me how to make it works?


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  :(