News Articles webpack-5

"Field ‘browser’ doesn’t contain a valid alias configuration" error when integrating Storybook with Webpack 5 React app

I am trying to integrate storybook into my webpack 5 react application. I am having some difficulty with the set up and I’m getting this error: Field ‘browser’ doesn’t contain a valid alias configuration when running npm run storybook. It appears to be related to to the line exclude: /node_modules/ (when I remove it I […]

Errors thrown when integrating Storybook with Webpack 5 React app

I am trying to set up Storybook to my React application which is using Webpack 5. I am getting 2 errors and haven’t been able to resolve them: 1) complaining that I am missing an appropriate loader to handle the file type; 2) it is unable to find stories in my storybook. I tried to […]

Webpack not recognizing CSS files even with the appropriate loaders installed

webpack doesn’t seem to recognize my CSS files even with the appropriate loaders installed… webpack.config.js: const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = env => { let devType = env.production || false; console.log(devType); return { mode: devType ? "production" : "development", entry: "./src/js/app.js", output: { filename: "js/app.bundle.js", path: path.resolve(__dirname, […]

webpack – how to build dist folder outside current webpack config directory

This is my current project directory src -App.jsx -… webpack -webpack.base.js package.json "scripts": { "build": "webpack –config ./webpack/", } When I run npm run build, the dist folder is created inside my webpack directory. src -App.jsx -… webpack -dist -webpack.base.js What I want is dist src -App.jsx -… webpack -webpack.base.js This is […]

VueLoaderPlugin doies not return HTML used as inline loader for HtmlWebpackPlugin?

With the following webpack.common.js: const pathtoresolve = require(‘path’); const paths = require(‘./paths’) const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’) const CopyWebpackPlugin = require(‘copy-webpack-plugin’) const HtmlWebpackPlugin = require(‘html-webpack-plugin’) const { VueLoaderPlugin } = require(‘vue-loader’) module.exports = { // Where webpack looks to start building the bundle entry: [ ‘whatwg-fetch’, paths.src + ‘/main.js’], resolve: { extensions: [ ‘.js’, […]

How to configure webpack dev server to serve extensionless files as ‘text/html’

Problem In development, serving files without an extension (e.g. /region) are being served with mimetype `application/octet-stream’. Desired state is to serve these with mimetype ‘text/html’. Context Writing a multipage application using Vue3. Upgraded @vue/cli and that upgraded webpack from 4 to 5. Serving extensionless files did not have this issue using webpack4’s dev server. In […]

Correct way to transpile SCSS files but not CSS files in Webpack 5

I have two entrypoints for stylesheets. src/css/preprocess.scss src/css/skippreprocessing.css I want my Webpack 5 project to preprocess the SCSS file, but NOT the CSS file–I want the CSS file to just be published to the dist folder as-is. I’ve included my best guess below. Something is wrong with it though; it breaks hot-reloading. Or rather, hot-reloading […]

Upgrading angular 9 to 12 with webpack 5 getting Error " NG6002: Appears in the NgModule.imports of CruiseItineraryModule, but itself has errors"

so I am upgrading angular 9 to 12 with webpack 5 but when I perform AOT build then I am getting error like try find lot of on web but not find proper solution can any one suggest me where I am wrong Source: JavaSript – Stack Overflow

mp3 files in Webpack 5 w/ Nextjs

I’m currently working with [email protected] and webpack v5 and got stuck for hours with fixing mp3 loading. I tried several other solutions from stack and GitHub. None of them worked for me. Type error: Cannot find module ‘public/sounds/bighit.mp3’ or its corresponding type declarations. 14 | 15 | // Assets > 16 | import sound_bighit from […]

Webpack: How do I use magic comments to import a file into a file that will be published as a library then imported into a different application

I have a file published as umd library with a dynamic import that builds a select list of widgets based on configuration options. This is all working great in that the main js and widget js files are being published when I run the library directly. When I import the library into another project. It […]

How to mock an image and path in JEST + webpack5 + React?

I am trying to test a simple image component which is as follows: const ImageComponent = (props) => { const fullPath = require(`assets/images/${props.src}`); return <img {…props} src={fullPath} alt={props.src} />; }; and trying to test gives Error: Error: Cannot find module ‘assets/images/BigFakeImage’ from ‘test/components/common/ImageComponent.test.js’ test excerpt is as follows : const props = { src: ‘BigFakeImage’, […]

Webpack dynamic import of images causes large increase in entrypoint size

In Webpack (v5), I started using dynamic imports to include the Twemoji icon set: require(`twemoji/assets/svg/${filename}.svg`); There are 3,360 images included by this dynamic import. I have an asset module to process them: { test: /.svg$/, type: ‘asset/resource’, include: resolve(‘node_modules’, ‘twemoji’), generator: { filename: ‘packs/emoji/[name]-[contenthash:8][ext]’, }, } Now, the unfortunate result is that this this significantly […]

Require is not defined in Webpack %

I am new to Webpack. I Have made it by… but when I had installed it then it is throwing many errors please help me… This is Webpack config file please help me please.. const webpack = require(“webpack”) const path = require(‘path’); const config = { entry: [ ‘react-hot-loader/patch’, ‘./src/index.js’ ], output: { path: […]

Exported property gets hidden in dynamic import using webpack

In the latest webpack version (5+) when i try to use exported content of dynamic loaded module i can’t see its property (got undefined) – the only way is to use module.default.method instead of module.method. I noticed that using file-saver library, but also reproduced it with simple module – i recreated the way saveAs function […]

Webpack is not loading Css, Images and font

I am trying to load the Css, Images and fonts using the webpack. Here is my webpack.config.js const path = require(‘path’); module.exports = { entry: ‘./src/index.js’, mode: ‘development’, output: { filename: "main.js", path: path.resolve(__dirname,"dist") }, module:{ rules:[ { test: /.css$/i, use: [‘style-loader’, ‘css-loader’], }, { test: /.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource", }, { test: /.(woff|woff2|eot|ttf|otf)$/i, type: "asset/resource", […]

on build vuejs creates empty hashed files

When I build my project I get empty image files in dist folder. These are used by vuejs for caching (thats what I figured out), so when I open project in browser images dont work. This is my first javascript project and I cant find solution for this problem. I want to disable caching, first […]

Javascript & Webpack: Error: Unknown option ‘–watch-content-base’

I am trying to integrate WebPack into the scripts my package.json file. I was following a video to try and do it and it works fine up until I enter ‘npm start’. I get an error message in the terminal reading: [webpack-cli] Error: Unknown option ‘–watch-content-base’ [webpack-cli] Run ‘webpack –help’ to see available commands and […]

Webpack 5 "dependency was not found" error with `yarn link`

I’m troubleshooting an error from a Webpack 5 built React component library we’re building: The library, which I’ll call my-lib, is a yarn v1.22 workspace monorepo written in React v16.14 + TypeScript, and I’m linking the library to a consumer project using yarn link to test locally. I’ve configured Webpack in my-lib to set React […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.