CODEWITHSUNDEEP
webpack
Chris
Chris

Reputation: 2267

Load Font-Awesome with Webpack (OTS parsing error: invalid version tag)

My setup is a simple Webpack(v1.) with React, jQuery and Bootstrap (all working nicely). I tried to add font-awesome via npm i font-awesome -S. I suppose the best solution would be to load it automatically. I only get a console error in the browser saying the following for each font file:

Failed to decode downloaded font: http://localhost:3000/static/fontawesome-webfont.ttf?v=4.7.0
OTS parsing error: invalid version tag

This is my setup:

webpack.config

...
output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: 'http://localhost:3000/static/'
},
module: {
  loaders: [
    ....
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff"
    },
    { 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    }
  ]
},
...

app.scss

$fa-font-path: 'http://localhost:3000/static';
@import '../../node_modules/font-awesome/scss/font-awesome.scss';

... and then I import the scss file in the main App.js file.

As you can see, I am using file-loader and url-loader for the fonts.

It would be nice to see a list of all files that are served in the static-url, is there a way to output that information in the console? Its hard to see even where the problem is. If the fonts aren't loaded at all or just at the wrong url.

Upvotes: 0

Views: 4071

Answers (2)

Andy Lorenz
Andy Lorenz

Reputation: 3084

After trying lots of other approaches, and lots of re-installs and checking my meteor and NPM configurations, I have just fixed the issue by clearing out browsing data from Chrome (cached images and files) and then refreshing the page. So worth a try if you have the same issue and can't seem to resolve it

Upvotes: 1

Crenshinibon
Crenshinibon

Reputation: 187

I was wrestling with a very similar problem just recently: using font-awesome (the npm package version) in my Meteor app. It turned out, that the font files weren't loaded/served at all.

Answering the second part of your question: the font files should be visible in the "Sources" tab (in Chrome developer tools), if they are loaded correctly.

The first part is trickier, and I've no solution, just a hint: Since your font files don't seem to get loaded, I would conclude that webpack doesn't "see" the font files. Either "node_modules" is excluded somewhere in your configuration, or the font-awesome npm package doesn't export the font files properly. Or something in between.

My problem was similar: the static content from within the "node_modules" folder isn't acknowledged whatsoever by Meteor's internal bundler. So my workaround was to create an npm "postinstall" script in package.js that copies the font files to an appropriate location: "PATH_OF_MY_APP/public/fonts" in my case, so that the bundler could pick them up.

Upvotes: 0

Related Questions