gowravshekar / font-awesome-webpack Goto Github PK

View Code? Open in Web Editor NEW

192.0 192.0 49.0 12 KB

font-awesome package for webpack

License: MIT License

JavaScript 96.50% CSS 3.50%

font-awesome-webpack's People

Contributors

Stargazers

Watchers

font-awesome-webpack's Issues

font-awesome-webpack (or dependency) looking up wrong path to file?

Does this path look wrong?

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

There seems to be an extra '/'

The console error is suggesting this is coming from the font-awesome.config.js

If I remove path from the styles in the config, the error doesn't show up but I don't know what else will be impacted.

     styles: {
        'mixins': true,
        'bordered-pulled': true,
        'core': true,
        'fixed-width': true,
        'icons': true,
        'larger': true,
        'list': true,
        'rotated-flipped': true,
        'animated': true,
        'stacked': true
    }

Thoughts? Can include loaders, etc if you think that could be source of the problem

Support

@gowravshekar do you plan on continuing support for this? If not I would be happy to take over support.

Error: Cannot find module 'less'

If I understand the instructions correctly, then all I needed to do was to add to index.js, like:

'use strict';

require('./index.html');
require("./styles.scss");
require("font-awesome-webpack");

But I'm getting the following error:

ERROR in ./~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./font-awesome.config.js
Module build failed: Error: Cannot find module 'less'

I'm not using less and didn't plan to install it. Can you update the instructions for the default simplest possible install?

usage error

Usage:
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/
should be
test: /.woff(2)(?v=[0-9].[0-9].[0-9])?$/
'?' is redundant...

Webpack 4 breaks font-awesome-webpack...

Due to this module depending on an old version of less-loader.

Does anyone know of a fork supporting webpack 4 as this project seems to be defunct?

Module not found: Error: Can't resolve

During building my app I get the following error:

ERROR in .//font-awesome-webpack/index.loader.js!./src/theme/font-awesome.config.prod.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/app/src/theme'
resolve '[object Object],[object Object],[object Object],[object Object]' in '~/app/src/theme'
Parsed request is a module
using description file: ~/app/package.json (relative path: ./src/theme)
after using description file: ~/app/package.json (relative path: ./src/theme)
resolve as module
~/app/src/theme/node_modules doesn't exist or is not a directory
~/app/src/node_modules doesn't exist or is not a directory
~/workspace/salamcinama/node_modules doesn't exist or is not a directory
~/workspace/node_modules doesn't exist or is not a directory
~/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory

Typo in readme

You have written "minetype" as a query-parameter for url-loader. It should be "mimetype".

Can't resolve './font-awesome-styles'

Error: Can't resolve './font-awesome-styles' in '/node_modules/font-awesome-webpack'
Webpack version: 2.1.0-beta.7

'Cannot resolve module' error with clean setup.

I just started a new webpack template project and when I include font-awesome-webpack I get:

ERROR in ./~/font-awesome-webpack/~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./~/eslint-loader!./~/font-awesome-webpack/font-awesome.config.js
Module build failed: Cannot resolve module 'font-awesome/less/stacked.less' in /Users/eptis/webpack_template/node_modules/font-awesome-webpack
 @ /Users/eptis/webpack_template/node_modules/font-awesome-webpack/font-awesome.config.js (line 14, column 0)
 near lines:
   @import "~font-awesome/less/animated.less";
   @import "~font-awesome/less/stacked.less";

 @ ./~/style-loader!./~/font-awesome-webpack/~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./~/font-awesome-webpack/font-awesome.config.js 4:14-172 13:2-17:4 14:20-178

This is my loaders config, anything I'm doing wrong or might this be a less-loader bug?

