So I've been working to transition an app from gulp to webpack, and I've been running into an issue with loading our less styles. I am capable of getting webpack to load the styles using the MiniCssExtractPlugin and the less-loader; however, it doesn't seem to be able to recognize the # syntax that is used in less.
My webpack.config.js
module: {
rules : [
// Less Files
{
test: /\.less$/,
use: [
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: "[id].css"
}),
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
&.messaging > a > .icon-container {
background: url("/images/app/#{appname}/ic_home_messaging#3x.png") no-repeat;
^
Variable #appname is undefined
in /Users/brandentenbrink/MedData/Professional/ProfessionalApp/src/src/less/main.less (line 272, column 28)
# ./src/less/styles.less 2:14-125
# ./src/index.js
This is an error that I am seeing. At first I thought it was because the #appname wasn't being defined; however, after changing all of those values to the correct, hard coded name, more files started erroring out--this time with simple css (# blue wasn't found).
I am not too knowledgeable of webpack and less; hence, I am looking for any explanations as to why my # imports and references aren't capable of being built in webpack.
Thank you.
Related
So I am trying to avoid having Webpack create the following asset in the build folder used in production:
main.35237d24.css
This configuration works in development. But in production, 'main.35237d24.css' is being generated and a link tag is being created for it. Which is a render blocking resource I am trying to eliminate.
webpack.config.js
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options:{
insert:'head',
injectType: 'singletonStyleTag',
envName: isProduction
},
},
"css-loader"
]
}
What do I need to do here to get the result I'm getting in development, the inlining in the head of the css, for production?
I'd appreciate it.
Thanks,
Ironman
I created React app manually (not create-react-app) one by one such as index.js, App.js, index.css, components folder etc because I am using React app as a separate app in the Django project.
And in order to use google fonts, I followed this answer.
But when I write #import url('https://fonts.googleapis.com/css?family=Josefin+Sans') in the index.css, it is giving me this error.
ERROR in ./src/index.css 1:0
Module parse failed: Unexpected character '#' (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
> #import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
|
# ./src/index.js 4:0-21
webpack 5.15.0 compiled with 1 error in 999 ms
I think this error is related to webpack.config.js and it seems I need to add some rules in the module section related to css-loader, file-loader, or something else, but I am not sure how to write.
This is just my thought, I have no idea why this is happening.
webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env" : {
NODE_ENV: JSON.stringify("production"),
}
})
]
};
How to solve this issue? (This issue has happened when I tried to use react-toastify also. So I removed it and used another alternative package.) How to use fonts in the non create-react-app based project?
I have a React app that uses Webpack and Babel. I am trying to load an image anyway possible (svg, png...) but I keep getting the error "Unexpected character '�' (1:0) > 1 | �PNG". I installed url-loader (npm install url-loader --save-dev) which is supposed to help load images when using Webpack. Nothing has changed.
This is my webpack.config.js:
const {NODE_ENV} = process.env;
module.exports = {
mode: NODE_ENV === 'production' ? NODE_ENV : 'development',
entry: ['./client/index.js'],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 25000
}
}
]
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
};
This is how I was trying to load my image:
import hiker from './hiker.png';
<img src={hiker} />
Any help would be greatly appreciated, thank you.
Several issues here. First, you're using babel-node that's pointing to the index.js. If you want it to point to your webpack config, then you'll need to remove index.js from the package.json's dev scripts:
"dev": "nodemon --exec babel-node",
And rename webpack.config.js to babel.config.js.
Unfortunately, there's also quite a bit more work required to get your project up-and-running. It appears that this setup uses some server-side-rendering configuration. Admittedly, I've never used koa, so I can't be of much help here.
It also appears to be a bit outdated, and someone updated it and included a walkthrough.
That said, I'd recommend steering toward a new-developer friendly boilerplate if you're just learning.
I'd suggest starting with create-react-app, which obscures a lot of this webpack configuration.
Or, you can download my react-starter-kit, which has an exposed webpack configuration that you can play around with (if desired) and utilizes webpack-dev-server for development and webpack with a very simple express configuration for production.
Up to you.
Good luck!
I have a react/webpack-4 app and am trying to build it on Heroku. When I build it on my machine it works completely fine, but on Heroku it spits out these errors:
ERROR in ./src/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass loader/lib/loader.js):
#import 'components/dashboard';
^
File to import not found or unreadable: components/dashboard.
It doesn't always break on the same #import statement in my main.scss file, but it always breaks on one of them.
This is my main.scss:
#import 'components/add-poster';
#import 'components/auth';
#import 'components/dashboard';
#import 'components/navigation';
All of the names match my files and are prefixed properly with an _ (ie: _dashboard.scss).
This is my prod webpack build file:
module.exports = merge(base, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ],
test: /\.scss$/
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({ parallel: true, sourceMap: true }),
new OptimizeCssAssetsPlugin({})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
})
This has been driving me nuts for hours and any help or insight would be greatly appreciated. Thank you.
After a very long and arduous process of reformatting webpack over and over again, I started removing imports to see if I could stop the error.
Once I removed the dashboard component the build started to work. I believe that my issue was actually from importing an scss file with nothing in it. Don't know why that would break things, but there you go.
I have followed as many tips as I can find in packaging my Webpack ReactJS app for production. Unfortunately, the file size is still 3MB. What am I doing wrong?
Here is my Webpack Config file:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle-webpack.js',
publicPath: './'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: false
}
})
],
module: {
loaders: [
{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{test: /node_modules\/react-chatview/, loader: 'babel' }
]
}
}
Any help would be greatly appreciated!
I use the following command to package it:
> NODE_ENV=production webpack -p
I get the following output:
bundle-webpack.js 3.1 MB 0 [emitted] main
Best,
Aaron
Looks like you've still got a fair amount of dev stuff there, e.g. hot module replacement.
Take a look at webpack.config.prod.js at React Transform Boilerplate as a guide.
You may also be able to optimise your imports by including only the parts of the packages you need and leaving out the rest. See: Reduce Your bundle.js File Size By Doing This One Thing .
So, it turns out that David L. Walsh was correct that I had too much development stuff in my app. However, the answer provided did not resolve the issue.
I resolved the issue using 3 steps.
Remove all the "hot-reloading" plugins from my webpack configuration, as David instructed.
Remove the hot reloading "react-transform" plugin from my .babelrc file.
Change the "devtool" parameter to "source-map" from "cheap-module-eval-source-map"
After following those steps, the final bundle file was 340kb while the source map was still 3MB. Fortunately, I don't have to include the source map in my application, so it can be downloaded at 340kb, which is still fairly large, but reasonable for modern browsers running on modern internet connections.
I would up-vote David's answer, but I don't have enough reputation points yet to do so.