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

How to remove "defer" attribute from output script in vue3 config (vue-cli 5)

Surprisingly I can't find any explanation "how to remove 'defer' attribute from output in vue3 configuration". I don't want that defer definition in my output html script injection. <...
Yasin Yörük's user avatar
2 votes
1 answer
29 views

Getting error while trying to grab list of source code files: TypeError: webpack_require(...).context is not a function

I'm having a documentation application where examples of components come next to source code (ts, html, scss sources can be seen along with working components). While migrating from angular 13 to ...
Eugeny89's user avatar
  • 3,835
-4 votes
0 answers
26 views

Does Webpack expose information about the machine that used it?

I want to start using webpack, however I'm just a little paranoid because on some sites I can open chrome devtools and literally view the typescript source files of different bundled modules. Also, ...
x_X's user avatar
  • 1
0 votes
0 answers
32 views

Vue.js nullish coalescing operator (??) error in v-calendar

I am getting this error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. [sic] The full error error in ./node_modules/v-...
NihatM's user avatar
  • 25
0 votes
0 answers
18 views

Webpack not parsing Bun monorepo typescript packages

So i have a monorepo using bun and nextjs will the following filesystem: And when i attempt to access the "world types" package to acquire typescript types i get the following error: Module ...
Artrix's user avatar
  • 149
1 vote
2 answers
24 views

I can't connect js script to my html file using handlebars engine (I use webpack)

When I paste script tag to html file which collected with html-buldler-webpack-plugin I getting error: "TypeError: Found non-callable @@iterator". This my webpack.config: const path = ...
Smurf's user avatar
  • 13
0 votes
0 answers
12 views

Webpack build slower on docker container

I have a monorepo (using npm workspaces) in which I have currently a single sub-repo called backend, here is the folder structure - package.json - package-lock.json -- packages/ --- backend/ ---- src/ ...
user2968425's user avatar
0 votes
0 answers
17 views

convert class code to a function code in javascript using any build tool [closed]

I'm writing a real-time app and want to convert this class code to a function. Are there any build tools Babel , Gulp or Webpack that transpile the class code to a functional code my class has some ...
kishore kumar's user avatar
0 votes
0 answers
9 views

Is it Possible to Share JavaScript Vendor Dependencies Between Two Separate Apps Using Laravel-Mix + Webpack?

I am still relatively new to Laravel Mix and modular JavaScript, so please excuse me if I use the wrong terminology in this question. I have a Core application that I would like to write plugins for. ...
Dave L's user avatar
  • 3,095
0 votes
0 answers
11 views

I am getting babel error while using Yarn workspaces for monorepo

I am new to software field in general and currently I am trying to use monorepo (using yarn workspaces). I have two react applications (bootstrapped with simple webpack and NOT create-react-app) ...
Pikalo's user avatar
  • 1
0 votes
0 answers
9 views

Only after WebPack compile TypeScript in production mode I get exception TypeORMError: Cyclic dependency: "", when try save data to PostgreSQL

I use stack TypeScript, NodeJS server(Express), TypeORM(PostgreSQL). I use WebPack to compile TS and build application. When WebPack work in development mode no error occures. When I build app for ...
Egor's user avatar
  • 1
0 votes
0 answers
9 views

Getting error when build a webpack5 bundled vue3 app with electron builder?

I was trying to use the electron builder for convert my vue3 app to an exe file. My app is a vue3 project and it is bundled with webpack5. I added electron builder for my project using vue add ...
Ishan's user avatar
  • 191
0 votes
0 answers
20 views

Silly lifecycle: Error compiling front-end

I have an old delopment which I'm trying to compile the frontend and I'm not able to do it because I've got an error trying to compile it with the script 'dev'; npm run dev I've got this error ... 0 ...
José Carlos's user avatar
  • 2,850
0 votes
0 answers
27 views

Vue 3: ResizeObserver loop completed with undelivered notifications

I am getting this error always when I remove or add component to page with page changes. For these code, error accuses when value of showUserToolBar is changed. I tried to change value of ...
uys2000's user avatar
1 vote
2 answers
34 views

How to make webpack not rename specific files

I am trying to figure out webpack for a project and one of the things we would like to do is to replace a few image files during deployment to customize. Replacing the file is easy enough but WebPack ...
Zholen's user avatar
  • 1,772
0 votes
0 answers
30 views

How to add path aliases to Storybook webpack configuration?

I am using Storybook with nextjs and webpack. Here's my .storybook/main.ts: import type { StorybookConfig } from '@storybook/nextjs'; const config: StorybookConfig = { ... framework: { name: '...
Naresh's user avatar
  • 24.1k
2 votes
0 answers
30 views

Building angular using webpack not importing modules correctly

I have build a small example app to show off this issue. It seems when importing modules in the module declaration it does import the modules declarations. For example when I import the browser module ...
David Hubner's user avatar
0 votes
0 answers
15 views
+100

