I am new to react and I am trying to set a background image with scss in react. However, I get an error in webpack:
ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss
Module not found: Error: Can't resolve '../../images/simon-rae-732820-unsplash.jpg' in 'D:\TravelPlannr\src\styles'
# ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/styles/styles.scss 7:735-788
# ./src/styles/styles.scss
# ./src/app.js
# multi (webpack)-dev-server/client?http://localhost:8585 ./src/app.js
Below is the config file for webpack:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[hash]-[name].[ext]'
}
}]
}
]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8585,
historyApiFallback: true
}
};
Below is the scss for the same:
.header-container{
height: 85%;
background-image: url('../../images/simon-rae-732820-unsplash.jpg')
}
I have spent hours looking for the solution but nothing worked.
Please help.
Thanks in advance!
Related
I'm pretty new to react and am having some issues with web pack. All I'm trying to do is import a SVG file into my react project. I'm lost as to what is causing this as it doesn't give me much info about it. I would be grateful if anyone knows what's going on, thank you in advance lol.
Error code in console:
ERROR in ./src/img/flag/united-kingdom.svg
Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
at validateString (internal/validators.js:120:11)
at Object.relative (path.js:437:5)
at Object.loader (C:\Users\Callum\Desktop\sites\csgo\mern\client\node_modules\file-loader\dist\index.js:78:72)
# ./src/components/header.js 12:0-74
# ./src/components/app.js
# ./src/app.js
My webpack file (webpack.common.js)
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
vender: [
'react', 'react-dom', 'redux',
'react-redux', 'react-router-dom',
'axios', 'prop-types']
},
output: {
path: path.resolve(__dirname, '../docs/'),
filename: "js/[name].[chunkhash].js"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: path.resolve(__dirname, 'node_modules'),
loader: 'babel-loader'
},
{
test: /\.s?css$/,
exclude: path.resolve(__dirname, "node_modules"),
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},'sass-loader'],
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name][hash].[ext]',
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=/fonts/[name].[ext]'
},
{
test: /\.(svg)$/,
exclude: /fonts/, /* dont want svg fonts from fonts folder to be included */
use: [
{
loader: 'svg-url-loader',
options: {
noquotes: true,
},
},
],
},
]
},
plugins: [
new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html')}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: "manifest.js",
chunks: ['vender']
}),
new ExtractTextPlugin({
filename: 'styles/style.css'
}),
]
}
Import code (literally all that references it):
import { ReactComponent as UKFlag } from '../img/flag/united-kingdom.svg'
Just had this problem, changed my file-loader in package.json from 6.2.0 to 6.1.1 and it fixed it
I am trying to integrate https://www.npmjs.com/package/react-date-range
When I import css files, it gives loader issue.
My webpack file and error message is shown below. Any help regarding this problem is appreciated
Webpack config File
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');
var ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
var config = require('./../config');
var BASE_PATH = process.env.BASE_PATH || '/';
module.exports = {
name: 'client',
devtool: 'cheap-eval-source-map',
target: 'web',
mode: 'development',
node: { fs: 'empty' },
externals: [
{ './cptable': 'var cptable' },
{ './jszip': 'jszip' }
],
entry: {
app: [path.join(config.srcDir, 'index.js')]
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js',
path: config.distDir,
publicPath: BASE_PATH
},
resolve: {
modules: [
'node_modules',
config.srcDir
]
},
plugins: [
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true,
allowAsyncCycles: false,
cwd: process.cwd(),
}),
new HtmlWebpackPlugin({
template: config.srcHtmlLayout,
inject: false,
chunksSortMode: 'none'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'process.env.BASE_PATH': JSON.stringify(BASE_PATH),
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractCssChunks(),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
// Modular Styles
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
}
},
{ loader: 'postcss-loader' }
],
exclude: [path.resolve(config.srcDir, 'styles')],
include: [config.srcDir]
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
}
},
{ loader: 'postcss-loader' },
{
loader: 'sass-loader',
options: {
includePaths: config.scssIncludes
}
}
],
exclude: [path.resolve(config.srcDir, 'styles')],
include: [config.srcDir]
},
// Global Styles
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
include: [path.resolve(config.srcDir, 'styles')]
},
{
test: /\.scss$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
includePaths: config.scssIncludes
}
}
],
include: [path.resolve(config.srcDir, 'styles')]
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
}
},
// Files
{
test: /\.(jpg|jpeg|png|gif|svg|ico)$/,
loader: "file-loader",
options: {
name: "static/[name].[ext]",
}
}
]
},
devServer: {
hot: true,
contentBase: config.serveDir,
compress: true,
historyApiFallback: {
index: BASE_PATH
},
host: '0.0.0.0',
port: 3000
}
}
Following are the error messages, Seems like it can find the css files but cannot parse it, Let me know if anybody can help.
Error Message :
ERROR in ./node_modules/react-date-range/dist/styles.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .rdrCalendarWrapper {
| box-sizing: border-box;
| background: #ffffff;
# ./app/index.js 8:0-42
# multi ./app/index.js
ERROR in ./node_modules/react-date-range/dist/theme/default.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .rdrCalendarWrapper{
| color: #000000;
| font-size: 12px;
# ./app/index.js 10:0-49
# multi ./app/index.js
Since you are loading the css file from node_modules package but you set css loader with include only your source path. I suggest to either remove that:
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
},
Or put more package into your list, it's up to you:
{
test: /\.css$/,
use: [
ExtractCssChunks.loader,
'css-loader',
'postcss-loader'
],
include: [path.resolve(config.srcDir, 'styles'), /node_modules/\react-date-range /]
},
The Application (build in "react": "15.4.1" ) has some dependent modules.Dependent Modules are referred in package.json : "git+https://git.xyz.net/myApp/ui/myModule.ui.git#v0.0.4",.
myModule has same logical entities.
Now I applied lazy loading on myModule using "react-loadable": "4.0.3",.
I am getting below chunks when i run npm start on myModule:
0.my-Module-ui.js
1.my-Module-ui.js
2.my-Module-ui.js
my-Module-ui.js
webpack file for myModule :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'my-Module-ui.js',
// chunkFilename: '[name].js',
libraryTarget: 'umd',
publicPath: '/',
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /\.(json)$/,
loaders: [
'json-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets: ["es2015" , "stage-0", "react"],
plugins: ["transform-runtime"],
}
},
{
test: /\.(sass|less|css)$/,
loaders: ['style-loader', 'css-loader', 'less-loader']
},
// Load images
{ test: /\.jpg/, loader: "url-loader?limit=10000&mimetype=image/jpg" },
{ test: /\.gif/, loader: "url-loader?limit=10000&mimetype=image/gif" },
{ test: /\.png/, loader: "url-loader?limit=10000&mimetype=image/png" },
{ test: /\.svg/, loader: "url-loader?limit=10000&mimetype=image/svg" },
// Load fonts
{ test: /\.woff(\?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" },
{ test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
]
},
// plugins: [
// new webpack.optimize.UglifyJsPlugin({comments: false, compress: { warnings: false }, screw_ie8: true})
// ]
};
Webpack version in package.json : "webpack": "^3.0.0",
Issue:
when I load the main app,My Main App home screen has some widget which uses the dependent modules doesn't gets loaded but we see error in console.
2.my-Module-ui.js:1 Uncaught SyntaxError: Unexpected token <
my-Module-ui.js:109 Uncaught (in promise) Error: Loading chunk 2 failed.
at HTMLScriptElement.onScriptComplete (my-Module-ui.js:109)
I have tried everything since yesterday...Please help me out on this ,Please let me know if any others details are required
Here's the error I'm receiving:
ERROR in ./src/components/CustomHeader.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (17:10)
15 | class CustomHeader extends Component {
16 |
> 17 | state = {activeItem: 'home'};
| ^
18 |
19 | handleItemClick = (e, {name}) => this.setState({activeItem:name});
20 |
Her is my webpack.config.js file:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: "cheap-eval-source-map",
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js",
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.jsx$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ],
include: path.join(__dirname, 'src'),
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader',
}],
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
hot: true,
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
hash: true,
})
]
}
.babelrc file:
{
"presets": [
"react",
"env"
]
}
Do I need to change how I set state? Or is there something else that I need to import to my project? Any help would be appreciated. Thanks.
(Note: Code I'm using is taken straight from Semantic UI Examples at the moment.)
You need either stage-2 preset
OR
You can use babel-plugin-transform-class-properties.
if you don't want to use stage-2 and stick with more stable stages.
Try out your combinations on BabelJS and pick your poison.
error message:
webpack-dev-server
/home/panecitodigital/Desktop/react-course-projects/cse-app/webpack.config.js:35
};
^
my webpack.config.js
It was working fine until i tried to add the file-loader to work with images, every time i try to fix the mistake the cmd tells me i have a new one comes up. A newbie that has tried the solutions that were on the web with no results too. Please help :) will pay foward when im not a newb
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}],
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
It looks like you're missing an } after your rules in module. The error is showing up on the last line because it's not expecting the ; it's expecting one more } to close the entire object.
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}, // <---- this is missing
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
}
};
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
},
module: {
rules:[
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
]
},
{
test : /\.jpg$/,
exclude: /(node_modules)/,
loader : 'file-loader'
}
]
}
};