Webpack 4: WOFF, WOFF2, SVGs failed to load

Hemadri Dasari

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4 Module parse failed: Unexpected character '' (1:4) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.

Here is my Webpack 4 loaders config:

module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.(eot|ttf)$/,
                loader: "file-loader",
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    }

Please suggest a solution to me.

Subhanshu Pandey

You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this

   {test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}

and import images like import img from './image.svg'

Github : https://github.com/webpack-contrib/url-loader

NPM : https://www.npmjs.com/package/url-loader

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Font rendering in Chrome (woff2) - after load font family doesn't want to change

woff2, woff and ttf files not loaded and gave 400 error

Proper MIME type for .woff2 fonts

Merging different .woff2 files into one

fonttools convert ttf to woff2

View contents of a .woff2 font file

Hosting Font Awesome Yourself: Do we need all formats eot, svg, ttf, woff, woff2?

Bootstrap - about fonts files (.eot .svg .ttf .woff and .woff2) roles and usages

FileReader.readAsDataURL() reader result is empty for font files such as .ttf, .woff, and .woff2

Next.js with Custom Express Server gives wrong content type for woff and woff2 files

How to Cache fonts (.woff, woff2, .ttf, .eot) in Wildfly 10?

woff2 file can't be accessed on apache webserver

How to import at .woff2 font and use it in a sass setting?

does it make sense to server-push woff2?

Bootstrap woff2 font not getting loaded correctly

Convert font in WOFF2 format to something else

WOFF2 - HTTP Content-Type response header suggestion

CORS Issue with woff2 fonts behind CDN in Chrome

Why is FontAwesome downloading loads of different versions of woff2 files?

How to properly load .eot and .woff files with Babel?

GET error Glyphicon-halflings-regular.ttf/woff/woff2 with custom Twitter Bootstrap theme from Lavish

Failed to load scss with webpack

How can I only use Latin subset with Google Fonts WOFF2 files?

stylus.url() base64 encodes woff2 font

How to specify the character set used by the page in the HTTP header for WOFF2?

How do I convert a woff2 font to ttf using fonttools in Python?

"Refused to apply style from because its MIME type "('font/woff2')" is not a supported stylesheet MIME type, and strict MIME checking is enabled"

webpack not loading svgs

How do I load SVGs directly in my React component using webpack?