Webpack won't build with aws-jwt-verify

I need to bundle node code for an AWS lambda for lambda@edge. I am unable to get by this error. Module not found: Error: Can't resolve 'aws-jwt-verify/error' I'm using typescript, and it compiles ...
Danny Ellis Jr.'s user avatar
0 votes
0 answers
13 views

Webpacker won't seem to boot on an https port

I am using Shakapacker, a fork and successor to Webpacker, trying to get it to boot on https for local development, using a nonstandard domain abc.localhost. This works for Puma by passing it a flag -...
Jason FB's user avatar
  • 4,812
0 votes
0 answers
21 views

Importing reactflow v11.8.3 causes error "module parse failed: unexpected token"

Any Help here please, Getting this error when i import reactflow i am using react: V16.14.0, webpack 4 Error: ./node_modules/@reactflow/node-resizer/dist/esm/index.js 45:38 Module parse failed: ...
Alaa's user avatar
  • 1
0 votes
0 answers
21 views

Webpack 5 bundle React components library for browser

I am creating a library of react components and typescript to use in a web client application. I want to bundle it excluding the packages in node_modules, with the imports in the bundle using UMD, as ...
EmileC's user avatar
  • 39
0 votes
0 answers
15 views

Expose scss mixins through webpack ModuleFederationPlugin

