I have following webpack.config. all works fine, expect less import (import './some.less'). no errors, but also no change in compiled css files.
I used React 16, Babel, typescript
Any idea whats wrong here ?
module: {
rules: [
{
exclude: [
// html-webpack-plugin
/\.ejs$/, /\.html$/, /\.ico$/,
// css-loader
/\.css$/,
// awesome-typescript-loader
/\.json$/, /\.jsx?$/, /\.tsx?$/,
// url-loader
/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/
],
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: [/\.svg$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/],
loader: 'url-loader',
options: {
limit: 8192,
name: 'media/[name].[ext]'
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')()
]
}
}
]
},
{ test: /\.less$/, loaders: ["style-loader", "css-loader", "less-loader"]},
Related
Upgraded my project to latest version and started facing this issue.
And here is my webpack code which I was using and working fine in older version.
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.module\.s(a|c)ss$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: isDevelopment
}
},
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.s(a|c)ss$/,
exclude: /\.module.(s(a|c)ss)$/,
loader: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
},
],
},
{
test: /\.mp3$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
And here is my package.json
All I did was updated my node to latest version ( 16.14.0 ) and updates all the dependency packages to their latest version. And after that my app broke.
Tried different approach, but still wouldn't able to figure out the issue.
Loader can now only be a string. "use" should be used for multiple loader values.
https://github.com/webpack/webpack/issues/11418
My image is not loading in react and I have the following in my webpack config:
use: {
loader: 'url-loader'
},
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
I don't get errors but the image is just displaying alt not working
<img src={require("./Images/start.jpg")} alt="not working" />
My complete config
module: {
rules: [
{
use: {
loader: "babel-loader"
},
test: /\.js$|jsx/,
exclude: /node_modules/
},
{
loader: 'file-loader',
test: /\.(png|jpg|jpeg|gif)$/,
}
]
}
In your webpack config file try using this loader:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'file-loader'
}
]
}
Hope this works for you.
I am getting this error in IE when I try run my react site. It works in all other browsers and I have tried to load babel-polyfill multiple ways.
IE 11 error:
Here is my webpack.dev.config.js file
const path = require('path');
module.exports = {
devtool: "source-map",
mode: 'production',
entry: {
app: ['babel-polyfill', './index.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist')
},
module: {
rules: [{
test: /\.js$/,
enforce: "pre",
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}]
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}]
},
};
I just can't seem to fix this error any help would be appreciated
Apologies, I didn't really post enough information for anyone to fix this as the problem didn't reside in the webpack.dev.config.js file. The problem resided in one of my React files:
publicIP().then(ip =>{
//code here
});
As IE doesn't have support for ES6 the => was causing the error!
I am having issues trying to render images onto the webpage after I bundle everything with webpack. Below is my webpack.config.js file
var path = require('path');
module.exports = {
entry: './src/main/dashboardapp/src/index.js',
devtool: 'sourcemaps',
cache: true,
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js'
},
module: {
loaders: [
{ test: /\.woff2/, exclude: /(node_modules)/, loader: 'ignore-loader' },
{ test: /\.wof/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.ttf/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.svg/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.eot/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.png/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.bmp/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.ico/, exclude: /(node_modules)/, loader: 'ignore-loader'},
{ test: /\.png/, loader: 'file-loader' },
{ test: /\.bmp/, loader: 'file-loader' },
{ test: /\.ico/, loader: 'file-loader' },
{ test: /\.css$/,
exclude: /(node_modules)/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.css$/,
include:
[path.resolve(__dirname, "src/main/dashboardapp/node_modules/react-table/")],
loaders: ['style-loader', 'css-loader']
},
},
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
plugins: ['transform-class-properties']
}
},
{
test: /\.(jpg|png|gif|svg|pdf|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name]-[hash:8].[ext]'
},
},
]
},
]
}
};
here is where I am rendering the image inside of reactjs
<img alt="" src={require('.././images/GreenCheck.bmp')} />
Inside the inspector it looks like this
[object Object]
Right now the images folder is sitting one directory up and then going into images. Any help I would be greatly appreciated it.
You may want to consider importing your image separately. I would re-explain it but I think its easier to look here:
how to import a picture in the same directory.
Hope this helps!
Try importing the image as a variable and use the variable in your render method.
import GreenCheck from '.././images/GreenCheck.bmp';
...
<img src={GreenCheck} />
...
So I'm trying to load images from sass on an app I'm doing but I can't seem to find the right way currently I want to load
$navbar-brand-logo: url('../../../public/images/logo.png') !default;
I keep getting that the image can't be found, this is the sass part of my web pack config:
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react-app'],
cacheDirectory: '.babel-cache'
}
}, {
test: /\.scss$/,
loader: [
'css-hot-loader'
].concat(
ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
)
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.json$/,
/\.s?css$/,
/\.(jpg|png)/
],
loader: 'url-loader',
options: {name: '[name].[ext]', limit: 30000}
}, {
test: /\.(jpg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
options: {name: '[name].[ext]'}
}]
},