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} />
...
Related
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!
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]'}
}]
},
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
}
}
}]
}`
When i run build of my react app i got: ERROR in bundle.js from UglifyJs
Unexpected token: name i found this https://github.com/joeeames/WebpackFundamentalsCourse/issues/3
they suggest use babel-reset-es2015 but i need babel-preset-react.
My webpack config:
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractSass = new ExtractTextPlugin({
filename: "style.css",
disable: process.env.NODE_ENV === "development"
});
const config = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {presets:['react']}
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{ test: /\.html$/,
use:[{
loader: 'html-loader',
options: {
minimize:true
}
}]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]},
plugins: [
extractSass
],
node:{
fs: "empty"
}
}
module.exports = config
You can have both, they are not mutually exclusive. Also query has been replaced with options in webpack 2, just as you're using it in your other loaders already. query still exists for compatibility reasons, but you should just use options.
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['es2015', 'react']
}
},