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.
webpack
42,781
questions
0
votes
0
answers
7
views
Figma Plugin with react
Greetigns,
I’m trying to build a Figma plugin using React and typscript, somehow I get a weird error saying
Uncaught TypeError: Cannot read properties of undefined (reading 'createElement')
even ...
- 13
0
votes
1
answer
17
views
Why is my webpack bundlerer creating multiple main.js files?
I noticed tree shaking wasn't correctly because I was compiling my TypeScript to 'commonjs'. I changed this to 'ES2015' and now my output build looks like this:
enter image description here.
What's ...
- 11
-1
votes
0
answers
14
views
AngularJS Comp in Angular15
Tech Stack: Angular 15x, React18, webpack5.
Issue: we have a AngularJS1.6 component which we used to bootstrap as below, which worked fine in Angular8, React16, webapack4, but post upgrade started to ...
- 1
1
vote
0
answers
14
views
How can I solve the system reaching limit number of file watchs in an Expo program?
I'm doing an program in Expo, when I try to test the program(especificaly in web) it's been printing this error.
Error: ENOSPC: System limit for number of file watchers reached, watch '/home/gabriel/...
1
vote
1
answer
28
views
Laravel, Vue and Apache2 with hot reload with reverse proxy
I´ve been banging my head for over 2 weeks with this and can't make it work for the life of me.
Here's the information:
My site is on a remote server in Digital Ocean, running Ubuntu and apache2.
My ...
- 47
1
vote
1
answer
25
views
Porting webapck from webpack 4.29.6 to 5.93.0
I'm trying to upgrade my application in electron, specifically from webpack 4.29.6 to 5.93.0, but I'm running into a problem that I can't solve. The error during compilation is this:
[webpack-cli] ...
- 121
0
votes
0
answers
14
views
TypeError: loaderUtils.getOption is not a function
EDIT
I am following a Full Stack Development Course by freeCodeCamp right here. When I run the command npm start to start React App, the browser is showing nothing.
When I back with my code I can see ...
-1
votes
0
answers
30
views
TypeError: Cannot read 'register' of undefined
Title:
TypeError: Cannot read 'register' of undefined
Description:
I'm developing a React application (kpiApp) using a specific framework. When I try to register my application, I encounter the ...
-1
votes
0
answers
40
views
Save function to json and load it back (external dependencies + webpack)
I'm trying to save a function into a JSON and load it back.
My code is as following :
import { Style } from 'external-lib'
function testFunction() { return new Style(); }
var str = String(...
- 29
0
votes
0
answers
19
views
SassError: Can't find stylesheet to import. - while importing styles from external package
I have a React application which use custom Webpack config. I want to add library for components, specifically @carbon/react in version 1.62.1, the newest available.
My application uses React 18, ...
- 11
0
votes
0
answers
15
views
webpack devServer: how to open browser using local IP address instead of localhost
I am developing for mobile React apps, and use a QR code on the page to set my mobile browser to the address of my test page on my desktop.
Currently the devServer always opens to localhost, and I ...
0
votes
2
answers
33
views
Minimum working example for Slickgrid + Webpack + Flask
I want to include slickgrid (npm install slickgrid, slickgrid.net) in my Python Flask project and I don't want to use CDN, so I'm looking at a Webpack solution.
I have been following the procedure for ...
- 15
0
votes
0
answers
7
views
Functioning of a webpack caching loader
The following text and code block is from SurviveJS book explaining how caching loader works:
Caching with loaders
Although webpack caches loaders by default unless they set this.cacheable(false),
...
- 15
0
votes
0
answers
14
views
Issue in accessing aws-iot-device-sdk-v2 apis from react application
I am trying to use AWS IoT Device SDK JS 2 with a simple ReactJS application.
The application is targeted to run in a browser.
I have all the required certificates and credentials with me to configure ...
- 11.9k
0
votes
0
answers
18
views
How to configure webpack to work with mupdf.js in an Electron, T
I was trying to integrate document viewer tabs in an electron app. First I tried using native bindings to create a node addon but the IPC between main and renderer processes along with mutexes was ...
1
vote
0
answers
31
views
Getting webpack_dev_server_1.default.addDevServerEntrypoints is not a function after running npm run start
I added something under "Resolutions" in my package.json file to resolve some vulnerabilities. Running npm install and npm run build works fine as expected. However after running npm run ...
- 11
1
vote
0
answers
59
views
Dynamically Import & Parse JSON Files Within a URI `File` Scheme - Serverless Environment
This problem that I'm facing is very unique to me and I hope it may not be to you. Essentially, I am working on a React project built with CRA and it won't/can't be hosted on a server. The goal of the ...
- 11
0
votes
0
answers
14
views
How to build a NestJS app using builder=webpack CLI option?
We are having a really hard time building our monorepo app using Nest since it requires the node_modules folder to be present. However, i just discovered that there is a nest build --builder=webpack ...
- 33.1k
0
votes
0
answers
18
views
Angular webpack lazy loaded routes ChunkLoadError
I have an angular app with ngsw enabled and I am using lazy loaded routes like:
{
path: 'some-route',
loadChildren: () => import('./modules/some-route.module').then(m => m....
- 11
-8
votes
0
answers
29
views
Failing compilation of a react project [closed]
i am trying to compile a react project, but i get the error in the attached file?
I am using Webpack 4.44.2 and React-Spring 8.0.27
Can you please help ?
It has something to do with the question mark ...
0
votes
0
answers
6
views
Event listeners in imported TypeScript service worker not triggered
I’m trying to import a service worker file written in TypeScript using importScripts in another service worker file. After some checks, it seems that the file is loaded fine, but the event listeners ...
- 1
0
votes
0
answers
15
views
Integration of PHP frontend app (with Angular v1.4) into React.js main SPA project as a microfrontend [closed]
I have a front-end project created using PHP, and inside it, we are using Angular v1.4 for building and routing. My point is, we are now working to add a new technology stack like React.js. So, I have ...
0
votes
0
answers
15
views
Disable webpackChunkName comment on Production env [closed]
I'm trying to rename chunk for easier to debug in lighthouse. However, I find that size of chunk increase slightly after I have renamed it. I guest it have to store more bytes for the name of the ...
-3
votes
0
answers
27
views
Why does webpack-dev-server@5 need at least Node 18?
I am developing an old program with Node version 16. When I try to upgrade to use Webpack 5, I notice that the Node version dependency of webpack-dev-server@5 is 18. Why? Are there any features or ...
-1
votes
0
answers
47
views
ERROR: Module not found: Error: Package path . is not exported from
I am using Node and express along with svelte on the frontend, I have npm installed the "socket.io-client" package on the client side, but when I try to import it, I get this error.
I see ...
0
votes
0
answers
8
views
Has anyone successfully been able to make a cross platform package for React Native and React that is a Design System using rollupjs and styled compon
Has anyone successfully created a cross-platform package for React Native and React that serves as a Design System using RollupJS and styled-components?
I know it's possible to build and style ...
- 71
0
votes
0
answers
9
views
Rendering chunks in parallel to the entry file
enter image description here
enter image description here
I want to solve the following problem in js:
When the page refreshes, I have 1 entry file pulled up in html and after it has loaded, its ...
-2
votes
0
answers
28
views
React library debugging and conribution. Debug Reactjs. Source code
I followed Development Workflow steps to start my research in React library.
However, I got stuck on last step with build command
yarn build react/index,react-dom/index --type=UMD
When I run this line ...
1
vote
1
answer
24
views
ASP.NET Core MVC with React Integration not finding my bundle.js on Production Server [Azure]
My code working fine on localhost but when I deploy to production, it is unable to find bundle.js:
enter image description here
It's perfectly working in development mode:
enter image description here
...
0
votes
1
answer
36
views
Imported styles from scss module are undefined
I am using CSS Module and SCSS as my styling in my app, but when I import my styles as:
import styles from './landing.module.scss'
The imported styles is undefined.
I am using:
"css-loader":...
- 89
0
votes
0
answers
14
views
Angular Module Federation MFE with angular material
I am creating angular 15 project and adding MFEs. I am not able to configure angular material in this project.
Please help with suitable guide or tutorial to follow instructions
- 25
0
votes
0
answers
14
views
How do i call a function from source using devtools on web.telegram.org?
so telegram uses webpack and there is callApi which looks like:
export function callApi<T extends keyof Methods>(fnName: T, ...args: MethodArgs<T>): MethodResponse<T> {
// @ts-...
- 25
-4
votes
0
answers
37
views
Setting up project for developing RxJS app [closed]
I am trying to set up VS Code project for developing RxJS apps. I am following this article.
I am trying to connect to the server using this url: localhost:9000/ but I keep getting Cannot GET / ...
- 107
-1
votes
0
answers
20
views
The command "yarn babel-node" throws an error [closed]
In a webpack project of the environment of VSCode,to learn ES Module and CommonJS,firstly I use the command "yarn add @bebel/node @babel/core @babel/preset-env --dev" to import some ...
- 1
0
votes
0
answers
26
views
Webpack: How do I replace <use> tag with actual svg data?
My index.html uses a svg in this way:
<button class="button--settings" id="button_settings">
<svg role="img">
<use href="assets/images/...
0
votes
1
answer
22
views
Content not from webpack is served from '/app' directory (Docker / Webpack)
I'm using Webpack configuration with docker.
Everything working well as development step. However this is not working for my preproduction and production step. The difference between these steps is ...
- 368
0
votes
1
answer
23
views
nextjs import multiple components from index manifest imports everything
BACKGROUND:
I have a project where I have all my UI components in a /components directory.
Right now I export each component in its own file as:
export function Component1() { ... }
and import them ...
- 300
0
votes
1
answer
21
views
NextJS 14 / React 18 post upgrade error: TypeError: can't access property "useState", dispatcher is null
I'm in a NextJS app that I've recently upgraded from NextJS 12 to 14, and upgraded React from 16 to 18... plus a bunch of other libraries. It's been a trek, and all the things are upgraded.
I am ...
- 13.8k
0
votes
0
answers
23
views
Why re-assign class methods to `this` in constructor in tappable Hook class?
Here is the code in webpack tappable source code:
class Hook {
constructor(args = [], name = undefined) {
this._args = args;
// ...
this.compile = this.compile;
this.tap = this.tap;
...
- 1
1
vote
0
answers
24
views
max-old-space-size not working while executing webpack command to build bundle
i have been getting javascript heap out of memory error while running webpack command to build my project
i have tried to put 4GB memory allocation to node for executing webpack
this is the ...
- 60
-3
votes
0
answers
28
views
Why is it that when I use a third-party packaged js file and modify its source code, the page does not take effect? [closed]
i used called maotu third-party lib [enter link description here][1] ,There are two features I don't need. I modified the source code, but it doesent't work.Specifically, on the page of the ...
- 15
0
votes
0
answers
38
views
Error: Webpack Compilation Error Module parse failed: Unexpected character '�' (1:0) [closed]
I am dealing with this error when trying to run a spec in Cypress but I am not able to find the root cause.
Error: Webpack Compilation Error
Module parse failed: Unexpected character '�' (1:0)
You may ...
- 309
1
vote
0
answers
15
views
Prevent webpack to add delay mechanism to an inlined script
I'm new with webpack and I don't understand at all why my webpack configuration is adding a delay mechanism at the end of the builded script, something like this:
var t = o.O(void 0, [4998], (() ...
- 11
0
votes
1
answer
30
views
How does AST traversal with Babel affect source maps even when no changes are made?
I have a custom Webpack loader where I'm traversing through the AST of the code using Babel to change the import name of a module. However, it seems like this is affecting the source maps of modules, ...
- 891
0
votes
0
answers
15
views
How do I set up next.js to use webpack?
Ive installed my app with npx create ..., installed webpack library and created webpack.config.js, when Im running it down the app does not use a webpack for assembling.I tried to change the settings ...
- 1
0
votes
1
answer
27
views
How to import global variables in webpack or rollup project
I want to create a module for CMS using Rollup or webpack.
I have a script tag that contains a few variables which I need to use in my webpack module, but I can't include them directly because these ...
- 49
-1
votes
1
answer
54
views
process is undefined when trying to provide environment variables to client code through webpack [duplicate]
I'm trying to provide access to certain environment variables in the front end code package by webpack, but process is always undefined. The application I'm working on is doing a bunch of extra stuff ...
- 7,495
1
vote
1
answer
35
views
Configuring Different Versions of Shared Library for Shell and Microfrontends
I am working on a project using Module Federation with a shell application and three microfrontends (a, b, c). I need to configure the setup so that:
The shell application uses [email protected].
Each ...
- 1,458
0
votes
1
answer
18
views
Lite-Server running script twice, interjecting wrong HTML tag
I have a simple website built using Node.js and TypeScript, which is prepared for distribution through webpack. When I open the output in browser, it works just fine. However, if I open the page using ...
- 43
0
votes
0
answers
10
views
Chunks with Dynamically Imported Components code Served Over HTTP Instead of HTTPS in Next.js App
We recently updated the packages in our turborepo, which includes a Node app and a Next.js app. After deploying, we noticed that some chunks are being served via HTTP instead of HTTPS, causing mixed ...
- 25