Newest 'webpack' Questions - Stack Overflow

Questions tagged [webpack]

Webpack is JavaScript module bundler. Webpack takes modules with dependencies and generates static assets representing those modules. Webpack's key features are rooted in extensibility and enabling developers to use best-practices in Web Architecture and Web Performance.

0
votes
0answers
8 views

Why is a React source included twice in Firefox debugger?

I "inherited" a create-react-app on which I am updating some functionality. I am familiar with JS and can code in React, but I do not know much about webpack, npm, hot reload or the rest of the ...
0
votes
0answers
7 views

How do I disable or avoid webpack warnings about differently cased drive letters when building from VSCode?

I have a project that is built using webpack and I use VS Code to edit it. Whenever I build the project from OUTSIDE of VS Code, the webpack build succeeds without any warnings. However, when I build ...
-1
votes
0answers
31 views

Why would I implement scoped JavaScript design patterns when using webpack for bundling?

As I understand, when using webpack, each JavaScript file I have is being wrapped into it's own function (mainly for preventing global variables I suppose). Therefore, I'm confused about what's the ...
0
votes
0answers
9 views

HtmlWebpackPlugin Template Not Injecting Variables

I'm currently using Webpack (v4) and I'm having issues getting variables and html injected into the html document properly. If I use the following configuration: //rules rules: [ { test: ...
0
votes
0answers
4 views

Webpack-cli init can't add an entry point

I'm running npx webpack-cli init. The first question is will your application have multiple bundles? No Then the next question: Which will be your application entry point? the prompt is there but I ...
0
votes
0answers
13 views

How to use purchased UI Theme with Django

I'm working with Django framework and I've recently purchased a dashboard Theme in order to give to my application a nice front end. My idea is to use styles, components, fonts and everything else ...
0
votes
1answer
7 views

When using Socket.io-client, Node JS express, and Webpack I am getting “require is not defined” error in the browser

