@font-face SyntaxError: Invalid or unexpected token

[RitchieP]

Describe the bug

I currently have an ElectronJS + ReactJS app. I'm also using the Chakra UI kit for my front end. When following the documentation on how to use fonts in the Chakra UI documentation, I'm encountering this error.

Uncaught C:\Users\user\Documents\Project Intern\project-intern\node_modules\@fontsource\lato\index.css:2
@font-face {
^

SyntaxError: Invalid or unexpected token
    at new Script (node:vm:100:7)
    at createScript (node:vm:265:10)
    at Object.runInThisContext (node:vm:313:10)
    at wrapSafe (node:internal/modules/cjs/loader:1083:15)
    at Module._compile (node:internal/modules/cjs/loader:1130:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1229:10)
    at Module.load (node:internal/modules/cjs/loader:1044:32)
    at Module._load (node:internal/modules/cjs/loader:885:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at o._load (node:electron/js2c/renderer_init:2:3109)

Specifically, I'm trying to use the Lato font. I'm not sure if is it because of the package or my project's setup. My project was set up following this guide on MongoDB.. If you guys need more information from me please feel free to ask for it. I appreciate any help in advance!

Steps to Reproduce

1. Follow the steps to setup an Electron + React app with the link provided
2. Follow the steps to download fonts from npm in Chakra UI documentation with the link provided

Expected behavior

No response

Version

4.5.10

OS

No response

Browser

No response

Additional context

No response

[ayuhito]

Your CSS is getting imported into your generated JavaScript which is leading to that error. You need to ensure you've configured css-loader in your Webpack config correctly, which should hopefully address this issue.

[RitchieP]

Would you be able to provide a snippet of code on how to config this? I have no idea how to config it in the craco.config.js file. Currently, I have my craco.config.js file like this

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
};

[ayuhito]

I've never worked with Craco or have even worked with Webpack in a long time so I'm not sure what the correct answer is, but perhaps using the mini-css-extract-plugin would work out of the box.

A quick search on GitHub for a project that uses Craco and Fontsource led me to this config. That may be useful to you.

[RitchieP]

Thank you so much for the help! I'll check it out and give it a try