loaders: [
      { test: /\.(sass)$/, loaders: ['style', 'css', 'sass?indentedSyntax'], include: STYLES_PATH, exclude: /node_modules/ },
      { test: /\.(css)$/, loaders: ['style', 'css?sourceMap'], exclude: /node_modules/ },
      { test: /\.jsx?$/, loaders: ['babel'], exclude: /node_modules/ },
      { 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" }
    ]

can you please update the package.json dependencies specifically css-loader

Hi
The version of css-loaded is very old and contains known vulnerabilities in its dependencies
Regards
Idan.

How to rename the font files.

I try to rename the font files, but failed. It can't to load when I running server. Even it's not send any request for font files.

my config like this:

  module: {
    loaders: [
      ...
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&name=fonts/[hash:6].[ext]&mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&name=fonts/[hash:6].[ext]&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&name=fonts/[hash:6].[ext]&mimetype=application/octet-stream' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&name=fonts/[hash:6].[ext]&mimetype=image/svg+xml' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }
    ]
  }

Font file not found

I have defined my output in webpack config as:

output: {
		path: __dirname + '/dist'
	},

so all font files are also going in there, but when I execute my index.html it says ERR_FILE_NOT_FOUND

Not: Running without webpack-dev-derver, using this in chrome extension

ExtractStyles failure; Unrecognised input; @import "~font-awesome/scss/_variables.scss";

[1] ERROR in ../~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!../~/style-loader!../~/css-loader!../~/less-loader!../~/font-awesome-loader/font-awesome-styles.loader.js!./font-awesome.config.js
[1] Module build failed: ModuleBuildError: Module build failed: Unrecognised input
[1]  @ /Users/kevzettler/projects/tilt/ambassador-web/config/font-awesome.config.js (line 2, column 0)
[1]  near lines:
[1]    @import          "~font-awesome/scss/_variables.scss";
[1]    $fa-font-path: "~font-awesome/fonts/";
[1]    @import "~font-awesome/scss/_mixins.scss";
[1]     at DependenciesBlock.onModuleBuildFailed (/Users/kevzettler/projects/tilt/ambassador-web/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
[1]     at nextLoader (/Users/kevzettler/projects/tilt/ambassador-web/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
[1]     at /Users/kevzettler/projects/tilt/ambassador-web/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
[1]     at context.callback (/Users/kevzettler/projects/tilt/ambassador-web/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
[1]     at /Users/kevzettler/projects/tilt/ambassador-web/node_modules/less-loader/index.js:68:16
[1]     at /Users/kevzettler/projects/tilt/ambassador-web/node_modules/less/lib/less/render.js:26:35
[1]     at /Users/kevzettler/projects/tilt/ambassador-web/node_modules/less/lib/less/parse.js:62:33

Module not found: Error: Can't resolve './font-awesome-styles'

Changing font-awesome-webpack/index.js to "require("style-loader!css-loader!less-loader!./font-awesome-styles.loader!./font-awesome.config.js");" solves the problem.

Should I send a pull req?

Make peer dependency on font-awesome less optimistic

Currently dependency is too optimistic:

https://github.com/gowravshekar/font-awesome-webpack/blob/master/package.json#L32

please fix the version. In fact, I'll make a PR soon-ish doing just that :)

Can get this to work if publicPath is set to a specific folder

Hi,

I could not get this plugin to work. When I set the publicPath value to a specific folder rather than "/" which is required by my application,all the urls within the font-face definition get overwritten causing the fonts not to load. Setting the @fa-path did not help either. Any suggestions on how to solve this would be welcome.

How can I build font-awesome to separate css file?

I tried to build it with provided examples, but no luck.
Here is my webpack config:

var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
    entry: [
       "./src/js/main.js"
    ],
    output: {
        path: __dirname + '/dist',
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [{
            test: /\.styl$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
        },
        { 
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "url-loader?limit=10000&minetype=application/font-woff" 
        },
        { 
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader" 
        },
        { 
            test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
            loader: "file-loader" 
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
};

And font-awesome.config.js:

module.exports = {
    postStyleLoaders: [
        require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}'
    ],
    styles: {
        'mixins': true,
        'bordered-pulled': true,
        'core': true,
        'fixed-width': true,
        'icons': true,
        'larger': true,
        'list': true,
        'path': true,
        'rotated-flipped': true,
        'animated': true,
        'stacked': true
    }
};

Webpack includes some of my node_modules to dependencies and tries to build it.
It looks like:

>webpack
Hash: ef705b39f420a45a2953                                                                             
Version: webpack 1.7.2                                                                                 
Time: 5017ms                                                                                           
   Asset    Size  Chunks             Chunk Names                                                       
 main.js  816319       0  [emitted]  main                                                              
main.css   19411       0  [emitted]  main                                                              
   [0] multi main 40 {0} [built]                                                                       
   [1] ./src/font-awesome.config.js 465 {0} [built]                                                    
   [2] ./src/js/main.js 3497 {0} [built]                                                               
   [3] ./src/js/slider.js 6876 {0} [built]                                                             
    + 193 hidden modules                                                                               

WARNING in (webpack)/~/enhanced-resolve/~/graceful-fs/fs.js                                            
Critical dependencies:                                                                                 
11:12-19 require function is used in a way, in which dependencies cannot be statically extracted       
 @ (webpack)/~/enhanced-resolve/~/graceful-fs/fs.js 11:12-19      
...                                     
ERROR in (webpack)/~/watchpack/~/chokidar/~/readdirp/~/minimatch/test/extglob-ending-with-state-char.js                                  
Module not found: Error: Cannot resolve module 'tap' in C:\workplace\hugo\test\work\node_modules\webpack\node_modules\watchpack\node_modu
les\chokidar\node_modules\readdirp\node_modules\minimatch\test                                                                           
@ (webpack)/~/watchpack/~/chokidar/~/readdirp/~/minimatch/test/extglob-ending-with-state-char.js 1:11-25

I'm new on webpack. So, what am I doing wrong?

TypeError: Cannot read property 'lessLoader' of undefined

node version: v11.10.1
package.json:

{
  "name": "hellowebpack",
  "version": "1.0.0",
  "description": "Learn how to use Webpack",
  "main": "main.js",
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "JayceCao",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "^0.0.5-beta.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "2.3.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.3.1",
    "popper.js": "1.14.7"
  }
}

webpack.config.js:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/app/main.js',
    mode: 'development',
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },

    devServer: {
        host: '0.0.0.0',
        contentBase: './public',
        historyApiFallback: true,
        inline: true
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['less-loader']
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['url-loader?limit=10000&mimetype=application/font-woff']
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: ['file-loader']
            }
        ]
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default']
        }),
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        })
    ],
}

