Missing fonts after compile with Webpack
using outputPath option, you specify the output folder where webpack will emit files. and based on you saying:running with webpack-dev-server everything looks fine project is loaded on another folder it seems to be an output path problem. sorry if this was not helpful.
Read full answer below ↓Question
The project is using webpack to compile the project in order to distribute as bundle, it's a kind of plugin using GrapesJS as editor, everything works fine except the fonts loaded by GrapesJS are missing, when running with webpack-dev-server everything looks fine, but when building with webpack and try to run on a simple server (different folder using dist files) it looks like:

And now with webpack-dev-server on project directory

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const environment = process.env.NODE_ENV || 'development'
module.exports = {
entry: ['regenerator-runtime/runtime', './src/index'],
devtool: 'source-map',
output: {
path: __dirname + '/dist',
filename: 'plugin-editor.js',
library: ['PluginEditor'],
libraryTarget: 'umd'
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
limit: 10000
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(environment)
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
})
]
}
Also worth to mention that I have copied the src/styles folder from the project GrapesJS with the intuit of better customize colors and details. And all fonts generated on /dist folder are loaded on index.html when loaded on another folder. The project is loaded on another folder using command python -m SimpleHTTPServer 3000
Answers (3)
using outputPath option, you specify the output folder where webpack will emit files. and based on you saying:
running with webpack-dev-server everything looks fine project is loaded on another folder
it seems to be an output path problem. sorry if this was not helpful.
Great, thanks @pouyamiralayi I'll double check the outputPath this night
did you try using file-loader instead of url-loader for ttf or other font types?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3412
Auto save is working partially and stops working after inserting text
hello guys. I am using this awesome project for a production app written with React.js, So I integrated it inside my app. everything works...
Issue #3699
Cell hovering randomly displaces from actual cell
Hi! I'm using grapesJs for e-mail editing in a project in my company, with Newsletter plugin. Everithing works very well, except for this b...
Issue #3184
[Question] Click issue on integrating grapesjs-style-bg plugin to the web builder
I am using GrapesJS version (0.16.27) and have integrated grapesjs-style-bg plugin to the editor. The functionality works perfectly fine. B...
Issue #952
Responsive email template builder using Grapes js
@ateshuseyin @artf - Thanks for the great plugin. We started to use Grapes js in our project as an editor for building responsive email tem...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.