I have an Node JS Express Application running. I am trying to integrate Socket.io with the server to connect to it on the Client. My server.ts file: import express from "express"; import { ...
0
votes
0answers
7 views

Configuration to support .jsx and .ts in one project

My react components are build up on .jsx but now i am migrating them one-by-one on typescript. Facing babel configuration issue to support both ts and jsx. Also my webpack is not giving proper linting ...
0
votes
0answers
18 views

Dynamic loading of external modules in webpack fails

I am trying to set up the following architecture: a core React application that gets built with some basic functionality, and the ability to load additional React components at runtime. These ...
0
votes
0answers
21 views

Oauth Token Found in Commit - how do i fix my webpack env var settings?

I cannot escape this [GitHub] OAuth access token found in commit problem. Every time i run a yarn run build and deploy it, I get a warning & revocation of my git personal token, because it ...
0
votes
0answers
10 views

Webpack load different modules based on context

Is it possible to make webpack load another module based on some context information? For example I've two versions of my React application: desktop and mobile In my index.js I decide which ...
0
votes
0answers
21 views

Import module exported by webpack

I have created a JS file by using webpack export. I am trying to import main.JS file in react app. I am not able to import JS file created by webpack. Is this way of importing JS is the right ...
0
votes
1answer
14 views

optimize build size vuejs

When I build the production build, the size of the css+js is going up to 3.8MB. The only thing I could see is bootstrap which is taking half of the size amongst 3.8MB. The app contains CRUD ...
0
votes
0answers
10 views

Include index.htm referenced js files into webpack bundle

I am working on an angularjs project, that has an index.html file where all the directives and controllers and others as such are referenced. I am new to using webpack, but after a lot of reading I ...
0
votes
1answer
14 views

How to configure Production build and Development Build vue-cli

I want to setup a npm script for production build and one for development build. like npm run build for production and npm run buildDev for development. I have some configurations in each env file ...
0
votes
1answer
12 views

Adding ActiveAdmin to a RoR application using webpack

Im trying to add ActiveAdmin to a (massive) application. I follow all the steps here: https://activeadmin.info/0-installation.html#setting-up-active-admin The installation process was fine. My ...
0
votes
1answer
12 views

Webpack - optimizarion node_modules & import

Configuring webpack I was wondering something for the optimization. I have two JS files index.js and helper.js. I import helper.js in index.js like that: import * as helper from 'helper.js'; In ...
0
votes
0answers
4 views

How to create 2 different manifest.json file for react project with 2 entry points using webpack ManifestPlugin?

I have a react project contains two modules with 2 entry points. I have configured the web pack in a way to create two bundles (js) in the output folder like below. dist - Project Output 1 ...
0
votes
0answers
26 views

How to extract CSS to a `critical.css` stylesheet via an `import` statement with Webpack?

Background Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:- components/action_button/...
0
votes
0answers
22 views

'npm run build' in linked dependency breaks the running react app

it seems that rebuilding a local linked dependency breaks the main package that is running with react-scripts-ts start with a "not found" for file dist/index.js of the linked module. This is not ...
0
votes
1answer
12 views

Webpack SSR Node.js module.export is not exported anything

I am trying to integrate react ssr to existing nodejs express application. I still do not want to make the whole application to webpack, I am trying to make only a path to render the react code. src/...
0
votes
2answers
28 views

Angular 7, Warning in budget, maximum exceeded, didn't get what is wrong?

I have a angular 7 app. When I build project with --prod, i have a warning in budgets. angular.json "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "...
0
votes
1answer
26 views

cannot resolve the error ProgressPlugin TypeError: Cannot read property 'tap' of undefined

I'm getting an error during npm run build here is the error Compiling client E:\ui\sheraspace_ui\node_modules\webpack\lib\ProgressPlugin.js:223 compilation.hooks.addEntry.tap("...
0
votes
0answers
12 views

How to bundle my node.js app in windows to work on ARM CPU

I'm trying to use Webpack.js to bundle my node.js application in the windows environment. The problem is that because I'm using windows for developing, some node module packages have postInstall ...
0
votes
0answers
34 views

It keeps saying I am missing a semi colon in my css when doing npm run production

Edit I am using Laravel with Vue and currently I am using vue route lazy loading. All things runs fine when I compile with npm dev. However when I did npm production it says I have a CSS missed ...
0
votes
0answers
14 views

React application shows blank screen( sometimes) in production?

I have a react application with the webpack configs. but sometimes i am getting a blank screen issue in normal browser mode. When i open this in Incognito/Private mode, this issue doesn't happen. From ...
-2
votes
0answers
10 views

why unexpected token operator error from UglifyJs?

ERROR in client.js from UglifyJs Unexpected token operator «=», expected punc «,». Webpack is 3. Didn't understand what the issue.
0
votes
0answers
9 views

Webpack programmatically replace a child module

I have a standard React app, within which I'm trying to build in a storybook for the standard UI components. Because the way some components are structured, they are making API calls to a server (it's ...
4
votes
0answers
34 views

Error compiling Vue.js single-file component with scss block using custom webpack config

I'm encountering an error while trying to setup scss in a vue project using single-file components. I currently encounter this error when I try to use a <style lang="scss"> block, but otherwise ...
0
votes
0answers
34 views

CSS Loader Invalid Options options should NOT have additional properties

New nativescript-vue developer here... I am suddenly getting tns build errors on every /components/*.vue file when I run my normal build routine: $ rm -rf node_modules/ hooks/ platforms/ package-...
0
votes
0answers
17 views

Webpack log output issue

I have a webpack - based node.js project. When I start it (npm run start) it goes to openBrowser function (react-dev-utils) and inside of it apparently fails to compile the app. The log output is just ...
0
votes
0answers
7 views

Output of image_pack_tag after moving to Webpacker is wrong for images

I moved to webpack and have successfully included all JS & CSS. Final step is to move all my images from the assets/images folder into /app/webpacker/images. After this move, I've included the ...
0
votes
2answers
13 views

Webpack entry with hyphen

In webpack, I am trying to achieve this: entry: { test-1: './src/test-1/main.js', test-2: './src/test-2/main.js', test-3: './src/test-3/main.js' }, ... However, it not possible to have a ...
0
votes
1answer
17 views

aws-amplify-react causes webpack compilation to fail

I'm trying to learn about how to add AWS components to JS apps and, amongst other things, have been following parts of this tutorial. But I am stuck, when I add this line: import { withAuthenticator ...
1
vote
1answer
23 views

Configure webpack to generate separate vendor js files for each entry

I have multiple js apps in one application. Each js app has different dependency on js libraries and each js app is an entry for webpack. Current webpack setting is generating just one vendor.bundle....
1
vote
1answer
17 views

Angular 5 transpiling without support for IE11 (Object.values is not converted)

We are noticing that in a service we had a failure to transform Object.values in code like: myMethod(items = Object.values(this.config)) { so, it would stay that way even when rendered in ie 11... ...
0
votes
0answers
17 views

Why some codes loosing on compile scss to css by webpack?

I have some scss codes and after run npm run watch or npm run prod some codes like -webkit-flex-direction: column; will be loosing. This is an example: .box{ flex-direction: column; -...
1
vote
0answers
16 views

Using webpack bundle analyzer with angular workspace file

I am trying to optimize the ng2-smart-table package, which we are using as a dependency, as I have noticed it has a big unnecessary dependency on lodash, even though it only uses a tiny portion of ...
0
votes
1answer
13 views

How to use Webpack & Terser to only compress code

I'm attempting to use webpack to compress my code (remove new lines and whitespaces) and nothing else. I don't want any webpack__require__, no mangling, no uglifying, simply just remove whitespace and ...
1
vote
0answers
20 views

CopyWebpackPlugin - ignore a folder

Using CopyWebpackPlugin, I am not able to ignore a specific folder or a specific file. It copies everything. What I have done in the webpack.config.js: new CopyWebpackPlugin([ { ...
0
votes
0answers
19 views

Duplicated imports with Webpack 4

Just discovered today that I have a library that's being included 2 times in my project. First, there's: ga-track and then there's ga-track-scroll. The second requires the first to send events and I ...
1
vote
0answers
19 views

Webpack with bootstrap and less-loader

I am using webpack for build and less-loader for transforming less to css. In one of the less files I want to import bootstrap like this. @import "~bootstrap/less/bootstrap"; But it is not able to ...
0
votes
0answers
9 views

React browser-sync

I am running a react project and tried turned off browser-sync but still get the following in the Network dev tools. Does anyone know what this could be ? It is really slowing the project down and can'...
0
votes
1answer
13 views

Typescript is throwing a import statement formatting error where there is none because webpack needs that kind of formatting. How to stop this?

I'm new to typescript and webpack and I'm trying to set up a project to learn how to use them together but typescript is showing an error that isn't one. The "./testFunction.ts" part of my code is ...
2
votes
1answer
27 views

How can I keep comments when minifying my React code?

I have the following JSX in a React app: render() { return ( <div> {/* A JSX comment */} </div> ) } I am using webpack to compile and minify the code. In my webpack ...
0
votes
0answers
13 views

Laravel-mix is not working on production mode

I have an issue with Laravel-mix. I have installed npm and it is working fine till i want to test the purifyCss option. This is the webpack.mix.js code: mix.setPublicPath('public'); mix.sass('...
0
votes
0answers
6 views

elastic-apm-node with Webpack, Typescript & ES6 not working?

I am using a TypeScript setup with webpack and babel and get the following error when trying to include elastic-apm-node. I have the settings in environment variables. import * as apm from 'elastic-...
0
votes
1answer
24 views

Webpack4 with typescript cannot resolve module

I'v just taken over a project, which has really bad setup of vue with typescript. Trying to create some speed improvement but the existing webpack build (v3) didn't allow me to do anything significant....
0
votes
1answer
24 views

How to access environment variables in react from docker and webpack

I have a react front-end application that is being built via webpack and containerised using docker. Goal: Is to be able to define environment variables in docker and be able to access the ...
0
votes
0answers
16 views

Webpack module resolution vs typescript

When building an angular project with typescript and webpack, I came to notice that we need module resolution setting for both tsconfig file and webpack config file. My question is why do we need ...