When executing yarn run dev:

yarn run v1.13.0
$ webpack-dev-server
ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Hash: 4278c73b73aacf87d1fe
Version: webpack 4.29.6
Time: 1628ms
Built at: 03/03/2019 5:01:47 PM
     Asset      Size  Chunks             Chunk Names
 bundle.js  2.61 MiB    main  [emitted]  main
index.html  1.21 KiB          [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/main.js 40 bytes {main} [built]
[./app/main.js] 99 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/bootstrap/dist/css/bootstrap.min.css] 1.05 KiB {main} [built]
[./node_modules/bootstrap/dist/js/bootstrap.js] 129 KiB {main} [built]
[./node_modules/font-awesome-webpack/index.js] 105 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:8080] (webpack)-dev-server/client?http://0.0.0.0:8080 8.1 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
    + 23 hidden modules

ERROR in ./node_modules/font-awesome-webpack/font-awesome.config.js (./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js)
Module build failed (from ./node_modules/font-awesome-webpack/node_modules/less-loader/index.js):
TypeError: Cannot read property 'lessLoader' of undefined
    at Object.module.exports (/home/xxxxxx/UNIX_Programming/nodejs/HelloWebpack/node_modules/font-awesome-webpack/node_modules/less-loader/index.js:50:18)
 @ ./node_modules/font-awesome-webpack/font-awesome.config.js (./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/font-awesome-webpack/node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js) 4:14-154
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./app/main.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./app/index.tmpl.html] 1.38 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.
^C

The new version is not published

