Failed to resolve entry for package "material-symbols"

Question

After installing material-symbols using npm the following message is shown in the console

My steps

1. Run in the console npm i material-symbols@latest
2. Add import 'material-symbols'; at the top of the __layout.svelte file
3. Add <span class="material-symbols-outlined">face</span> to the component file
4. Open console
5. Error message is shown

Error message

Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json.

Answer 1

As was able to run this package by changing the approach. I replaced step 2 with CSS imports.

Instead of

// __layout.svelte

import 'material-symbols';

...

I created 'app.css' file in the src folder. Added @import 'material-symbols'; at the top of its file. Imported app.css into __layout.svelte.

/* app.css */

@import 'material-symbols';

// __layout.svelte 

- import 'material-symbols';
+ import '../app.css';

...

It works