Nuxt.js: SASS: tilde package reference is broken on SSR

[ChristianKlee]

Version

v2.1.0

Reproduction link

https://github.com/ChristianKlee/nuxt-fonts-test

Steps to reproduce

Install nuxt-fonts-test and switch between my master (Nuxt 2.1) and nuxt-142 (Nuxt 1.4.2) branch to see the error.

What is expected ?

The font of a NPM Module (in this example node_modules/test/Charmonman.ttf) are included and after a nuxt generate in the dist folder

What is actually happening?

Error Message "SyntaxError: Invalid or unexpected token" on nuxt and nuxt generate.

Additional comments?

Since Nuxt 2.0 it isn't possible to use an NPM package as a style library with fonts.
The reproduction link based on create-nuxt-app with the only addition to include a global sass file and a custom NPM module "test" with a font.
If I comment line 3 of screen.scss everything runs fine, without the included font-family.
On all version before Nuxt 2.0 it was possible to include such a NPM module.
Based on the release notes, I can't identify this as a feature/different implementation but maybe I overlook something.

_{This bug report is available on Nuxt community (#c7917)}

[manniL]

~This does work when using ~/test/... (with a slash after the tilde).~

Example CSB: https://codesandbox.io/s/zl7464jo53

[cmty[bot]]

This bug-report has been cancelled by @manniL.

[ChristianKlee]

No, this only "fixes" the error message but you could write what ever you want (e.g. ~/test/Test.tff) and there will be no error. The font file is not used at all from the node package.

[manniL]

@ChristianKlee Please check out the linked CSB.

Be aware that the default template overrides the font used (in pages/index.vue, I removed it in my CSB)

[ChristianKlee]

Yes the font changed but not to the right font. In your CSB link the default browser font is used.
Here is a screenshot of a the correct font using my nuxt-142 branch:

[manniL]

You are right! Will investigate.

[manniL]

@ChristianKlee Temporary workaround: src: url("../node_modules/test/Charmonman.ttf");

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[manniL]

Not stale

[shuaqiu]

I also encountered this problem when I migrated the version from 1.4 to 2.x. It seems that it can be temporarily solved by the above method.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[clarkdo]

@ChristianKlee Could you try to upgrade to 2.4.2 and test it again? I tried it based on your repo, it works fine with:

@font-face {
    font-family: 'Charmonman';
    src: url('~test/Charmonman.ttf');
}

// copy Charmonman.ttf to node_modules/test/ Then
yarn upgrade nuxt@^2.4.2
yarn dev

Another tip:

Due to css-loader 2.0, use ~assets instead of ~/assets for alias in <url> CSS data type, e.g., background: url("~assets/banner.svg") (PR #3741)

Doc: https://nuxtjs.org/guide/assets#webpack
Release Note: https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0

[manniL]

@clarkdo Can still reproduce it via https://codesandbox.io/s/zl7464jo53 :|

[clarkdo]

It seemed there is an error in rendering, I'll look into it