Questions tagged [webpack]

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it can also transform, bundle, or package just about any resource or asset. Webpack takes modules with dependencies and generates static assets representing those modules. Webpack enables extensibility and promotes best practices in web architecture and performance.

Filter by
Sorted by
Tagged with
0 votes
0 answers
7 views

Vue3 bundling and debugger not working issue

I have a Vue3 project, written in VSCode. Up until today I have not experienced any issue with viewing the project in the browser with: npm run serve and adding break points: debugger to cause the ...
RGriffiths's user avatar
  • 5,742
0 votes
0 answers
7 views

bundling a lit react component gives me error "Cannot read properties of null (reading 'useRef')"

I made a module that contain a react lit component and bundled the module using webpack. The problem is it gives me this error Cannot read properties of null (reading 'useRef') when I use ...
Amr Zayed's user avatar
0 votes
1 answer
12 views

Webpack cannot resolve /index.(js|jsx) files when package is type module

I'm pretty new to Webpack configuration and difference between cjs, mjs etc. When trying to build a component lib bundled by Webpack, im coming across this error when building (webpack command) ...
Coni Wright's user avatar
0 votes
0 answers
12 views

Webpack 5 native modules errors

I'm using Webpack 5 and I get a bunch for errors for native modules like: Module not found: Error: Can't resolve 'fs/promises' Module not found: Error: Can't resolve 'async_hooks' Module not found: ...
Daniell's user avatar
0 votes
1 answer
12 views

How to make dotenv parse and use values from environment for Github CI build?

I use .env file for local development and it's not in git. webpack loads env values from the file with this: const env = dotenv.config().parsed if (!env) { throw '.env file is missing in the root ...
Sergei Basharov's user avatar
0 votes
0 answers
12 views

How to ignore hot updates for some files in Vue CLI v5

In the /public folder, I have some configuration files. When I update these files, I don't want to watch their changes for hot updates.I tried to set up the configuration here according to the webpack ...
px yan's user avatar
  • 1
0 votes
0 answers
30 views

Refused to execute script because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

I know there are already some other similar questions but nothing from there worked for me. I hope someone can provide feedback on this. I have an html test page in my webapp where I'm using a JS file....
Cristobal BL's user avatar
0 votes
0 answers
20 views

JavaScript bundles load without errors but functionality for file attachment and form submission not working

I have the task at my project to rewrite logic of using static files: use dynamic names or dynamic URLs for your static files. Example of dynamic name: /static/main.abcdef0123.js. I am using ASP NET ...
lob_2020's user avatar
0 votes
0 answers
19 views

Switched from Webpack to Vite and getting a build error

I recently switched our project from Webpack to Vite. When I run microbundle --tsconfig tsconfig.mb.json --sourcemap -f modern I get the following error: Failed to resolve the module https://external-...
Jamie's user avatar
  • 1,971
0 votes
0 answers
11 views

Gatsby build fails with Generating SSR bundle failed

