How to bundle fonts with rollupjs?

Question

I am trying to build my component library with rollup, however it is not liking my font files.

[!] Error: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)
src/fonts/dancing/Dancing_Script-400-vietnamese1.woff2 (1:4)
1: wOF2�"�Z?STAT*�8hello everyone.

I've been trying to solve this problem for the last couple of hours and couldn't find much help on my searches. I tried using the url plugin to solve it but I'm getting other errors with it:

[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.                             
Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks.

here is my rollup config

import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import image from '@rollup/plugin-image'
import url from '@rollup/plugin-url'

const packageJson = require('./package.json')

export default {
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    image(),
    resolve(),
    commonjs(),
    typescript(),
    url({
      limit: 1024 * 10,
      include: ['**/*.woff', '**/*.woff2'],
      emitFile: true,
    }),
  ],
}

I can run the component library in a storybook without problem. does anyone know how I can get this to build with somehow packaging the font files as well?

Answer 1

Not sure if this is too late but I managed to get font files exported using the rollup-plugin-copy module.

Here's my rollup.config.js

import typescript from "rollup-plugin-typescript2";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import image from "@rollup/plugin-image";
import copy from "rollup-plugin-copy";
import pkg from "./package.json";

// Override the base tsconfig.json during build
const overrides = {
    exclude: [
        "**/stories/**",
        "**/__tests__/**",
        "**/__mocks__/**",
        "**/util/**",
    ],
};

export default {
    input: "src/index.ts",
    output: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(), // Add the externals for me. [react, react-dom, styled-components]
        resolve(),
        commonjs(),
        typescript({
            useTsconfigDeclarationDir: true,
            tsconfig: "tsconfig.json",
            tsconfigOverride: overrides,
        }),
        copy({
            targets: [
                // Need to copy the files over for usage
                { src: "src/assets/font", dest: "dist/assets" },
            ],
        }),
        postcss({
            extract: true,
            modules: false,
            plugins: [require("postcss-import")],
        }),
        image(),
        json(),
        terser(),
    ],
};