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

New metronic v9 update problem


Hello,

Following the update of Metronic v9, here is the error I get:

22:57:22 [vite] Pre-transform error: Failed to load url /src/main.ts (resolved id: /src/main.ts). Does the file exist? (x3)


Can you please help me?


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


Hi,

If you haven't managed to get a working application by following our integration guide, refer to the Metronic Tailwind React project in our guides repo.

Since it is a public repo, it doesn't contain theme assets. Follow the steps below before running the application:

  1. Open the repo at https://github.com/KeenthemesHub/metronic-tailwind-html-integration.
  2. Download the metronic-tailwind-react folder.
  3. Copy the src folder from the metronic-tailwind-html package and paste it into the metronic-tailwind-react/src directory.
  4. Rename the copied folder to theme. The directory structure should now look like this: metronic-tailwind-react/src/theme.
  5. Copy the media folder from metronic-tailwind-html/dist/assets and paste it into metronic-tailwind-react/public.
  6. Install dependencies with npm install and serve the project with npm run dev.



Please let us know if you need any help on this topic or anything else.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

I already followed those steps...



Hey there, I'm the developer which asked this thread's question.

I've tried cloning your repository and installing metronic 9 by following the given commands on this thread.
I've got now a new error.


uncaught SyntaxError: The requested module "http://localhost:5173/src/theme/app/layouts/demo1.js" doesn"t provide an export named: "default"


There are also several vite warnings about the style, I'll leave a paste here.
https://pastebin.com/gNf6pKFh



HI,

To fix this error in file src/theme/app/layouts/demo1.js you should change


KTDom.ready(() => {
KTLayout.init();
});


to


export default KTLayout;


Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi there.
I encountered in the boilerplate that you gave me once again an error by following the edit that you suggested me. The error is now:

Uncaught ReferenceError: can"t access lexical declaration "KTSticky" before initialization



Hi, the same for me !



Hi,

Do you import KTComponents from theme/core/index?

The correct file you should use is core/index.spa.ts which doesn't contain KTDom.ready code part causing this error.

Regards,
Lauris Stepanovs,
Keenthemes Support Team




import Sidebar from "./components/Sidebar.js";
import Footer from "./components/Footer.js";
import Header from "./components/Header.js";
import KTComponent from "./theme/core/index.spa.ts";
import { useEffect } from "react";
import KTLayout from "./theme/app/layouts/demo1.js";


function App() {
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, []);

return (
<>
<div className="flex grow">
<Sidebar />
<div className="wrapper flex grow flex-col">
<Header />
<main className="grow content pt-5" role="content">
<div className="container-fixed" >
</div>
<div className="container-fixed">
{/* place your content here */}
</div>
</main>
<Footer />
</div>
</div>
</>
)
}

export default App


This is my file which is causing the issue above, KTComponent is imported from core/index.spa.ts



I don't understand why it doesn't work for many people and it works for you???



Hi,

I pushed the update to the examples repo. Can you try the updated example?

It seems like index.ts and index.spa.ts conflicts, to fix the problem after you copied assets delete src/theme/core/index.ts and rename src/theme/core/index.spa.ts to index.ts.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi

May I know which application are you trying to integrate with Metronic?

Thanks



Vite+react


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