1

here is my code:

{
      test: /\.ttf$/,
      use: [
        {
          loader: 'ttf-loader',
          options: {
            name: './font/[hash].[ext]',
          },
        },
      ]
  }

and tried with,

 {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
      'file-loader',
    ],
  },
]
 },

still gives this problem:

ERROR in ./src/client/assets/fonts/blacky.TTF 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) @ ./src/client/pages/Home/Homepage.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss) 4:36-76 @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss

I am aiming to convert my react app into an ssr app for firebase.

entire config file::

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins:
 [
   new MiniCssExtractPlugin({
     filename:"[name].css",
    chunkFilename:"[id].css"}),
  ],
 entry: {
  "app": "./src/client/index.js",
 },
 module: {
  rules: [
       {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
        exclude: /node_modules/,
      },
   {
    test: /\.js$/,
    loader: "babel-loader",
    exclude: /node_modules/,
   },
      {
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
  },
  {
    test: /\.ttf$/,
    use: [
      {
        loader: 'ttf-loader',
        options: {
          name: './font/[hash].[ext]',
        },
      },
    ]
}
]
 },
 output: {
  path: __dirname+"/functions/Views/public",
  filename: "bundle.js",
 },
}

(other problem that wasnt mentioned but still persits/ a lot more of the cmd error log)

r{color:#121416!important}.text-body{color:#212529!important}.text-muted{color:#6c757d!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.text-decoration-none{text-decoration:none!important}.text-break{word-wrap:break-word!important}.text-reset{color:inherit!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #adb5bd;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px!important}.container{min-width:992px!important}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #dee2e6!important}.table-dark{color:inherit}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#dee2e6}.table .thead-dark th{color:inherit;border-color:#dee2e6}}
| /*# sourceMappingURL=bootstrap.min.css.map */
 @ ./src/client/pages/Header/navbar.js 15:0-46
 @ ./src/client/pages/Header/Header.js
 @ ./src/client/pages/about.js
 @ ./src/client/App.js
 @ ./src/client/index.js
Child mini-css-extract-plugin node_modules/style-loader/dist/cjs.js!node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/client/pages/Home/Homepage.module.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 1.04 KiB {0} [built]
    [2] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss 404 bytes {0} [built]
    [5] ./src/client/assets/fonts/blacky.TTF 284 bytes {0} [built] [failed] [1 error]
        + 3 hidden modules

    ERROR in ./src/client/assets/fonts/blacky.TTF 1:0
    Module parse failed: Unexpected character '' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./src/client/pages/Home/Homepage.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss) 4:36-76
     @ ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/pages/Home/Homepage.module.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! AllianceCareLTD@0.2.0 webpack: `webpack-cli --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the AllianceCareLTD@0.2.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2020-10-15T13_04_02_184Z-debug.log
Alexander Hemming
  • 753
  • 1
  • 6
  • 28
  • 1
    Your initial configuration is correct with ttf-loader, Can you post your webpack file also in description, in addition to it have you configured appropriate loader's for scss file's? – Dolly Oct 14 '20 at 16:35
  • Step 1: [don't use ttf, or otf, or eot, or svg](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). Only use woff2, with woff as IE11 fallback. It's not 2012 anymore. – Mike 'Pomax' Kamermans Oct 14 '20 at 22:46

1 Answers1

1

A bit late but still worth to mention for anybody facing this issue. I was also spending some time with this topic and trying out many different things. And as I see all these inspired discussions in different forums, I can imagine that many new programmers are struggling with this topic. In the end I found a solution which worked for me. I hope it works for you, too.

FIRST I use an outputPath for my fonts. It'll duplicate the font files, and place them into whatever directory in the "dist" folder depending on what we specify using outputPath - e.g. a path called "fonts". This is required for our fonts to be referenced correctly within your style file; for example scss or .js if you use styled-components and create a 'createGlobalStyle'. It also defines the relative paths for the output content which will be prefixed to every url request. In my case I use "fonts/". Example: If I implement font family yxz.woff, the path for the user in the frontend will be localhost:3000/fonts/yxz.woff in my case. It has nothing to do with my real folder structure in my project (see next paragraph).

// Webpack setting
{
        test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },

The font yxz.woff is placed directly in my public folder in the root directory. Any other placement can also be used (e.g. src/styles/fonts/yxz.woff) and works in my case. Figure it out for your project.

font webpack placement

In the next step I define and load the yxz font with a .js file with styled-components. But scss works also in my case. Important here! You have to import every source (woff, woff2, ttf) separately and give it an unique name. See my following example

import { createGlobalStyle } from "styled-components";
import yxzWoff2 from "../../../public/yxz.woff2";
import yxzWoff from "../../../public/yxz.woff";

export default createGlobalStyle`
    @font-face {
          font-family: 'yxz';
          src:  local('yxzWoff2'),
          url("fonts/yxz.woff2") format('woff2');
          src:  local('yxzWoff'),
          url("fonts/yxz.woff") format('woff');  
          font-weight: normal;
          font-style: normal;
          font-display: auto;
        }    
`;

As you can see, I use the same paths as defined with webpack via outputPath. Still it is directly placed in the public folder. You can of course apply the above principle for ttf, too. However, in my case I mainly use woff and woff2.

I meanwhile have a quite large collection of fonts in the fonts folder structure in my project and it works. I hope this solves your issue and saves you and others here time.

Paul M.
  • 183
  • 7