New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with font-awesome #53

Closed
paveleremin opened this Issue Sep 4, 2015 · 19 comments

Comments

Projects
None yet
@paveleremin

paveleremin commented Sep 4, 2015

Here is the errors:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.4.0
Module parse failed: C:\OpenServer\domains\react-hot-boilerplate\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.4.0 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/less-loader!./src/_styles/styles.less 6:92564-92646

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.4.0
Module parse failed: C:\OpenServer\domains\react-hot-boilerplate\node_modules\font-awesome\fonts\fontawesome-webfont.woff?v=4.4.0 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./~/less-loader!./src/_styles/styles.less 6:92677-92758

Here is my conf

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'src')
        }, {
            test: /\.less$/,
            loader: 'style!css!less'
        }, {
            test: /\.(jpe?g|gif|png|eot|svg|woff2|ttf)$/,
            loader: 'file'
        }]
    }
};

any suggestions? Maybe I need some preLoader?

@hoffin

This comment has been minimized.

Show comment
Hide comment
@hoffin

hoffin Sep 5, 2015

The file-loader isn't matching the font url due to the passed arguments, ?v=4.4.0, at the end.

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

hoffin commented Sep 5, 2015

The file-loader isn't matching the font url due to the passed arguments, ?v=4.4.0, at the end.

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
@gwilakers

This comment has been minimized.

Show comment
Hide comment
@gwilakers

gwilakers Oct 28, 2015

Did this end up getting resolved? I am also having this issue, even with using the solution @hoffin suggested. Here are my loaders:

    module: {
        loaders: [
            { test: /(\.js$)|(\.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /(\.jade$)/, exclude: /node_modules/, loader: 'jade-loader' },
            { test: /(\.css$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /(\.styl$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] },
            { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, exclude: /node_modules/, loader: 'url-loader?importLoaders=1&limit=100000' },
            { test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader' }
        ],
    }

And here is the error I am receiving:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /Users/Username/Documents/Project/sub-project/node_modules/font-awesome/css/font-awesome.css Line 7: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
 @ ./client/app.js 83:0-60

gwilakers commented Oct 28, 2015

Did this end up getting resolved? I am also having this issue, even with using the solution @hoffin suggested. Here are my loaders:

    module: {
        loaders: [
            { test: /(\.js$)|(\.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /(\.jade$)/, exclude: /node_modules/, loader: 'jade-loader' },
            { test: /(\.css$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /(\.styl$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] },
            { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, exclude: /node_modules/, loader: 'url-loader?importLoaders=1&limit=100000' },
            { test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader' }
        ],
    }

And here is the error I am receiving:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /Users/Username/Documents/Project/sub-project/node_modules/font-awesome/css/font-awesome.css Line 7: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
 @ ./client/app.js 83:0-60
@thomasgwatson

This comment has been minimized.

Show comment
Hide comment
@thomasgwatson

thomasgwatson Nov 2, 2015

I found this issue in a search for a problem with the same webfont.

However I realised there was a prior error to the one listed above. I am also getting

Cannot find module "font-awesome/fonts//fontawesome-webfont.woff2?v=4.4.0"

Which looks like a path error, not necessarily a problem with the loader.

Thoughts?

thomasgwatson commented Nov 2, 2015

I found this issue in a search for a problem with the same webfont.

However I realised there was a prior error to the one listed above. I am also getting

Cannot find module "font-awesome/fonts//fontawesome-webfont.woff2?v=4.4.0"

Which looks like a path error, not necessarily a problem with the loader.

Thoughts?

@gwilakers

This comment has been minimized.

Show comment
Hide comment
@gwilakers

gwilakers Nov 2, 2015

I don't believe that was the issue I was having, there are no path problems with mine. It ended up being the issue with me excluding node mondules.

gwilakers commented Nov 2, 2015

I don't believe that was the issue I was having, there are no path problems with mine. It ended up being the issue with me excluding node mondules.

@cchamberlain

This comment has been minimized.

Show comment
Hide comment
@cchamberlain

cchamberlain Dec 15, 2015

I think I was getting this issue due to the url being too long as well as the regex being off.

This seems to have fixed it for me although I suspect the regex @hoffin posted would work too:

{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}

cchamberlain commented Dec 15, 2015

I think I was getting this issue due to the url being too long as well as the regex being off.

This seems to have fixed it for me although I suspect the regex @hoffin posted would work too:

{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
@phil-travelbytes

This comment has been minimized.

Show comment
Hide comment
@phil-travelbytes

phil-travelbytes Jan 26, 2016

@cchamberlain - your regex worked for me. Thanks.

phil-travelbytes commented Jan 26, 2016

@cchamberlain - your regex worked for me. Thanks.

@ConAntonakos

This comment has been minimized.

Show comment
Hide comment
@ConAntonakos

ConAntonakos Mar 17, 2016

@cchamberlain - You're awesome. Thank you for the regex.

I definitely did not understand how webpack parses it b/c it looks like you're using two capturing groups while I was attempting to do it with one capturing group...

ConAntonakos commented Mar 17, 2016

@cchamberlain - You're awesome. Thank you for the regex.

I definitely did not understand how webpack parses it b/c it looks like you're using two capturing groups while I was attempting to do it with one capturing group...

@Coffee-Tea

This comment has been minimized.

Show comment
Hide comment
@Coffee-Tea

Coffee-Tea Mar 23, 2016

@cchamberlain - Thanks! Great for me!

Coffee-Tea commented Mar 23, 2016

@cchamberlain - Thanks! Great for me!

@fellz

This comment has been minimized.

Show comment
Hide comment
@fellz

fellz Apr 30, 2016

Yep, this is the solution, thanks a lot ! ))

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

I was googling and tweaking config file about an hour before found this Issue )

fellz commented Apr 30, 2016

Yep, this is the solution, thanks a lot ! ))

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

I was googling and tweaking config file about an hour before found this Issue )

@cchamberlain

This comment has been minimized.

Show comment
Hide comment
@cchamberlain

cchamberlain Apr 30, 2016

@fellz Moving the $|$) end of line outside of the capture group like so /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/ yields the same result with less redundancy.

