Cannot read properties of undefined (reading 'info')
antinmaze opened this issue · comments
What version of astro-icon are you using?
v1.9.2
Astro Info
with the v1.9.2 version, the info command does not exist:
% npx astro help
astro v1.9.2 Build faster websites.
astro [command] [...flags]
Commands
add Add an integration.
build Build your project and write it to disk.
check Check your project for errors.
dev Start the development server.
docs Open documentation in your web browser.
preview Preview your build locally.
sync Generate content collection types.
telemetry Configure telemetry settings.
Global Flags
--config <path> Specify your config file.
--root <path> Specify your project root folder.
--site <url> Specify your project site.
--base <pathname> Specify your project base.
--verbose Enable verbose logging.
--silent Disable all logging.
--version Show the version number and exit.
--help Show this help message.
If this issue only occurs in one browser, which browser is a problem?
chrome, Firefox
Describe the Bug
After installing astro-icon and creating a /src/icons/plus-circle.svg file
I have the following code:
`---
const { sectionName, sectionUrl, sectionItems } = Astro.props;
import { Icon } from 'astro-icon/components'
<div class="pb-3">
<h1 class="flex pb-3 text-3xl">{sectionName}
<a class="add-item text-gray-700 dark:text-white" href={sectionUrl}>
<Icon name="plus-circle" />
</a>
</h1>
</div>
I have the follkowing issue executing 'npm run dev';
11:55:10 [build] output target: static
11:55:10 [build] Collecting build info...
11:55:10 [build] Completed in 10ms.
11:55:10 [build] Building static entrypoints...
[astro-icon] Could not load virtual:astro-icon (imported by node_modules/astro-icon/components/Icon.astro): Cannot read properties of undefined (reading 'info')
error Could not load virtual:astro-icon (imported by node_modules/astro-icon/components/Icon.astro): Cannot read properties of undefined (reading 'info')
TypeError: Could not load virtual:astro-icon (imported by node_modules/astro-icon/components/Icon.astro): Cannot read properties of undefined (reading 'info')
at logCollections (file:///Users/toto/Workspace/toto-astro/node_modules/astro-icon/dist/vite-plugin-astro-icon.js:46:12)
at Object.load (file:///Users/toto/Workspace/toto-astro/node_modules/astro-icon/dist/vite-plugin-astro-icon.js:30:17)
at async file:///Users/toto/Workspace/toto-astro/node_modules/rollup/dist/es/shared/rollup.js:21919:98
at async Queue.work (file:///Users/toto/Workspace/toto-astro/node_modules/rollup/dist/es/shared/rollup.js:22858:32)
> astrolus@0.0.1 dev
What's the expected result?
Not having this message "Cannot read properties of undefined (reading 'info')" which is displayed in the browser
Link to Minimal Reproducible Example
https://stackblitz.com/edit/astro-f8ywpn?file=src%2Fpages%2Findex.astro
upgrading astro to astro v4.7.0 solved this issue using
npx @astrojs/upgrade
I still get this:
Warning: ReactDOMServer.renderToStaticNodeStream() is deprecated. Use ReactDOMServer.renderToPipeableStream() and wait to `pipe` until the `onAllReady` callback has been called instead.
11:02:34 [ERROR] Cannot find module 'virtual:astro-icon' imported from '/home/username/Desktop/....github.io/node_modules/astro-icon/components/Icon.astro'
Stack trace:
at nodeImport (file:///home/username/Desktop/....github.io/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:55067:25)
at eval (/home/username/Desktop/....github.io/node_modules/astro-icon/components/Icon.astro:4:37)
Adding it to integrations solved it.
import icon from "astro-icon";
export default defineConfig({
integrations: [icon()],
});But this remains:
Warning: ReactDOMServer.renderToStaticNodeStream() is deprecated. Use ReactDOMServer.renderToPipeableStream() and wait to `pipe` until the `onAllReady` callback has been called instead.