When I run Gatsby build locally on my computer, the following error occurs (see logs). It looks like a webpack error. Gatsby Config: /** * @type {import('gatsby').GatsbyConfig} */ module.exports = { ...
Arbnor's user avatar
  • 2,252
0 votes
0 answers
14 views

webpack dosen't restore index.html in dist and not to clean the files in dist and dosen't build ..css file

------------ directory ---------------------- dist/ main.hash.....js main.hash.....js main.js node_module/ src/ index.js test.js style/ main.scss index.html package-lock.json package....
강한구's user avatar
0 votes
0 answers
9 views

Cannot read properties of Object, still can read Object tho(vue.js)

js project and i face an unexpected problem. I tried to read one of properties of a Object, but i can't while the object is available to read. this is my code to read object. let p = this.contentList[...
ACS's user avatar
  • 11
0 votes
0 answers
4 views

run swpier js with webpack

I still can not see the dots under the slider and the arrows not functional. could you please help. webpack has one entry entry.js contains the following import 'normalize.css'; import '../sass/style....
user14691677's user avatar
0 votes
0 answers
27 views

minify one of the files from the raw bundle

I have a configuration to bundle all raw vanilla js files Copying/Dumping selective js code/files for 3 kinds of files. mylib.js mylib.min.js (same files as mylib.js + minify) mylib-test.js (test ...
Source's user avatar
  • 183
0 votes
0 answers
75 views

Module parse failed: Unexpected character '#' (7:2) File was processed with these loaders:

Has anyone encountered something like this? Background: About a week ago, the (React) project was working fine and everything was normal. Around the same time, I started working on a new project, but ...
Tryerman's user avatar
0 votes
1 answer
36 views

Webpack Compilation Error after running the test and querying the table in the database [duplicate]

I need to run an automated test (Cypress) that connects to my database (mysql) and does a select (lib mysql2). I am unable to run my test successfully. I'm getting the following error: Error: Webpack ...
EFPM_S's user avatar
  • 17
0 votes
1 answer
20 views

How to Integrate my React app bot in any website using script tag?

I have made a bot in React.js and made a JavaScript file using WebPack like this: <script src="https://my-example-js-file.netlify.app/bot.js" defer></script> Now I am placing ...
Mirza Azaz's user avatar
0 votes
0 answers
19 views

Module not found: Error: Can't resolve '***' with pnpm

After I removed 'shamefully-hoist=true' in .npmrc. pnpm throws several errors when webpack is building. After research, I found out that webpack will search modules under different levels of ...
Anthony Wang's user avatar
0 votes
1 answer
22 views

React Dependency Upgrade - Is there any practice which we should follow to upgrade the dependencies?

Here are the list of dependencies and devDependencies which are required to be updated they are pretty old some are already deprecated. "dependencies": "axios": "0.16.2&...
Sagar's user avatar
  • 1
0 votes
0 answers
36 views

I am trying to runmy portfolio website but being failed [closed]

Problem: While attempting to run a React app within a project using "npm start", an error related to cryptographic operations arises, preventing the successful start of the development ...
Abdullah Siddique's user avatar
0 votes
1 answer
47 views

React.memo() gave me the error (0 , _components_ComponentName_js__WEBPACK_IMPORTED_MODULE_3__.default) is not a function

The example code is here: import Button from '@mui/material/Button'; import { memo } from 'react'; function PokemonBriefCard(props) { return ( <div>Some random component</div> ); ...
Terry Windwalker's user avatar
0 votes
0 answers
23 views

Vite dynamic import of node_modules

I'm having issues importing a library of svg assets in Vue 3 + Vite. This is the only option that I can use since we are exporting the library. Previously this works in Webpack, but not it seems to be ...
Pongramer's user avatar
1 vote
1 answer
28 views

After webpack build background image lost id svg-path.svg#id

I use nextjs. I have styles like: .img { background-image: url(path/to/my/svg/file.svg#icon); } When I run npm run dev I got next styles for my element with class name "img": .img { ...
mr_alex's user avatar
  • 234
0 votes
0 answers
10 views

TSLint not excluding 'node_modules' since updating to Vue 2.7?

Does anyone know why I am seeing the following in my console when I use WebpackStream to build my files? ERROR in /my-project/node_modules/vue/types/jsx.d.ts [tsl] ERROR in /my-project/node_modules/...
Takuhii's user avatar
  • 821
0 votes
0 answers
25 views

Storybook HTML build failed due to mini-css-extract-plugin error

I am new to storybook and I am trying to build the storybook but I am receving the error related to the mini css extract plugin, this same code is being used in the other project and is working fine ...
Twinkle's user avatar
  • 59
-1 votes
0 answers
26 views

Changes to types in node_modules results in typescript errors while using the dev env of create-react-app

I have a script that modifies some files in the node_modules folder of my React TypeScript application. The problem I'm encountering is that the webpack dev server doesn't recognize the changes I make ...
vbgd's user avatar
  • 1,935
0 votes
0 answers
16 views

Error while trying to import stompjs in a React application that is using webpack

I am building a modular federation React app that is subscribing to one of my topics from my backend using STOMP (SockJS) but whenever I try to import stompjs in one of my React components, it gives ...
Sharky's user avatar
  • 1
0 votes
0 answers
20 views

Tailwind CSS styles applied locally, but not when deployed on Render

I've deployed my portfolio on render.com but it isn't incorporating the Tailwind CSS that is reflected when I run it locally. I'm a Tailwind CSS noob so any help would be greatly appreciated... I ...
Michael Norris's user avatar
0 votes
0 answers
39 views

Monaco-editor with vscode extension webpack webview

I am trying to implement monaco-editor into custom vscode extension and I've tried it in so many ways to import it, but I cannot figure it out (there are either random errors from monaco-editor files, ...
Robson's user avatar
  • 1
-1 votes
0 answers
19 views

Creating a Plugin System in React: How to Develop Separate Plugins as Components or Apps and Upload Them to the Host React App at Runtime? [closed]

I am working on a React project and I want to implement a plugin system similar to WordPress. The goal is to develop separate plugins as React components or even standalone React applications and then ...
Mila Phillips's user avatar
0 votes
0 answers
18 views

Electron forge + webpack + ts + dugite: Git was not found

I am running an Electron app based on the electron forge template (available here). In the webpack.main.config.ts file, I added the following lines as suggested here: node: { __dirname: true, }, ...
4br3mm0rd's user avatar
  • 543
-1 votes
1 answer
27 views

webpack dev server doesn't recognize JSX code

I'm trying to get a React project running with webpack-dev-server. The project runs, but when I start the dev server with yarn run webpack-dev-server, I get the following message: ERROR in ./app/...
Fred Willmore's user avatar
0 votes
0 answers
26 views

how to set up storybook alias

I'm going to use the storybook in the yarn-berry, react, and typescript environment. So I use storybook/react-webpack5. When I use the storybook in a way that I specify the path myself, it works, but ...
skwFE's user avatar
  • 231
0 votes
0 answers
20 views

Monaco-editor syntax highlighting

I want to highlight the syntax in my monacho editor. I am testing with typescript/javascript. this is my index.js file: import * as monaco from './node_modules/monaco-editor/esm/vs/editor/editor.api....
Werner's user avatar
  • 81
-1 votes
1 answer
45 views

Issue with rendering a component in Laravel Nova after updating dependencies

Hello Stack Overflow community! I'm facing an issue with rendering a component in Laravel Nova after updating dependencies in the project. When trying to open the component in Laravel Nova, I get an ...
Ilya Pelevin's user avatar
0 votes
0 answers
72 views

Copy node module bundle files

I am working on an nodejs project and installed a node module that uses webpack to create some bundle files. After importing the module in my ts file I got a runtime exception in the browser, because ...
amani's user avatar
  • 45
1 vote
1 answer
52 views

GoLang conditionally serve .js.gz if it exists, otherwise .js

My background is mostly react/frontend, but I've been tasked with improving the performance of our React web app which is served using GoLang extracting the files from S3 using aws sdk for Go. I have ...
mateotherock's user avatar
0 votes
0 answers
20 views

source map is not generated for some files

I'm encountering an issue in my production environment that I'm trying to debug. To facilitate this process, I need to enable source maps for a project based on ScandiPWA. I've successfully built the ...
Petro Chaikivskyi's user avatar
0 votes
1 answer
24 views

CKEditor5 in React not working with a nonce in Content-Security-Policy

I am using CKEditor in a React application using @ckeditor/ckeditor5-react: 5.1.0 and @ckeditor/ckeditor5-build-classic: ^40.1.0. We use Webpack 5. My Content-Security-Policy contains strict-...
KGlickman's user avatar
1 vote
0 answers
36 views

webpack HtmlWebpackPlugin add font

Hello I'm new using webpack and i'm having a problem adding a font in the webpack.config.js I have the html template like this: plugins: [ new ESLintPlugin(), new HtmlWebpackPlugin({ ...
adrian's user avatar
  • 107
0 votes
0 answers
24 views

ESLint Error: Cannot find module 'resolve/sync'

I have created my own package for personal use, and I am connecting it to the project. Everything works perfectly, except for two things that I can't figure out. Here are the dependencies in my ...
RedCoub's user avatar
-1 votes
0 answers
13 views

what is the execution order of the webpack plugins

In which order webpack starts executing plugins? From first -> last or last -> first? Let's say I have this list of plugins: const config = { plugins: [ new Plugin1(), new Plugin2(), ...
woss's user avatar
  • 961
0 votes
0 answers
23 views

Uncaught (in promise) RangeError: Maximum call stack size exceeded webpack riquire consumes error with React

I'm currently having this issue with my React app where when you get to the first page it appears blank. The problem started when I made some changes related to apollo client, since I'm using to fetch ...
Carlos Antonio Madrigal Trejo's user avatar
1 vote
1 answer
36 views

Angular 7 build failed

Angular 7, npm 5.5.1 node 8.9.0 terminal npm run build:test [email protected] build:test C:\Projects\fff ng build --aot --build-optimizer --output-hashing=all 11% building modules 10/17 modules 7 active .....
Sanches Rodriguez's user avatar
0 votes
0 answers
17 views

Components import error - Vue 2 with TypeScript - VS Code

has anyone had problems with TS pointing errors on custom components beeing imported to the .vue file - using the options api and webpack. Basicly the import works fine, everything is visible and ...
ciulany's user avatar
  • 13
1 vote
0 answers
11 views

How to keep multiple directories using Webpack Clean?

I'm trying to keep multiple directories using Webpack clean: module.exports = { //... output: { clean: { keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'. }, }, }; ...
Sackadelic's user avatar
-1 votes
0 answers
25 views

Webpack 5 and TerserPlugin [closed]

When I set optimization.minimize = true for using TerserPlugin, from my bundle remove some classnames. but if set minimize=false (default) I think optimization will doesn't work I try set settings ...
VyacheslavS's user avatar
1 vote
1 answer
18 views

Import Canvg v4 in TypeScript project

I have an old TypeScript project with the following tsconfig: { "compilerOptions": { "baseUrl": "./src", "outDir": "build/dist", "...
Nuthinking's user avatar
  • 1,221
0 votes
1 answer
57 views

How to minify node.js typescript backend project?

My webpack.config.js: const path = require('path'); var fs = require('fs') var nodeModules = {}; fs.readdirSync('node_modules').filter(function (x) {return ['.bin'].indexOf(x) === -1;}).forEach(...
SelloBello106's user avatar
2 votes
0 answers
35 views

CSS keyframed gradient animation fails on NextJS production build

EDIT: I found that the issue is that during build, the generated css file has the %, from initial-value removed, so it results in just initial-value:0 which is not correct since i'm using perchantage. ...
Gr33nLight's user avatar

1
2 3 4 5
853