The new tag is not instalable, may be because you forgot to update the version in package.json (I'm not exactly sure this is now npmjs works) ? I had to install from the master branch in my project.

node_modules font-awesome-webpack problem

I'm trying (two days) to import font awesome with font-awesome-webpack from his repository instructions. I use "react-starter-kit" "webpack" config but I always get the same error:

Error: Cannot find module 'style!css!less!./font-awesome-styles!./font-awesome.config.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/Javi/Documents/Trabajo/www/ayto/node_modules/font-awesome-webpack/index.js:1:1)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
Looks like webpack don´t look up the font-awesome-webpack node_modules. I have changed a lot of configuration options (resolve, resolveLoader-->root, ...) but nothing...

svg loader issue - Invalid tag

I know this topic has been widely discussed but I have yet to find a similar issue or appropriate fix.

Version: "font-awesome-webpack": "0.0.5-beta.2",
All my packages are up to date.

I have imported font-awesome-webpack as the readme directs:

import 'font-awesome-webpack';

I have added the webpack config loader:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls. 
      // the file-loader emits files. 
      { 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" }
    ]
  }
};

I have inline-svgs that work fine with my project and are configurated in webpack with:

 {
      test: /\.svg$/,
      loaders: [
        'babel-loader',
        {
          loader: 'react-svg-loader',
          query: {
            jsx: true,
          },
        },
      ],
    }

When I launch the project it displays the following error msg:

invariant.js:44 Uncaught (in promise) Error: Invalid tag: /f01bf49c263128347d1c47cdc55eff66.svg
    at invariant (invariant.js:44)
    at validateDangerousTag (ReactDOMComponent.js:340)
    at new ReactDOMComponent (ReactDOMComponent.js:367)
    at Object.createInternalComponent (ReactHostComponent.js:41)
    at instantiateReactComponent (instantiateReactComponent.js:79)
    at instantiateChild (ReactChildReconciler.js:44)
    at eval (ReactChildReconciler.js:71)
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)

If I remove the webpack config suggested by font-awesome-webpack, my inline-svgs are displayed fine but the font-awesome icons are replaced by small empty squares.

I have been attempting various different webpack config possibilities without any success, or to delete one config to keep only one but I find myself in teh same scenarios described above. Either I have the console error and no display of the project, or the display is fine apart form the font-awesome that display empty squares.

What am I doing wrong?

Is it right to have webpack projects of all these existing libraries?

I also arrived here after using bootstrap-webpack. It's great that these projects make it easy to add these popular libraries but why is it so hard to add font-awesome to my webpack manually. I wish there was a straight forward guide on how to do this, so the next time I need a library that isn't as popular I know what I'm doing.

Instead I struggle with errors in the console that I don't understand.
Failed to decode downloaded font: ...
OTS parsing error: invalid version tag

Unexpected characters

I have the following errors when webpacking:

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.eot Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:38792-38846
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:38707-38769
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg>
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:39188-39250
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:39092-39154
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:38904-38968
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
Module parse failed: /Users/thomasfetiveau/wksp_herakles/herakles/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js 6:38999-39062
 @ ./node_modules/font-awesome-webpack/node_modules/style-loader!./node_modules/font-awesome-webpack/node_modules/css-loader!./node_modules/less-loader!./node_modules/font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/font-awesome-webpack/font-awesome.config.js
 @ ./node_modules/font-awesome-webpack/index.js
 @ ./build-web.hxml
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./build-web.hxml

Any idea?

While it is working, I am getting the following error in the console on every load...

oing some fake async auth for foo-bar
Failed to decode downloaded font: http://localhost:8080/dist/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
Failed to decode downloaded font: data:application/font-woff;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJub2RlX21vZHVsZXMvYm9vdHN0cmFwL2ZvbnRzL2dseXBoaWNvbnMtaGFsZmxpbmdzLXJlZ3VsYXIud29mZj9mYTI3NzIzMjdmNTVkODE5ODMwMWZkYjhiY2ZjODE1OCI7
OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:8080/dist/14cb42445d5c69e464f66e7954fc9dab.ttf
OTS parsing error: invalid version tag

