1

I am using mini-css-extract-plugin with Webpack 4 like such:

module: {
        rules: [
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('webfonts/[name].[hash:7].[ext]')
    }
  }
},
            {
                test: /\.css?$/,
                use: [
                    'css-loader',
                  {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        sourceMap: !isProduction,
                        // only enable hot in development
                        hmr: !isProduction,
                        // if hmr does not work, this is a forceful method.
                        reloadAll: true,
                    },
                  },

                ]
              },

For some reason I am getting an error due to a @font-face import in my css file. The error is like this:

ERROR in ./src/assets/css/site.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '@' (77: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
| @font-face { font-family: "MySans"; font-style: normal; font-weight: 800; src: local('☺'),

Why is mini-css-extract-plugin tripping on @font-face and is there a fix?

volume one
  • 6,800
  • 13
  • 67
  • 146

1 Answers1

1

Switch your loaders order please, should be 'css-loader' at the bottom

{
    test: /\.css$/,
    loaders: ['ThirdLoader', 'secondLoader', 'firstLoader']
}
Raz Ronen
  • 2,418
  • 2
  • 14
  • 26
  • Thanks! But this now causes a different error of `ERROR in ./src/assets/css/site.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: Cannot convert undefined or null to object at hasOwnProperty () at module.exports.module.exports (C:\Site\node_modules\css-loader\dist\cjs.js!S:\Site\src\assets\css\site.css:115:25) ` When I go to line `115` in `site.css` it is still the @font-face line that is causing the error -- any ideas? – volume one May 03 '20 at 20:17
  • Are you sure that your @font-face rule is valid? Can you put all the rule here please? – Raz Ronen May 04 '20 at 03:22
  • Its not even a `@font-face` issue. Just for a test I deleted everything out of my css file and ran the build. But the error I get is the same saying `ERROR in ./src/assets/css/ashappyas.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): TypeError: Cannot convert undefined or null to object at hasOwnProperty () at module.exports.module.exports (C:\Site\node_modules\css-loader\dist\cjs.js!C:\Site\src\assets\css\site.css:115:25) `. There is nothing in the css file anymore. There is nothing at 115 anymore. – volume one May 04 '20 at 11:21
  • What version of minicasextractplugin are you running? – Raz Ronen May 04 '20 at 11:28
  • 1
    Figured out what the problem is, but not why it is causing a problem. It is a Babel Core-JS problem. If I comment out the `babel-loader` configuration in Webpack that goes `useBuiltIns : "usage", corejs : { version : "3", }` then it builds fine. But obviously Babel is now not doing its job. I'll raise a different question! – volume one May 04 '20 at 11:31
  • Actual question https://stackoverflow.com/questions/61578788/core-js-3-babel-results-in-mini-css-extract-plugin-error – volume one May 04 '20 at 19:51