How to expose scss mixins through webpack ModuleFederationPlugin which can be exposed to other remote MicroFrontends in react app. I have tried exposing like this ModuleFederationPlugin({ ...
atul mishra's user avatar
0 votes
0 answers
7 views

How to use svg-chunk-webpack-plugin along with prefixing the svg IDs using webpack 5?

Hi I have got lot of individual svg files which I want to chunk in a single file using svg-chunk-webpack-plugin. I followed the example here and was able to do it. It is internally taking care of ...
Mitesh Agrawal's user avatar
0 votes
0 answers
18 views

Webpack content security policy problem with loadCSS

I'm trying to implement a strict csp with an existing production project The problem I am currently facing is that something is injecting the following: PostCSS javascript inline !function(n){"...
João Pedro Lopes Mendes's user avatar
1 vote
1 answer
24 views

Can't resolve typescript package when using with other module

I am trying to create a simple npm package using typescirpt and bundle it through webpack. When, I try to use the package in other module. Let's see my package name is 'myLibrary' and then the module ...
ninja's user avatar
  • 199
0 votes
0 answers
29 views

Compiled with problems: × ERROR Module not found: Error: Can't resolve

I have a Typescript project that I'm trying to get packaged into Electron via Webpack. When I do npm run start I get the following errors: Compiled with problems: × ERROR Module not found: Error: Can'...
Jorge Rodriguez's user avatar
1 vote
1 answer
24 views

Angular Excluding dynamic *.js import from webpack

I do the following: ngOnInit() { if (this.myCondition) { import("../../somePath/myJsFile").then((myModule) => { myModule.doSomething(); } } ... } In this case,...
Heiko Kendziorra's user avatar
0 votes
0 answers
17 views

Webpack React - Html Loader Issue

./legacy/src/User/UserDirective.tpl.html:1:1 - Error: Module parse failed: Unexpected token (1:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to ...
Anil patil's user avatar
0 votes
1 answer
20 views

Webpack + ts-loader fails on stage 3 decorators: Unexpected character '@'

The following code: const decorator = (constructor: any, _context: any) => constructor @decorator export class Decorated {} fails in Webpack + ts-loader with the message: Unexpected character '@' ...
Jeroen Knoef's user avatar
0 votes
1 answer
12 views

source-map-analyzer: Unable to find a source map with react-app-rewired

After building my React app with react-app-rewired and running source-map-explorer to analyze the bundle size, I got the following error output in the terminal: Below is my setup: confg-overrides.js ...
William Le's user avatar
-1 votes
0 answers
19 views

Webpack Error when hosting an application on local machine

I have got an application code from git repository : https://github.com/drminnaar/noteworx-react-mongodb so as mentioned in the steps to locally host this application on my machine. I tried npm run ...
Akash's user avatar
  • 1
1 vote
0 answers
28 views

Why are code changes from vscode not reflected in my React server, even when terminal updates?

I'm working on a React web server through Sharetribe, but the changes I code don't affect my server. However, I see them in terminal, and I get a message saying something like "restarting due to ...
sija78's user avatar
  • 11
0 votes
1 answer
10 views

Cannot get jQuery to work when using webpack 5

I am trying to change a legacy application to use webpack 5. I have added this in home.js: import $ from "jquery"; window.jQuery = $; window.$ = $; When I build the project with webpack, in ...
Majid Fouladpour's user avatar
0 votes
1 answer
29 views

Webpack serve (or another npm script) in ASP.NET Core non-spa project

I am working on an ASP.NET Core non-spa project in frontend part, which is mixed with backend. What I need, that just start webpack-dev-server (or other npm script, which will watching), when I am ...
Ashot Khanamiryan's user avatar
0 votes
0 answers
13 views

Safari does not connect to aliased hostname on localhost via https

Since the most recent Safari update I cannot connect to my local React apps via https on localhost via local domain aliases anymore. However, I can access them via https://localhost:<someport> ...
Flo Ragossnig's user avatar
0 votes
0 answers
33 views
+50

NextJS webpack: Asset Modules Plugin has been initialized using a generator object that does not match the API schema

I'm using NextJS and in next.config, I'm using some custom webpack configs. My next.config.js file is as follows: const { i18n } = require('./next-i18next.config') const TerserPlugin = require("...
Zain763's user avatar
  • 67
0 votes
0 answers
14 views

Is it possible to run webpack configs sequentially, one after another, not in parallel, and use output of previous config as an entry for next one?

As in the question, is it possible? This is my webpack.config.js: const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ...
ar_IGT's user avatar
  • 1
0 votes
0 answers
15 views

Overriding Angular DomElementSchemaRegistry using @ngtools/webpack

My end goal is to start using a web component library, but also with the preferred outcome of not disabling component validation using CUSTOM_ELEMENTS_SCHEMA since this is an important and valuable ...
ajbrun's user avatar
  • 161
0 votes
0 answers
12 views

Unable to configure rehype-autolink-headings

This is my webpack config: // Generated using webpack-cli https://github.com/webpack/webpack-cli import path from "path"; import HtmlWebpackPlugin from "html-webpack-plugin"; ...
captain-yossarian from Ukraine's user avatar
0 votes
0 answers
8 views

Workbox Webpack Plugin GenerateSW (v7.x.x) importWorkboxFrom property is not expected

Recently I've upgraded my webpack configurations from v4 to v5, along with upgraded other related packages. From those packages, I upgraded workbox-webpack-plugin also to latest version (v7.0.0). Now ...
Shivam Verma's user avatar
2 votes
1 answer
56 views

How do I resolve img src not being recognized?

Using TypeScript to prepend a header across several html pages and I'm having trouble getting it to recognize and img src. The image doesnt load and if I try to open the image I get an error stating &...
astro0725's user avatar
0 votes
0 answers
25 views

Shared module is not available for eager consumption error with vendors

I have been implementing a micro-frontend module (MF1) with Module Federation to extend an existing React/Redux application. My new application (MF1) will act as a host and a remote at the same time ...
Dushan Ranasinghage's user avatar
0 votes
0 answers
10 views

How to add web-tree-sitter to a NextJS project?

I want to be able to generate ASTs by parsing code typed on my NextJS web app. I saw that I should be using web-tree-sitter to achieve such a thing. I successfully used Docker to generate the tree-...
Esteban Vargas's user avatar
0 votes
0 answers
15 views

The 'Use Client' directive in NextJS using TurboRepo is causing a loader error, "You may need an appropriate loader to handle this file type"

This is the error Module parse failed: Unexpected token (6:23) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://...
Scrubster's user avatar
0 votes
0 answers
29 views

Remove Webpack's IIFE module wrapping to produce a row JS script bundle file

I use Webpack 5 in my .net application to bundle my JavaScript and LESS files. I have multiple JavaScript files and need to bundle them into one file. After bundling into one file each separate ...
Malinthaz1991's user avatar
0 votes
1 answer
25 views

How can I bind break points in both my Angular application and library in VSCode, I can only get working in one or the other, not both

I am attempting to get debugging in vscode working for both my application and my lib for Angular 16 at the same time. The structure is as follows: ./root ./root/my-app/src ./root/lib/projects/my-lib ...
Mike's user avatar
  • 675
0 votes
0 answers
18 views

How to set proxy in electron use webpack?

I'm using electron-react-boilerplate set proxy in webpack devServer, but not work The directory structure of this project is as follows: use axios const BASE_URL = process.env.NODE_ENV !== '...
宋永涛's user avatar
-1 votes
1 answer
17 views

Typescript, Webpack, AWS SAM and VSCode

I'm working with a dev team that has chosen the hardest possible configuration to get VSCode debugging with SAM. They are using webpack, because they have to use TSyringe (don't get me started) and ...
Jason's user avatar
  • 939
0 votes
0 answers
4 views

I have webpack.getAppPath error on old nativescript project

I am new to Nativescript and I get this error. what can I use instead of webpack.getapppath. TypeError: nsWebpack.getAppPath is not a function at module.exports (/Users/murataktay/Downloads/...
Murat Aktay's user avatar
1 vote
1 answer
19 views

Webpack5 config with SCSS @import inside another SCSS files error

When I use @import directive in SCSS file the imported file relative paths are calculated as relative path of SCSS file imported with JS. fs structure: /script.js /subfolder/ /image.png /substyle....
Loran's user avatar
  • 21

1
2 3 4 5
851