be great if we can get that fixed

Regards,

Sean

Module build failed: Error: Cannot find module 'less'

in ./node_modules/.0.26.4@css-loader!./node_modules/.2.2.3@less-loader!./node_modules/.0.0.5-beta.2@font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/.0.0.5-beta.2@font-awesome-webpack/font-awesome.config.js
Module build failed: Error: Cannot find module 'less'

 @ ./node_modules/.0.13.2@style-loader!./node_modules/.0.26.4@css-loader!./node_modules/.2.2.3@less-loader!./node_modules/.0.0.5-beta.2@font-awesome-webpack/font-awesome-styles.loader.js!./node_modules/.0.0.5-beta.2@font-awesome-webpack/font-awesome.config.js 4:14-145 13:2-17:4 14:20-151
 @ ./node_modules/.0.0.5-beta.2@font-awesome-webpack/index.js
 @ ./node_modules/.7.1.2@babel-loader/lib!./node_modules/.13.5.0@vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/Personal.vue
 @ ./src/components/Personal.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

remove

less-loader dependency issue

With the newest update to v2.7.3, NPM now warns about how NPM 3+ will no longer automatically install peer dependencies. The top-level application has to manually define them in its own package.json. If this doesn't make enough sense, please try it out on your own on NPM v2.7.3 and read the warnings.

In the context of this repository, this expected breaking change particularly becomes an issue when the top-level application defines font-awesome-webpack and the newest less-loader simultaneously in its package.json. font-awesome-webpack expects less-loader@~0.7.7, which defines a peer dependency of less@^1.5. Meanwhile, the top-level [email protected] defines a peer dependency of less@^2.3.1. Since NPM doesn't allow two versions of the same repository, the top-level application must choose either. But choosing either will break the other peer dependency, because ^1.5 and ^2.3.1 are incompatible.

My proposed solution to this problem is to have font-awesome-webpack expect less-loader@>=0.7.7 instead of @~0.7.7. I just tested this solution in my fork, and things seem to work fine, probably because less-loader's API hasn't changed much.

Please correct me if there's anything wrong.

EDIT: added the word "simultaneously"

Webpack2 and ExtractText plugin

Hey I am using the latest version of webpack2 and the extract text plugin but I can't get it working.

ERROR in ./~/font-awesome-webpack/index.loader.js!./src/client/theme/font-awesome.config.prod.js
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '/Users/fkrauthan/IntellijWorkspace/program-portal/hyperwallet-program-portal/src/client/theme'
 @ ./~/font-awesome-webpack/index.loader.js!./src/client/theme/font-awesome.config.prod.js 1:0-339
 @ multi bootstrap-sass-loader!./src/client/theme/bootstrap.config.prod.js font-awesome-webpack!./src/client/theme/font-awesome.config.prod.js simple-line-icons-webpack!./src/client/theme/simple-line-icons.config.prod.js ./src/client.js

Any ideas what I need to do? I've already tried the below to versions:

fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({
	fallback: "style-loader",
	use: "css-loader?importLoaders=1&sourceMap!less-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true",
});

as well as

fontAwesomeConfig.styleLoader = ExtractTextPlugin.extract({
	fallback: "style-loader",
	use: [
		{
			loader: "css-loader",
			options: {
				modules: true,
				importLoaders: 1,
			},
		},
		{
			loader: "less-loader",
			options: {
				outputStyle: "expanded",
				sourceMap: true,
				sourceMapContents: true,
			},
		},
	],
});

both resulting in that same error message.

Unit Testing: Crashing in Mocha?

I've got this to work great with the browser but I am having problems with Unit Testing.

I am new to unit testing and Mocha. I may be missing something related to that but I am testing React with Redux containers with webpack and Mocha.

The import of font-awesome-webpack will throw me this error.
import 'font-awesome-webpack';
I have tested a few components and containers but any of them using that import line will throw me this error. If I comment the import line out, the code will pass perfectly. The error is below.

