[HELP] Missing fonts after compile with Webpack

eduardonunesp commented 5 years ago

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

pouyamiralayi commented 5 years ago

did you try using file-loader instead of url-loader for ttf or other font types?

eduardonunesp commented 5 years ago

Same file-loader or url-loader the issue only happens when building the bundle for distribution and run on nxing for example. The issue seems to be related with font-awesome because those items are from there.

eduardonunesp commented 5 years ago

Everywhere on my project where use font-awesome is broken, not sure what is happening right now, unfortunately, I don't have much time to dig deeper on these issues.

Any clue about this issue, the project is just a simple React project that adds GrapesJS using the webpack.

import React from 'react'
import grapesjs from 'grapesjs'
import 'grapesjs-blocks-basic'
import './assets/scss/main.scss'

export default class EditorCanvas extends React.Component {
  componentDidMount() {
    this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '100%',
      plugins: ['gjs-blocks-basic']
    })
  }
}

pouyamiralayi commented 5 years ago

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.

eduardonunesp commented 5 years ago

Great, thanks @pouyamiralayi I'll double check the outputPath this night

artf commented 4 years ago

Definitely an issue with the output path. I close this as it's not an issue with the core itself

eduardonunesp commented 4 years ago

Hey guys thanks for the support, just to report the final status of the issue, it's solved, and wasn't the outputPath, but the utf-8 tag on my index.html file, ok maybe because of the mix of Windows + WSL + Chrome? not sure.

 <html lang="en">
   <head>
       <meta charset="utf-8"/>                                                                                                                                                                                  
       <title>My Editor</title>
   </head>
   <style type="css">

artf commented 4 years ago

Good to know, thanks @eduardonunesp

GrapesJS / grapesjs

[HELP] Missing fonts after compile with Webpack #2320