I am struggling with setting up my webpack config properly... I tried many things without result. When I am trying to compile bundle I receive loads of errors regarding path to .svg files however the path is ok.
> ERROR in ./client/components/home-page/SocialMediaAuthentication.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './assets/icons/facebook.svg' in '/Users/elegancko/Projects/YesChef/client/components/home-page'
at factoryCallback (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/Compilation.js:276:40)
at factory (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
at resolver (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
at asyncLib.parallel (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3694:9
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:356:16
at iteratorCallback (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:934:13)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:840:16
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:3691:13
at apply (/Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:21:25)
at /Users/elegancko/Projects/YesChef/node_modules/async/dist/async.js:56:12
at resolvers.normal.resolve (/Users/elegancko/Projects/YesChef/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
at onError (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
at /Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at runAfter (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:252:11)
at innerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at next (/Users/elegancko/Projects/YesChef/node_modules/tapable/lib/Tapable.js:249:35)
at resolver.doResolve.createInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
at loggingCallbackWrapper (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/Users/elegancko/Projects/YesChef/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
@ ./client/components/home-page/SocialMediaAuthentication.js 11:0-43
@ ./client/components/home-page/ForgotPasswordForm.js
@ ./client/App.js
@ ./client/index.js
Does anyone know how to fix it? Please find the code of my webpack config below
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractWebpackPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/client/index.html'),
filename: 'index.html',
inject: true
})
const ExtractWebpackPluginConfig = new ExtractWebpackPlugin({
filename: 'index.css',
allChunks: true
})
module.exports = {
entry: './client/index.js',
output: {
path: path.join(__dirname, '/build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './client',
hot: true,
historyApiFallback: true,
port: 3000
},
module: {
loaders: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'standard-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
},
{
test: /\.scss$/,
loader: ExtractWebpackPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.css$/,
exclude: [/\.global\./, /node_modules/],
loader: ExtractWebpackPlugin.extract(
{
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
autoprefixer: true,
minimize: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
})
},
{
test: /\.css/,
include: [/\.global\./, /node_modules/],
loader: ExtractWebpackPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'font/[name].[ext]',
},
},
],
},
{
test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
exclude: /\.glyph.svg/,
use: [
{
loader: 'url-loader',
options: {
limit: 6000,
name: 'image/[name].[ext]',
},
},
],
},
{
test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,
exclude: /\.glyph.svg/,
use: [
{
loader: 'file-loader',
options: { name: 'audio/[name].[ext]' },
},
],
},
]
},
plugins: [
HtmlWebpackPluginConfig,
ExtractWebpackPluginConfig
]
}
I was looking at many tutorials how to set webpack properly to use SASS + CSS modules + Webpack (I am not using Create React App package)
its like looking for svg in different path
And paths
test: /\.(woff|woff2|ttf|eot|glyph|svg)$/,