Intellij cannot resolve `@fontsource/fira-mono` in new demo project

[jvanderen1]

Describe the bug

I use IntelliJ and when I load the sveltekit base project, I receive an error from my IDE saying that it cannot resolve 'fira-mono' at this line:

@import '@fontsource/fira-mono';

Here is a screenshot:

Reproduction

npm init svelte@next my-app

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Memory: 264.78 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Edge: 95.0.1020.44
    Firefox: 93.0
    Safari: 15.1

Severity

annoyance

Additional Information

No response

[bluwy]

Does the app run and load the proper font? Or is this an IDE-only issue? If it's the latter, there's not much we can do, but you could look around the IntelliJ community to find out why.

[benmccann]

VS Code underlines it as a link. It doesn't produce any error or warning, but fails if you try to click the link to follow it

[jvanderen1]

The app is able to run and load the proper font. It's an error coming from IntelliJ.

[caseyplummer4haliontech]

I'm running WebStorm and I had the same issue. I was able to resolve this.

npm install @fontsource/fira-mono

Then within the IDE, right click on the node_modules folder, "Mark Directory As", and "Resource Root".

After this, I saw the font being downloaded when refreshing the About page, the font for "npm init svelte@next" looked different on the About page, and error went away within the IDE.

As an aside, I would tend to think that SvelteKit should have a reference to @fontsource/fira-mono inside the package.json but IDK if that was intentional.

[Rich-Harris]

Going to close this as it sounds like we have a solution — thanks @caseyplummer4haliontech

As an aside, I would tend to think that SvelteKit should have a reference to @fontsource/fira-mono inside the package.json but IDK if that was intentional.

SvelteKit shouldn't, but the default project template (what you get when you do npm init svelte) does