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

Having a list of js errors when integrating html lading page in demo55 with symfony6


received a list of js errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'defaults')
at 66565 (plugins.bundle.6c2a0ad5.js:2:558049)
at o (runtime.6c30001d.js:1:143)
at plugins.bundle.6c2a0ad5.js:2:2363029
at o.O (runtime.6c30001d.js:1:494)
at plugins.bundle.6c2a0ad5.js:2:2363049
at r (runtime.6c30001d.js:1:1370)
at plugins.bundle.6c2a0ad5.js:2:43
scripts.bundle.58e5d437.js:2
Uncaught TypeError: Cannot read properties of undefined (reading 'init')
at Object.init (scripts.bundle.58e5d437.js:2:738)
at 56021 (scripts.bundle.58e5d437.js:2:940)
at o (runtime.6c30001d.js:1:143)
at scripts.bundle.58e5d437.js:2:93043
at o.O (runtime.6c30001d.js:1:494)
at scripts.bundle.58e5d437.js:2:93063
at r (runtime.6c30001d.js:1:1370)
at scripts.bundle.58e5d437.js:2:43
Uncaught ReferenceError: KTUtil is not defined
at 65310 (landing.564a0378.js:1:124)
at o (runtime.6c30001d.js:1:143)
at landing.564a0378.js:1:187
at r (runtime.6c30001d.js:1:1370)
at landing.564a0378.js:1:56
pricing.general.42fedf20.js:1
Uncaught ReferenceError: KTUtil is not defined
at 23976 (pricing.general.42fedf20.js:1:774)
at o (runtime.6c30001d.js:1:143)
at pricing.general.42fedf20.js:1:1798
at o.O (runtime.6c30001d.js:1:494)

I just created a new symfony6 empty project with webencore enabled.

// webpack.config.js
/*
* ENTRY CONFIG
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('plugins.bundle', './assets/plugins.bundle.js')
.addEntry('scripts.bundle', './assets/scripts.bundle.js')
.addEntry('app', './assets/app.js')
.addEntry('fslightbox.bundle', './assets/plugins/fslightbox.bundle.js')
.addEntry('typedjs.bundle', './assets/plugins/typedjs.bundle.js')
.addEntry('landing', './assets/landing.js')
.addEntry('pricing.general', './assets/pricing/general.js')

// css
.addEntry('landing.header', './assets/styles/landing.header.css')
.addEntry('colors', './assets/styles/colors.css')

// images
.copyFiles({
from: './assets/media',
})

// and then in my base.html.twig
<body id="kt_body" data-bs-spy="scroll" data-bs-target="#kt_landing_menu" class="bg-white position-relative app-blank">
<script> let defaultThemeMode = "light"; let themeMode; if ( document.documentElement ) { if ( document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if ( localStorage.getItem("data-bs-theme") !== null ) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); } </script>
{% block body %}{% endblock %}

{# load js at bottom as lazy loading #}
{% block javascripts %}
{{ encore_entry_script_tags('plugins.bundle') }}
{{ encore_entry_script_tags('scripts.bundle') }}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>

// in landing.html.twig
{% extends 'base.html.twig' %}
{% block javascripts %}
{{ parent() }}

{{ encore_entry_script_tags('fslightbox.bundle') }}
{{ encore_entry_script_tags('typedjs.bundle') }}
{{ encore_entry_script_tags('landing') }}
{{ encore_entry_script_tags('pricing.general') }}
{% endblock %}

and run yarn build, the command finished successfully.
and go to the page, all those js erros popped out in browser console


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


Hi,

To clarify, are you working on a new Symfony project from scratch or if you are using the Metronic Symfony theme?

Thanks



I am working on a brand new symfony6 project with metronic html landing page in demo55 not the symfony one inside metronic



Hi,

Maybe the problem is that you are adding the plugins.bundle.js file as an entry in your webpack.config.js file, but this file is already bundled by webpack. Could you please try to addEntry with this file instead?

/tools/webpack/plugins/plugins.js

This file contains the original plugins that are not bundled yet. Maybe this will solve the errors. Let me know if it works.

Thanks



any updates on this?



tried, and it didn't work, js errors still popped out. even though I copied this plugins.bundle.js directly into /public/build folder, and source it directly in base.html.twig by <script> tag, and it still didn't work.



by html script tag, and it still didn't work



I also tried to see if symfony demo is working by the following steps:
1. open symfony demo folder directly
2. run composer install
3. run yarn install
4. run symfony server:start
5. go to http://127.0.0.1:8000/
and also there was a list of js errors, GET chrome-extension://invalid/ net::ERR_FAILED. and none of menu items worked.



Hi,

Sorry for the late reply.

We are currently preparing Metronic v8.1.9 with Bootstrap 5.3.0 stable version and lots of bug fixes and improvements. This new update should be released by Tuesday or Wednesday. Could you please give it try to use the new version hopefully your issues will be fixed.

If you need any further help please do let us know.

Regards.


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