mini-css-extract-plugin throws Module parse failed: Unexpected character '@' error on @font-face in css file

Question

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?

Raz Ronen · Accepted Answer · 2020-05-03 19:46:47Z

1

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

{
    test: /\.css$/,
    loaders: ['ThirdLoader', 'secondLoader', 'firstLoader']
}

answered May 3, 2020 at 19:46

Raz Ronen

2,6683 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

volume one Over a year ago

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 (<anonymous>)     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?

Raz Ronen Over a year ago

Are you sure that your @font-face rule is valid? Can you put all the rule here please?

volume one Over a year ago

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 (<anonymous>)     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.

Raz Ronen Over a year ago

What version of minicasextractplugin are you running?

volume one Over a year ago

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!

|

Collectives™ on Stack Overflow

mini-css-extract-plugin throws Module parse failed: Unexpected character '@' error on @font-face in css file

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related