Error: Cannot find module 'style!css!less!./font-awesome-styles!./font-awesome.config.js' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (c:\react\weather\node_modules\font-awesome-webpack\index.js:1:1) at Module._compile (module.js:409:26) at Module._extensions..js (module.js:416:10) at Object.require.extensions.(anonymous function) [as .js] (c:\react\weather\node_modules\babel-core\node_modules\babel-register\lib\node.js:152:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (c:/react/weather/src/components/app.js:6:1) at Module._compile (module.js:409:26) at loader (c:\react\weather\node_modules\babel-core\node_modules\babel-register\lib\node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (c:\react\weather\node_modules\babel-core\node_modules\babel-register\lib\node.js:154:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (c:/react/weather/test/components/app_test.js:2:1) at Module._compile (module.js:409:26) at loader (c:\react\weather\node_modules\babel-core\node_modules\babel-register\lib\node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (c:\react\weather\node_modules\babel-core\node_modules\babel-register\lib\node.js:154:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at c:\react\weather\node_modules\mocha\lib\mocha.js:222:27 at Array.forEach (native) at Mocha.loadFiles (c:\react\weather\node_modules\mocha\lib\mocha.js:219:14) at Mocha.run (c:\react\weather\node_modules\mocha\lib\mocha.js:487:10) at loadAndRun (c:\react\weather\node_modules\mocha\bin\_mocha:415:22) at rerun (c:\react\weather\node_modules\mocha\bin\_mocha:443:5) at c:\react\weather\node_modules\mocha\bin\_mocha:451:7 at StatWatcher.<anonymous> (c:\react\weather\node_modules\mocha\lib\utils.js:195:9) at emitTwo (events.js:87:13) at StatWatcher.emit (events.js:172:7) at StatWatcher._handle.onchange (fs.js:1290:10)

I appreciate any help.
Thanks!

does it support webpack2?

Doesn't work with Webpack 2

Currently getting the following error using Webpack 2:

Uncaught Error: Cannot find module "style!css!less!./font-awesome-styles!./font-awesome.config.js"

Module not found: Error: Can't resolve './font-awesome-styles' in '/Users/unyo/ocean/node_modules/font-awesome-webpack'
resolve './font-awesome-styles' in '/Users/unyo/ocean/node_modules/font-awesome-webpack'

less dependency missing

Hey, first of all, awesome project, thank you.
The other problem is that I get `ERROR in Cannot find module 'less'.

Sounds ridiculous, and probably up to less-loader to bring that dependency, but works just fine without your package (though I'm not using less anywhere else).

Thanks in advance, unimonkiez

Error: Can't resolve './font-awesome-styles' when upgrading to [email protected]

If I upgrade from webpack 1.x to 2.1.0-beta.6 I get the error

ERROR in ./~/font-awesome-webpack/index.js
Module not found: Error: Can't resolve './font-awesome-styles' in 'C:\Projects\git\AppCenter\AppCenter.WebApp\Assets\node_modules\font-awesome-webpack'
 @ ./~/font-awesome-webpack/index.js 1:0-72

The error goes away if I edit ...\node_modules\font-awesome-webpack\index.js from

require("style!css!less!./font-awesome-styles!./font-awesome.config.js");

require("style!css!less!./font-awesome-styles.loader!./font-awesome.config.js");

cannot load font-awesome-webpack file

ERROR in ./app/~/font-awesome-webpack/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./font-awesome-styles in /Users/yong/Desktop/ui/app/node_modules/font-awesome-webpack
 @ ./app/~/font-awesome-webpack/index.js 1:0-72

I fixed it by change font-awesome-webpack.loader.js file name to font-awesome-webpack.js

Typo in the README

The url used in the example in the README uses "minetype" instead of "mimetype".

gowravshekar / font-awesome-webpack Goto Github PK

font-awesome-webpack's People

Contributors

Stargazers

Watchers

Forkers

font-awesome-webpack's Issues

Module not found: Error: Can't resolve './font-awesome-styles'

Recommend Projects

Recommend Topics

Recommend Org