cchamberlain commented Apr 30, 2016

@fellz Moving the $|$) end of line outside of the capture group like so /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/ yields the same result with less redundancy.

@liuliangsir

This comment has been minimized.

Show comment
Hide comment
@liuliangsir

liuliangsir Sep 21, 2016

I encountered this issue
But according to answer
I has fixed this issue
Thanks

liuliangsir commented Sep 21, 2016

I encountered this issue
But according to answer
I has fixed this issue
Thanks

@GerryFudd

This comment has been minimized.

Show comment
Hide comment
@GerryFudd

GerryFudd Jan 19, 2017

I also had a similar error when I had

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [
    resolve(__dirname, './src/')
  ]
}

I resolved the issue by adding

resolve(__dirname, './node_modules/react-icons/fa/')

to the include array.

GerryFudd commented Jan 19, 2017

I also had a similar error when I had

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [
    resolve(__dirname, './src/')
  ]
}

I resolved the issue by adding

resolve(__dirname, './node_modules/react-icons/fa/')

to the include array.

@Lemmy4555

This comment has been minimized.

Show comment
Hide comment
@Lemmy4555

Lemmy4555 Mar 24, 2017

I'm using webpack 2.2.1^ and i had to use this confguration:

    module: {
        rules: [
            ...
            { 
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: "url-loader?limit=100000"
            }
        ]
    },

Lemmy4555 commented Mar 24, 2017

I'm using webpack 2.2.1^ and i had to use this confguration:

    module: {
        rules: [
            ...
            { 
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: "url-loader?limit=100000"
            }
        ]
    },
@alexsasharegan

This comment has been minimized.

Show comment
Hide comment
@alexsasharegan

alexsasharegan May 4, 2017

I was bundling the scss with my own scss file, so I found that overriding the font path default variable worked for me:

$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/scss/font-awesome";

Also, the loader config listed here has a nice regex test: https://www.npmjs.com/package/font-awesome-webpack-2

alexsasharegan commented May 4, 2017

I was bundling the scss with my own scss file, so I found that overriding the font path default variable worked for me:

$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/scss/font-awesome";

Also, the loader config listed here has a nice regex test: https://www.npmjs.com/package/font-awesome-webpack-2

@alexsasharegan

This comment has been minimized.

Show comment
Hide comment
@alexsasharegan

alexsasharegan May 4, 2017

Well, heads up to anyone else here, that was not the answer for me. That is the path that will be requested for you font assets from the font-awesome css. The link I posted to the webpack loader config did work for me though.

alexsasharegan commented May 4, 2017

Well, heads up to anyone else here, that was not the answer for me. That is the path that will be requested for you font assets from the font-awesome css. The link I posted to the webpack loader config did work for me though.

@inergy

This comment has been minimized.

Show comment
Hide comment
@inergy

inergy Jul 4, 2017

I use the Font Awesome module, and here's what worked for me :

output:
publicPath: '/',

module.rules:

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

using the copy-webpack-plugin and the extract-text-webpack-plugin, add this to plugins:

    new Copy([
      { from: 'node_modules/font-awesome/fonts', to: 'fonts' },
      { from: 'node_modules/font-awesome/css/font-awesome.min.css' },
    ]),
    new ExtractTextPlugin('style.css')

inergy commented Jul 4, 2017

I use the Font Awesome module, and here's what worked for me :

output:
publicPath: '/',

module.rules:

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

using the copy-webpack-plugin and the extract-text-webpack-plugin, add this to plugins:

    new Copy([
      { from: 'node_modules/font-awesome/fonts', to: 'fonts' },
      { from: 'node_modules/font-awesome/css/font-awesome.min.css' },
    ]),
    new ExtractTextPlugin('style.css')
@tamilselvank

This comment has been minimized.

Show comment
Hide comment
@tamilselvank

tamilselvank Mar 11, 2018

Node JS: Install the below command
npm i --save @fortawesome/fontawesome

tamilselvank commented Mar 11, 2018

Node JS: Install the below command
npm i --save @fortawesome/fontawesome

@sivarajh

This comment has been minimized.

Show comment
Hide comment
@sivarajh

sivarajh Mar 13, 2018

@alexsasharegan your solution worked for me! thanks a bunch!

sivarajh commented Mar 13, 2018

@alexsasharegan your solution worked for me! thanks a bunch!

@HaakonH

This comment has been minimized.

Show comment
Hide comment
@HaakonH

HaakonH Sep 11, 2018

@ alexsasharegan - Your solution to change the variable in the font awesome _variables.scss worked for me dude!

old value: $fa-font-path: "../fonts"
new value: $fa-font-path: "~font-awesome/fonts/";

My setup: NG CLI created barebones project that I added font awesome to.

HaakonH commented Sep 11, 2018

@ alexsasharegan - Your solution to change the variable in the font awesome _variables.scss worked for me dude!

old value: $fa-font-path: "../fonts"
new value: $fa-font-path: "~font-awesome/fonts/";

My setup: NG CLI created barebones project that I added font awesome to.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment