node_modules font-awesome-webpack problem

Geoide commented 8 years ago

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...

ammark47 commented 8 years ago

+1

thejmazz commented 8 years ago

So, its not just me... +1

Geoide commented 8 years ago

One solution if you use css modules is "composed" individually, like this:

.iconoPlegarArticulos{
      composes: fa fa-toggle-up from '../../../node_modules/font-awesome/css/font-awesome.css';
}

gowravshekar commented 8 years ago

@Geoide, Can you please post your package.json and webpack.config.js.

Geoide commented 8 years ago

Yes...

package.json

{
  "private": true,
  "engines": {
    "node": ">=5.0 <6",
    "npm": ">=3.3 <4"
  },
  "dependencies": {
    "babel-core": "5.8.34",
    "bluebird": "3.1.1",
    "body-parser": "^1.14.2",
    "classnames": "2.2.1",
    "composable-middleware": "^0.3.0",
    "compression": "^1.6.0",
    "connect-mongo": "^1.1.0",
    "errorhandler": "^1.4.2",
    "eventemitter3": "1.1.1",
    "express": "4.13.3",
    "express-jwt": "^3.3.0",
    "express-logger": "0.0.3",
    "express-session": "^1.12.1",
    "fastclick": "1.0.6",
    "fbjs": "0.5.1",
    "flux": "2.1.1",
    "font-awesome": "^4.5.0",
    "front-matter": "2.0.1",
    "google-map-react": "^0.9.3",
    "history": "1.13.1",
    "jade": "1.11.0",
    "jsonwebtoken": "^5.5.4",
    "lodash": "^3.10.1",
    "moment": "^2.10.6",
    "mongoose": "^4.3.4",
    "morgan": "^1.6.1",
    "node-fetch": "1.3.3",
    "normalize.css": "3.0.3",
    "nuka-carousel": "^1.0.1",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "react": "0.14.3",
    "react-addons-css-transition-group": "^0.14.3",
    "react-dom": "0.14.3",
    "react-gsap-enhancer": "^0.2.1",
    "react-routing": "0.0.6",
    "source-map-support": "0.4.0",
    "whatwg-fetch": "0.10.1"
  },
  "devDependencies": {
    "assets-webpack-plugin": "^3.2.0",
    "autoprefixer": "^6.1.2",
    "babel": "^5.8.34",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^5.4.0",
    "babel-plugin-react-transform": "^1.1.1",
    "browser-sync": "^2.10.1",
    "css-loader": "^0.23.0",
    "csscomb": "^3.1.8",
    "del": "^2.2.0",
    "eslint": "^1.10.3",
    "eslint-config-airbnb": "^2.1.1",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-react": "^3.11.3",
    "file-loader": "^0.8.5",
    "gaze": "^0.5.2",
    "git-repository": "^0.1.1",
    "glob": "^6.0.1",
    "isomorphic-style-loader": "0.0.5",
    "jest-cli": "^0.8.2",
    "jscs": "^2.7.0",
    "lodash.merge": "^3.3.2",
    "mkdirp": "^0.5.1",
    "ncp": "^2.0.0",
    "node-sass": "^3.4.2",
    "postcss": "^5.0.13",
    "postcss-import": "^7.1.3",
    "postcss-loader": "^0.8.0",
    "precss": "^1.3.0",
    "react": "^0.14.3",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.2.0",
    "replace": "^0.3.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-middleware": "^1.4.0"
  },
  "jest": {
    "rootDir": "./src",
    "scriptPreprocessor": "../preprocessor.js",
    "unmockedModulePathPatterns": [
      "fbjs",
      "react"
    ]
  },
  "scripts": {
    "lint": "eslint src tools && jscs src tools",
    "csslint": "csscomb src/components --lint --verbose",
    "csscomb": "csscomb src/components --verbose",
    "test": "eslint src && jest",
    "clean": "babel-node tools/run clean",
    "copy": "babel-node tools/run copy",
    "bundle": "babel-node tools/run bundle",
    "build": "babel-node tools/run build",
    "deploy": "babel-node tools/run deploy",
    "start": "babel-node tools/run start"
  }
}

webpack.config

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
import AssetsPlugin from 'assets-webpack-plugin';

const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];
const GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  __DEV__: DEBUG,
};

//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------

const config = {
      output: {
            publicPath: '/',
            sourcePrefix: '  ',
      },

      cache: DEBUG,
      debug: DEBUG,

      stats: {
            colors: true,
            reasons: DEBUG,
            hash: VERBOSE,
            version: VERBOSE,
            timings: true,
            chunks: VERBOSE,
            chunkModules: VERBOSE,
            cached: VERBOSE,
            cachedAssets: VERBOSE,
      },

      plugins: [
            new webpack.optimize.OccurenceOrderPlugin(),
      ],

      resolve: {
            extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
      },

      module: {
            loaders: [
                  {
                        test: /\.jsx?$/,
                        include: [
                              path.resolve(__dirname, '../node_modules/react-routing/src'),
                              path.resolve(__dirname, '../src'),
                        ],
                        loader: 'babel-loader',
                  }, {
                        test: /\.scss$/,
                        loaders: [
                              'isomorphic-style-loader',
                              'css-loader?' + (DEBUG ? 'sourceMap&' : 'minimize&') +
                              'modules&localIdentName=[name]_[local]_[hash:base64:3]',
                              'postcss-loader',
                        ],
                  }, {
                        test: /\.json$/,
                        loader: 'json-loader',
                  }, {
                        test: /\.txt$/,
                        loader: 'raw-loader',
                  }, {
                        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'url-loader?limit=10000',
                  }, {
                        test: /\.(eot|ttf|wav|mp3|pdf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                        loader: 'file-loader',
                  },
            ],
      },

      postcss: function plugins(bundler) {
            return [
                  require('postcss-import')({ addDependencyTo: bundler }),
                  require('precss')(),
                  require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
            ];
      },
};

//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------

const clientConfig = merge({}, config, {
      entry: './src/client.js',
      output: {
            path: path.join(__dirname, '../build/public'),
            filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
      },

      // Choose a developer tool to enhance debugging
      // http://webpack.github.io/docs/configuration.html#devtool
      devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
      plugins: [
            new webpack.DefinePlugin(GLOBALS),
            new AssetsPlugin({
                  path: path.join(__dirname, '../build'),
                  filename: 'assets.js',
                  processOutput: x => `module.exports = ${JSON.stringify(x)};`,
            }),
            ...(!DEBUG ? [
                  new webpack.optimize.DedupePlugin(),
                  new webpack.optimize.UglifyJsPlugin({
                        compress: {
                              screw_ie8: true,
                              warnings: VERBOSE,
                        },
                  }),
                  new webpack.optimize.AggressiveMergingPlugin(),
            ] : []),
      ],
});

//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------

const serverConfig = merge({}, config, {
  entry: './src/server.js',
  output: {
    path: './build',
    filename: 'server.js',
    libraryTarget: 'commonjs2',
  },
  target: 'node',
  externals: [
    /^\.\/assets$/,
    function filter(context, request, cb) {
      const isExternal =
        request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) &&
        !request.match(/^react-routing/) &&
        !context.match(/[\\/]react-routing/);
      cb(null, Boolean(isExternal));
    },
  ],
  node: {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin(GLOBALS),
    new webpack.BannerPlugin('require("source-map-support").install();',
      { raw: true, entryOnly: false }),
  ],
});

export default [clientConfig, serverConfig];

mduleone commented 8 years ago

@Geoide So you solved it by not following the pattern described in the repo and removing require('font-awesome-webpack') from webpack.config?

gowravshekar commented 8 years ago

font-awesome-webpack package is missing in your package.json. Please follow the instructions provided in readme. Install necessary webpack loaders: less-loader, style-loader, css-loader, url-loader, file-loader.

mduleone commented 8 years ago

@gowravshekar I'm having the same issue as @Geoide when I'm running webpack-dev-server --hot --inline to dev locally. Here is my webpack.config:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var FontAwesome = require('font-awesome-webpack');
var config = {
    entry: [
        path.resolve(__dirname, 'src/entry.js')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel'],
            },
            {
                test: /\.(scss|sass)$/i,
                loader: "style!css!sass"
            },
            {
                test: /\.(less)$/i,
                loader: "style!css!less"
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file?name=images/[name].[ext]"
            },
            {
                test: /\.(mp4|ogg)$/i,
                loader: "file?name=videos/[name].[ext]"
            },
            {
                test: /\.(mp3)$/i,
                loader: "file?name=audio/[name].[ext]"
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: "file?name=fonts/[name].[ext]"
            },
            {
                test: /\.jsx?$/,
                loader: "eslint-loader",
                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"
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.css', '.scss', '.sass']
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Test',
            template: 'src/index-template.html',
            inject: 'body'
        }),
    ],
    eslint: {
        configFile: './.eslintrc'
    },
    devServer: {
        port: 4000
    }
};

module.exports = config;

I have all of the dependencies installed (font-awsome-webpack, font-awesome, less-loader, style-loader, css-loader, file-loader, and url-loader), but until I get this working, I'm not saving them as project dependencies, so they're not in my package.json :).

Here's my stack-trace:

module.js:329
    throw err;
    ^

Error: Cannot find module 'style!css!less!./font-awesome-styles!./font-awesome.config.js'
    at Function.Module._resolveFilename (module.js:327:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
>>  at Object.<anonymous> (/sites/frontend/node_modules/font-awesome-webpack/index.js:1:1)
    at Module._compile (module.js:399:26)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
>>  at Object.<anonymous> (/sites/frontend/webpack.config.js:4:19)
    at Module._compile (module.js:399:26)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)

You can see from the two lines I highlighted, the error is happening at 4:19 of webpack.config, or

var FontAwesome = require('font-awesome-webpack');

And that's breaking at 1:1 of font-awesome-webpack/index.js, or

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

Do you have any thoughts on what could be causing this issue? We're working with webpack@1.12.19, if it makes a difference.

Thanks!

gowravshekar commented 8 years ago

require('font-awesome-webpack'); should be present in your entry file and not in webpack.config.js. Please go through the readme doc for configuration.

mduleone commented 8 years ago

Ahh, I see. That's not clear in the readme. For now, I'll blame it on my lack of sleep. :)

Thanks for the quick help!

Edit: Moving the require to the entry file worked. Just wanted to make sure I stated that!

gowravshekar commented 8 years ago

Added a line in readme to clear any further confusion.

Geoide commented 8 years ago

Yes font-awesome-webpack is missing because it no worked. I've had to use font-awesome directly in order to work correctly (with css-modules).

deepakmani commented 8 years ago

Gorav, I don't know what is up with my config. Please take a look when you can.

ERROR in Cannot find module 'less' @ ./~/font-awesome-webpack/~/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-144

"devDependencies": {
    "angular-mocks": "^1.3.7",
    "browserify": "^13.0.0",
    "chai": "^3.5.0",
    "chai-http": "^2.0.1",
    "css-loader": "^0.23.1",
    "expect": "^1.6.0",
    "expect.js": "^0.3.1",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.8.5",
    "font-awesome-webpack": "0.0.4",
    "karma": "^0.13.21",
    "karma-browserify": "^5.0.2",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^0.2.2",
    "karma-jasmine": "^0.3.7",
    "karma-mocha": "^0.2.2",
    "karma-simple-browserify-preprocessor": "0.0.2",
    "less-loader": "^2.2.3",
    "mocha": "^2.4.5",
    "serial-mocha": "0.0.4",
    "should": "^8.2.2",
    "sinon": "^1.14.1",
    "style-loader": "^0.13.1",
    "superagent": "^1.2.0",
    "supertest": "^1.2.0",
    "url-loader": "^0.5.7",
    "watchify": "^3.7.0",
    "webpack": "^1.13.0"
  }

I've added css-loader, less-loader, style-loader, url-loader and file-loader in addition to font-awesome-webpack. Also I have used require('font-awesome-webpack' in entry.js

daumann commented 8 years ago

@deepakmani if it says "Cannot find module 'less'" you probably should add less (npm install less --save)

tomasswood commented 8 years ago

@gowravshekar

Added a line in readme to clear any further confusion.

You should also add this to the NPM page: https://www.npmjs.com/package/font-awesome-webpack

My issue is resolved though. Thanks!

iwarner commented 7 years ago

I use include on all loaders

Yeah make sure in the SASS / CSS you use css-loader

  // Fonts
  {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    include: [
      Path.resolve(__dirname, 'source/assets/fonts'),
      Path.resolve(__dirname, 'node_modules/font-awesome/fonts'),
      Path.resolve(__dirname, 'node_modules/flag-icon-css/flags')
    ],
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
  }

  {
    test: /\.scss$/,
    include: [
      Path.resolve(__dirname, 'source/assets/stylesheets')
    ],
    use: extractSass.extract({
      use: [{
        // loader: 'raw-loader'
        loader: 'css-loader'
      },
      {
        loader: 'sass-loader'
      }],
      // use style-loader in development
      fallback: 'style-loader'
    })
  },

jainabhishek14 commented 6 years ago

I am getting the below error:

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

My package.json file looks like:

{
  "name": "promotional_material",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@amcharts/amcharts3-react": "^3.0.3",
    "axios": "^0.16.2",
    "bootstrap": "^3.3.7",
    "dotenv": "4.0.0",
    "font-awesome": "^4.7.0",
    "normalize.css": "^7.0.0",
    "promise": "7.1.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.1",
    "react-bootstrap-table": "^3.4.6",
    "react-datepicker": "^0.52.0",
    "react-dev-utils": "^3.0.2",
    "react-dom": "^15.6.1",
    "react-error-overlay": "^1.0.9",
    "react-fontawesome": "^1.6.1",
    "react-image-slider": "^0.1.0",
    "react-list": "^0.8.6",
    "react-masonry-component": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.10",
    "react-waypoint": "^7.0.4"
  },
  "scripts": {
    "validate": "eslint .",
    "setup": "npm install && cp templates/pre-commit.tpl .git/hooks/pre-commit",
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.js?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).js?(x)"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-react-app": "^1.0.5",
    "eslint-loader": "1.7.1",
    "eslint-plugin-flowtype": "2.34.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.5.1",
    "file-loader": "^0.11.2",
    "font-awesome-webpack": "0.0.5-beta.2",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "gulp-watch": "^4.3.11",
    "less-loader": "^4.0.5",
    "postcss": "^6.0.14",
    "postcss-flexbugs-fixes": "3.0.0",
    "postcss-fontpath": "^1.0.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-nested": "^3.0.0",
    "postcss-simple-vars": "^4.1.0",
    "resolve-url-loader": "^2.2.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  entry: [
    'font-awesome-webpack!./font-awesome.config.js',
    './src/index.js',
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      fontPath: path.resolve(__dirname, 'src/assets/fonts'),
    },
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js|\.jsx$/,
      exclude: /node_modules/,
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      include: path.join(__dirname, 'src', 'assets', 'styles'),
      use: [
        { loader: 'style-loader', options: { sourceMap: true } },
        { loader: 'resolve-url-loader' },
        { loader: 'css-loader', options: { sourceMap: true, importLoaders: 2 } },
        { loader: 'postcss-loader', options: { sourceMap: true } },
      ],
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        mimetype: 'application/font-woff',
      },
    },
    {
      test: /\.(ttf|eot|svg|png|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader',
    }],
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    compress: true,
    port: 3000,
  },
};

fabiobusnellosilvershark commented 6 years ago

I'm getting ugly to try to implement the font-awesome-webpack, follow the error

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: TypeError: Cannot read property 'lessLoader' of undefined at Object.module.exports (c:\projects\bot2\node_modules\font-awesome-webpack\node_modules\less-loader\index.js:50:18) @ ./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 @ ./src/index.js

webpack.config:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //font-awesome
      { 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" }
    ]
  }
}```

package.json:

```{
  "name": "bot2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "build:watch": "webpack -w",
    "build:prod": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.1",
    "webpack-cli": "^2.1.3"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "bcrypt": "^2.0.1",
    "body-parser": "^1.18.2",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "cookie-parser": "^1.4.3",
    "dropzone": "^5.4.0",
    "express": "^4.16.3",
    "font-awesome-webpack": "0.0.5-beta.2",
    "form-data": "^2.3.2",
    "jquery": "^3.3.1",
    "knex": "^0.14.6",
    "moment": "^2.22.1",
    "multer": "^1.3.0",
    "mysql": "^2.15.0",
    "nodemailer": "^4.6.4",
    "popper.js": "^1.14.3",
    "ws": "^5.1.1"
  }
}

gowravshekar / font-awesome-webpack

node_modules font-awesome-webpack problem #13