@font-face SyntaxError when using typeface-nunito-sans and @poi/plugin-vue-static

Question

I'm using Poi, @poi/plugin-vue-static and typeface-nunito-sans to generate a static app using Vue. The problem is the build fails in a Syntax Error:

project/node_modules/typeface-nunito-sans/index.css:2
@font-face {
^
SyntaxError: Invalid or unexpected token

The whole app works correctly in dev server though. Is this because of the static site generation? How can I fix it?

Relevant code in main.ts:

// Client-side only libraries
import 'typeface-nunito-sans';

Sounds like a webpack problem. Maybe check this thread: https://stackoverflow.com/questions/45489897/load-fonts-with-webpack-and-font-face — Flink, Oct 09 '19 at 14:54

score 0 · Accepted Answer · answered Oct 12 '19 at 17:11

0

Fixed this by adding process.client check:

if (process.client) {
  require('typeface-nunito-sans');
}

This prevents CSS from being processed in server-side code

answered Oct 12 '19 at 17:11

brux

29
7

@font-face SyntaxError when using typeface-nunito-sans and @poi/plugin-vue-static

1 Answers1