can't import in Astro project
mvolkmann opened this issue · comments
I installed this with npm install canvas-confetti and I see it in the node_modules directory.
But when I import it with
import confetti from "canvas-confetti";I get "Could not find a declaration file for module 'canvas-confetti'".
It works fine if I get it with a script tag.
@mvolkmann , try to install it additionally @types/canvas-confetti
@ulitcos I had already tried that. It didn't change anything for me.
@ulitcos Here is a minimal example that has the issue. This Astro app just contains one page with a button that when clicked calls the confetti function.
https://github.com/mvolkmann/confetti
@ulitcos Here is a minimal example that has the issue. This Astro app just contains one page with a button that when clicked calls the confetti function. https://github.com/mvolkmann/confetti
it's 404
Hi, I have no experience with astro, so I can't be sure that my decision is correct. I have cloned your repository and fixed it as follows:
Changed file "index.astro"
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<button id="my-btn">Press Me</button>
<script>
import "./script.js";
</script>
</body>
</html>
And added new file script.js
import confetti from "canvas-confetti";
function handleClick() {
confetti({
particleCount: 100,
spread: 180,
origin: { y: 1 },
});
}
const myBtn = document.getElementById("my-btn");
if (myBtn) myBtn.addEventListener("click", handleClick);
Thanks so much! I used your approach and simplified it a bit by doing everything inside index.astro. This works for me:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<button id="my-btn">Press Me</button>
<script>
import confetti from "canvas-confetti";
function handleClick() {
confetti({
particleCount: 100,
spread: 180,
origin: { y: 1 },
});
}
const myBtn = document.getElementById("my-btn");
if (myBtn) myBtn.addEventListener("click", handleClick);
</script>
</body>
</html>