I'm having an issue with my webpack application not loading fonts with type: 'asset/resource' honestly, it won't load many things that use asset/resource type but sticking to one issue :)
Here's my webpack.config.js file
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: path.join(__dirname, './react-client/src', 'index.jsx'),
output: {
path: path.resolve(__dirname, './react-client/dist'),
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Project-Atelier',
filename: 'index.html',
template: './react-client/src/index.html',
}),
new MiniCssExtractPlugin(),
],
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)?/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
};
And my css file where I'm trying to import the font (the font I'm importing is indeed in the current folder. I placed it there to test.)
@font-face {
font-family: 'Roboto-Regular';
src: url('./Roboto-Black.ttf') format('truetype');
}
body {
font-family: 'Roboto-Regular';
font-size: 3rem;
}
Here's some details on my dependencies. All should be up to date.
// package.json
...
"dependencies": {
"axios": "^0.26.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"styled-components": "^5.3.5",
"uniqid": "^5.4.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@testing-library/dom": "^8.12.0",
"babel-loader": "^8.2.4",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"express": "^4.17.3",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"jest": "^27.5.1",
"mini-css-extract-plugin": "^2.6.0",
"nodemon": "^2.0.15",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
...
I'm thinking it has something to do with babel but I could be wrong. EVERYTHING is working but importing fonts.I even tried changing css within the file I'm showing and changes worked. But not for fonts. An interesting observation I found is that I can't even add images with webpack using type: 'asset/resource' I have to use use: 'url-loader'
Been at this for a couple hours and still looking for answers.
Here's the error!
Figured out my problem... in module.rules for babel-loader
on the line that has test: /\.(js|jsx)?/ rewriting it as test: /\.(js|jsx)$/ fixed the issue. It was just a single character that messed it up ? when it should have been a $.
