gowravshekar / font-awesome-webpack Goto Github PK
View Code? Open in Web Editor NEWfont-awesome package for webpack
License: MIT License
font-awesome package for webpack
License: MIT License
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
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" }
]
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
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.
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'
[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
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
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 :)
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
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?
does it support webpack2?
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");
to
require("style!css!less!./font-awesome-styles.loader!./font-awesome.config.js");
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...
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?
You have written "minetype" as a query-parameter for url-loader. It should be "mimetype".
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.
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' }
]
}
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.
font-awesome-webpack
as the readme directs:import 'font-awesome-webpack';
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" }
]
}
};
{
test: /\.svg$/,
loaders: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
jsx: true,
},
},
],
}
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)
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?
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
Error: Can't resolve './font-awesome-styles' in '/node_modules/font-awesome-webpack'
Webpack version: 2.1.0-beta.7
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?
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?
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...
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
Hi
The version of css-loaded is very old and contains known vulnerabilities in its dependencies
Regards
Idan.
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.
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
During building my app I get the following error:
ERROR in .//font-awesome-webpack/index.loader.js!./src/theme/font-awesome.config.prod.js/app/src/theme'
Module not found: Error: Can't resolve '[object Object],[object Object],[object Object],[object Object]' in '
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
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!
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"
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
The url used in the example in the README uses "minetype" instead of "mimetype".
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?
@gowravshekar do you plan on continuing support for this? If not I would be happy to take over support.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.