188 questions
1
vote
2
answers
80
views
Error when updating to Next 15.5.2: Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/dist/CssModule/null is already registered
When updating Next.js for applications in my monorepo (turborepo) from version 15.3.3 to 15.5.2 I get the following error:
Error: ObjectMiddleware.register: serializer for mini-css-extract-plugin/...
- 106
0
votes
0
answers
27
views
Bundle CSS in separate file with Webpack
I would like to bundle my CSS files in a separate file (something like style.min.css). In my CSS files, I have @import url() that imports another CSS files. Currently my CSS is bundle in the main JS ...
1
vote
1
answer
73
views
Separate JS code for multiple webpack entries
I want to create 2 separate entries in Webpack config (e.g. app1.js and app2.js) so that each entry point has its own JS and CSS code.
There are following files:
app1.js
import('./app1.css');
console....
- 3,190
1
vote
0
answers
99
views
Webpack Generating Empty CSS Files when module exports array
I'm trying to export 2 different javascript code bundles to create a library. Each has different settings. I saw that I can pass an array to module.exports in webpack to achieve this. It works for the ...
1
vote
0
answers
700
views
"You forgot to add 'mini-css-extract-plugin' plugin" when work with thread-loader
Try to use thread-loader with mini-css-extract-plugin. When run npm build script, got error:
> cross-env NODE_ENV=production webpack
assets by status 958 bytes [cached] 1 asset
runtime modules 663 ...
- 104k
0
votes
1
answer
153
views
webpack ignores mini-css-extract-plugin plugins options
I've been trying to setup webpack for a personal project and everything has worked out well except that for some reason webpack is ignoring the options I'm giving it for production for mini-css-...
- 1
0
votes
1
answer
40
views
webpack css loaders working on windows powershel but dont in linux bash
I have a webpack setup that works properly in Windows powershell,
But when trying to build the same in Linux console
It seems that the css loaders are not working properly
However, I'm not sure where ...
- 3
0
votes
1
answer
74
views
mini-css-extract-plugin Can't resolve 'asset'
Relative to webpack root, I have a font file at ./src/css/font.css :
@font-face {
font-family: 'poppinsmedium';
src: url('../fonts/poppins/Poppins-Medium.otf');
font-weight: normal;
...
- 26.3k
0
votes
1
answer
104
views
"Import * as" not working after upgraing some css related loaders
I upgraded the following packages to their latest versions:
package name
current version in project
upgraded version(latest version)
mini-css-extract-plugin
0.8.2
2.8.0
postcss-browser-reporter
0.5.0
...
0
votes
1
answer
306
views
mini-css-extract-plugin: After extracting the file, error "Missed semicolon" occurring of error-free css file
Here is the SyntaxError:
The screeshot of the error
In the below [name].module.css, there are no semi-colon issue present.
Here is my module.css file:
/* Groningen */
.groningen p,
.groningen h3,
....
1
vote
1
answer
221
views
Processing .css files included inside link tags in HtmlWebpackPlugin template
Brief Description:
I am running into unexpected outputs/issues when working with .css files referenced inside <link> tag in the .html template provided to HtmlWebpackPlugin along with using ...
- 37
1
vote
1
answer
4k
views
webpack 5 and mini-css-extract-plugin doesn't load the css after saving the scss to css files
I have mini-css-extract-plugin that creates the css files from my scss files fine, but it when I load my pages (reactJs app), there are no styles loading. I suspect I am messing up the paths for ...
0
votes
1
answer
228
views
Webpack strange behaviour while loading css or sass dynamically using import()
This is my second day working with Webpack bundler.
I am using mini-css-extract-plugin loader.
Everything works as expected but when I import the css files dynamically I noticed some strange behaviour....
- 41
1
vote
0
answers
111
views
How to not to separate css styles from shared component to other lazy loaded chunks
I have a problem using "mini-css-extract-plugin". So I have 2 different lazy loading fragments in my router.
{path: '/lazy', element: (
<LazyLoad
...
- 83
1
vote
2
answers
181
views
How can I dynamically output JavaScript files individually with Webpack based on a folder?
I am putting together a new webpack build for my project and it's actually working pretty well. I have one problem that I'd like some help on if anyone has an idea. I have to retype all of this from ...
0
votes
2
answers
257
views
Fonts via mini-css-extract-plugin
I'm not sure, but empirically found out that it seems minicssextractor breaks the paths to fonts written in css @foont-face
@font-face {
font-family: 'Waiting-for-the-Sunrise';
font-style: normal;
...
- 1
0
votes
0
answers
118
views
Getting an error during webpack build while using CSS modules
Error
1 | // extracted by mini-css-extract-plugin
2 | export default {"lala":"hQupzgS9tEJmjp6wWbAk"};
(lala is classname)
CSS modules is working fine and changes are reflecting ...
0
votes
1
answer
318
views
Modify @wordpress/scripts MiniCssExtractPlugin settings with webpack.config.js
I'm using the @wordpress/scripts package and I want to modify the output of the css files to make them go into a subfolder called css. How do I either remove the original MiniCssExtractPlugin settings ...
1
vote
0
answers
72
views
Webpack - css - extract to multiple files?
I'm on Webpack 5, compiling mostly Vue sfc sass styles, and currently I achieved to extract all the css styles to a single css bundle using mini-css-extract-plugin.
Obviously this bundle has grown in ...
- 3,044
2
votes
1
answer
12k
views
Webpack + sass-loader + mini-css-extract-plugin error
I'm new to webpack and just trying to set up step-by-step a test project.
I'm currenctly stuck on processing sass stylesheets and the problem is surely related to the mini-css-extract-plugin package ...
- 3,044
0
votes
0
answers
1k
views
Webpack generating random file name for css included in JS file
I am using webpack for bundling js & css files, i am including css import in my js file,
Page1.js
import ('../css/page1.css');
import ('../css/welcome.css');
window.page1_func1 = () => {
...
- 83
1
vote
0
answers
541
views
How to export class names from CSS Modules that follow BEM naming convention?
I want to have ability to import class names from css modules in BEM naming convention like that:
import {
block,
block__element,
block__element_modifier
} from '@styles/name.module.css';
...
- 407
1
vote
0
answers
166
views
Webpack mini-css-extract-plugin breaks popup js on my chrome extension
I'm working on a chrome extension project.
I'm using MiniCssExtractPlugin to inject CSS into the content script.
It's working perfectly fine actually, but it breaks popup.js now.
It seems that can't ...
- 1,783
1
vote
1
answer
471
views
How to exclude creation of css chunk files?
I have a project in which I have to build all the modules into one file, and also split it into modules.
But I don't need css files for modules except for one common.
My files:
file 'a.js'
import 'a....
0
votes
1
answer
483
views
Webpack 5 mini-css-extract-plugin dropping scss files
I am migrating a webpack config from webpack 4 and am trying to wire in the mini-css-extract-plugin. However, all of my first party app CSS (SCSS) is not being injected into the main app.css file ...
- 3,827
0
votes
1
answer
526
views
taro build show mini-css-extract-plugin warning: Conflicting order. how to solve it?
I start a taro + react project, build show mini-css-extract-plugin warning:
Error: chunk common [mini-css-extract-plugin]
Conflicting order. Following module has been added: ***
how to solve it?
- 722
1
vote
0
answers
51
views
MiniCssExtractPlugin loader is loading css to two different files
My webpack contains this:
{
test: /\.css$/i,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader,"css-loader"]
}
and I have appLayout.js file that loading css files, that ...
- 21
1
vote
0
answers
521
views
After upgrading to Angular 13 from 11, images used in LESS files are not loaded to the dist folder
I'm using angular-builders/custom-webpack where I handle compiling of LESS to CSS with the custom webpack. In Angular 11, it works no issue where the images that are referenced in the LESS files are ...
- 115
0
votes
0
answers
88
views
React use css from imported files only
Hi guys I have an issue with my css in the react project
I have a component called header.jsx and the header.scss file is imported in it, so I want the css to be applied from header.scss only not from ...
- 119
1
vote
0
answers
1k
views
CSS sourceMap with sass-loader, postcss-loader, and MiniCssExtractPlugin in Webpack 5
Seems like I've followed all the instructions to generate CSS source maps, but still not finding them in the output CSS (I expect to see something like /*# sourceMappingURL=base.css.map */ in the ...
- 3,324
5
votes
0
answers
192
views
Can't import css as string when using MiniCssExtractPlugin
I'm using webpack. I need to load a css file as a string and I'm able to do so with css-loader, but I also need to use MiniCssExtractPlugin to inject css directly into the DOM. If I use ...
- 363
1
vote
1
answer
566
views
getting ' ajv is not a constructor mini-css-extract-plugin ' error whenever installing package using npm
whenever I'm trying to install a package from npm I'm getting the following error :
ajv is not a constructor , mini-css-extract-plugin
My project is now stopped due to this error I can't download any ...
- 551
0
votes
1
answer
640
views
Can I access css filename with content hash created by MiniCssExtractPlugin in React App?
I am trying to load dynamically link tag inside a React component with shadow dom, but I can't find a solution to access filename/path with hashes generated by MiniCssExtractPlugin/Webpack.
General ...
- 66
0
votes
1
answer
753
views
Avoid downloading empty JavaScript file when using MiniCssExtractPlugin and async chunks
When using async chunks with MiniCssExtractPlugin, an empty JavaScript file is created. This file is downloaded together with the extracted CSS file. Is there any way to avoid this, i.e. download only ...
- 358
4
votes
1
answer
2k
views
React/mini-css-extract-plugin conflicting import order error: Verbose build logs?
I'm working on a CRA react app and I've recently come across some CSS import order warnings from mini-css-extract-plugin:
chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been ...
- 161
9
votes
0
answers
5k
views
You forgot to add 'mini-css-extract-plugin' plugin
I'm using mini-css-extract-plugin in my webpack, version 1.3.6 but when trying to run dev build getting the below error. css and scss both are in the app.
ERROR in ./src/index.css
Module build failed (...
- 113
7
votes
1
answer
10k
views
extract-text-webpack-plugin replacement in webpack 5
I'm working on the project upgrading from webpack 3 to webpack 5. In the project, it was using raw-loader and extract-text-webpack-plugin to parse imported html file(angular component), then combine ...
- 91
2
votes
0
answers
985
views
css files not being copied to dist folder webpack5
I am getting the following error, along with broken css being applied to my webpage.
This at first glance looks like an issue with css, however this file doesn't exist at ALL in the dist folder that ...
- 63
0
votes
1
answer
1k
views
MiniCssExtractPlugin error when I run npm run build
I'm trying to run "Npm Run Build" on my reactjs website, but I keep getting this error:
/usr/local/lib/node_modules/react-scripts/config/webpack.config.js:664
new MiniCssExtractPlugin({
...
11
votes
2
answers
6k
views
Getting error on running command `npm run build`, error `TypeError: MiniCssExtractPlugin is not a constructor`
I'm creating an app using react it runs fine on npm start but when I try to build the app, this show the following error.
PS D:\ ****\ **\*\profile> npm run build
> [email protected] build
> ...
3
votes
2
answers
854
views
Duplicating css var. First time with correct value and second time just like var(--variable). Why? (React, webpack, css)
I have next css which I include in js file:
:root {
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/...
1
vote
1
answer
2k
views
Laravel Mix "npm run dev module build failed, cannot find module ... but all are installed
What I have:
macOS Big Sur
node 14 with nvm ( I have also try the 17 )
npm 8.1.3
Laravel 8
package.json
{
"private": true,
"scripts": {
"dev": "npm run ...
- 157
1
vote
1
answer
2k
views
How to exclude link tags (or more specifically .css files extracted by the mini-css-extract-plugin) from being generated by html-webpack-plugin?
Due to how the (legacy) project is currently set up, I cannot benefit from the caching capabilities of webpack in the standard way, but instead have to generate the scripts in empty files (like main....
- 63
0
votes
1
answer
2k
views
How to (successfully) bundle css for dynamic multi-page app using Webpack 5
I am trying to use Webpack 5 to bundle assets for a dynamic multi-page Django application. Using WebpackManifestPlugin and django-manifest-loader. I have this working fine for JavaScript, but I've ...
- 12.8k
1
vote
0
answers
384
views
"mini-css-extract-plugin" every time injects a new number in main.js file on each build which changing contenthash number of main.js unnecessarily
I am using webpack 5, and using contenthash for the main.js file. But my main.js file gets a new hash number on every build even if there is nothing changed in my application. When I compared two main....
- 3,617
5
votes
2
answers
4k
views
Extracting all CSS in a single file in Nextjs using mini-css-extract-plugin
I'm using Nextjs and for style, Sass is used. In production mode, I see a lot of css files that are loaded in a sequential manner. I want to load just one css. After some search, I find ...
- 109
1
vote
3
answers
936
views
Font Awesome commenting out <i></i> tag after parsing
I'm working on a React application where I want conditional rendering of FontAwesome icons, but at the moment it's not changing when it should.
I inspected elements and found that FontAwesome is ...
- 297
1
vote
1
answer
5k
views
Webpack NPM module build failed ValidationError: CSS Loader ...does not match the API schema
I have updated all my packages to the latest versions, but when I run my project script, I get an error that is somehow connected to my css file. I have checked pathfile names and any errors within my ...
- 831
1
vote
1
answer
380
views
Font Awesome loading as boxes with less.js and webpack
I recently tweaked my webpack modules in my React/Electron.js project to compile less files using less-loader, css-loader, and MiniCssExtractPlugin.loader instead of the style-loader since there is no ...
- 297
4
votes
0
answers
1k
views
Webpack 5 & sass: mini-css-extract-plugin cannot resolve fonts
There is my extremly simple test.scss file:
@font-face {
font-family: Roboto;
src: url("../fonts/Roboto/Roboto-Regular.ttf");
font-weight: 400;
}
.test {
display: flex;
...
- 1,731