Loading Images In sass with webpack - reactjs

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]'}
}]
},

Related

Image not loading in react

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.

Reactjs, Webpack not working on IE 11

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!

Loading images with reactjs and webpack

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

less import not working in react 16

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"]},

Semantic - Unexpected character '#' with Webpack

Error Terminal
ERROR in ./~/semantic-ui-css/semantic.css
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (11:0)
Error Console chrome
Uncaught Error: Cannot find module "semantic-ui-css/semantic.css"
I found the error it's in this line import 'semantic-ui-css/semantic.css'; so i search for this kind of error, i just installed url-loader and keeps the same error, here's my webpack config
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, <--- this delete a lot of errors with semantic, but wont work with "Unexpected character '#'"
loader: 'url-loader?limit=100000'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url-loader',
'sass-loader'
],
exclude: /node_modules/
}
]
}
so, how should i fix this issue? i think it's something with import 'semantic-ui-css/semantic.css'; for something that i dont get it yet, maybe because it dosnt have import (this section) from 'semantic-ui-css/semantic.css';
change this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ],
exclude: /node_modules/
},
to this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ]
}
In other words... remove the exclude.
Another option is to not change as mentioned above... And you probably dont want to assume css modules for all node_modules. I think this way is better... So, instead add an additional rule:
{
test: /\.css$/,
include: path.resolve('node_modules'),
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}
}]
}`

Resources