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
20 views

Refresh or typing URL gives 404 error on webpack production build in React.js. How to fix it?

I'm using React Router v4 and Webpack for build project. When I build my application in production mode and refresh the page I'm getting 404 error. "The request path could not been found" But when I ...
0
votes
0answers
7 views

Webpack-dev-server refresh page error, and can not be hot overloaded

Learning Vue, I thought about not relying on Vue-Cli and configuring webpack myself, but I found a lot of problems. I configured the hot module replacement(HMR) according to the documents, but I ...
0
votes
0answers
9 views

How to bundle function that is declared but not read in Webpack?

My function is executed from outside of my app, and Webpack is skipping it during a build because it's "declared but never read." How to force that specific function to be added during bundling?
1
vote
1answer
30 views

What's the proper way to inform users to refresh the browser on a SPA website (when .js files are changed)

I'm looking for a proper way to inform users about an updated website version. Whenever I upload new production .js files some parts of the website still works properly without refreshing the browser,...
0
votes
0answers
21 views

Building express backend with webpack

I'm trying to build our NodeJS backend using webpack. I cannot find a definitive answer whether it is feasible or not to pack the node modules together in the bundle. For the moment I have a build ...
1
vote
2answers
21 views

How to deal with webpack chunk updated on server?

We have a React application with code splitting using React.lazy and Suspend. Every Tuesday we deploy a new version and so our chunks will change too. The problem we have right now is if our user did ...
-1
votes
0answers
6 views

what is wrong with my code? I tried npx webpack

I am trying to set up a webpack in visual studio code with javascript but I ran into a problem. Here's the screenshot: https://cdn.discordapp.com/attachments/506142922727751721/570078542637957121/...
0
votes
1answer
31 views

Angular main.js file large size

My project user angular version 7, and here is the angular.json configuration when I build for production my main.js file is way too large nearly 12MB in size which makes my app to load the page ...
0
votes
0answers
12 views

How to get webpack to export a dependency as separate file?

I have a webpack/React project that builds fine and creates a minified and bundled file in dist/file.min.js. However, I would also like one of the javascript files for a dependency I specify with ...
0
votes
1answer
21 views

Images not loading in React app with Webpack despite having file loaders (url-loader)

I have a React app that uses Webpack and Babel. I am trying to load an image anyway possible (svg, png...) but I keep getting the error "Unexpected character '�' (1:0) > 1 | �PNG". I installed url-...
0
votes
0answers
5 views

Use terser webpack plugin instead of uglify when copying sources via plugin

I have following packages in my webpack.config.js: const CopyWebpackPlugin = require("copy-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const UglifyJS = require("uglify-es"...
0
votes
0answers
10 views

Does Webpack provide a global error hook when a chunk load fails?

After a migration from RequireJS to Webpack 4, I was looking for an equivalent to require.onError to capture runtime chunk load errors, but I couldn't find any options to add a global error handler. ...
1
vote
0answers
28 views

I get 404 when try to refresh url manually on hosting

When I run my project locally (webpack-dev-server) I can manually change url and see the particular component. So, locally, everything works fine, I added historyApiFallBack to my webpack config etc ...
0
votes
0answers
7 views

webpack mocha issue with same filename in different directories

Directory structure test ├── a │ └── test_index.js | └── test_basic.js └── b └── test_index.js Webpack settings entry: GlobEntry('./test/**/test_*.js', './test/mocha.js'), ...
0
votes
0answers
16 views

How to get webpack.config.js?

I want to create app that uses Django backend, and Angular frontend. I found some article that shows how to do this. I understand everything, but I stuck at ejecting webpack.config.js. "ng eject" ...
0
votes
1answer
12 views

Use different file with functions in Webpack

I use Laravel Mix for compiling JS files. I want to move all my functions to another file named functions.js. In app.js I want to include this file. functions.js var functions = { test: function() ...
0
votes
0answers
33 views

Errors switching from Gulp to Webpack

I want to switch from gulp to webpack but I am facing some issues that I can't figure out. First, I'm making an editor, and with gulp I used to instantiate the editor this way: new RSMDE({ ...
1
vote
1answer
18 views

Separate Develop and Production files in npm or webpack

I have seen in react native project, we use index.android.js and index.ios.js to separate index.js file for android and ios. Now is it possible for develop and production environment to separate ...
0
votes
0answers
12 views

Webpack, JavaScript generated HTML (DOM Manipulation) w. Images

I have a JSON File (file.json) and in this File, there is an Array with mutiple local URLs. [ "./img/sample.jpg", "./img/example.jpg", "./img/image.jpg", "./img/img.jpg" ] Now in my ...
2
votes
1answer
24 views

How to import JS in TS with noImplicityAny and without allowJs

I'm using Webpack and @babel/typescript to compile a mixed TypeScript and JavaScript project. I'm using --noImplicitAny to encourage taking advantage of typing. I'm not using --allowJs because my ...
0
votes
0answers
22 views

How to code split with django and webpack

I managed to include bundle splitting in the webpack.config.js, so I now have a main.js, vendors~main.main.js and a npm.core-js.js. In Django I'm loading the .js files with script-tags like that: {% ...
0
votes
0answers
7 views

Karma conf: Uncaught SyntaxError in Chrome Headless

I am getting the following Chrome Headless error (React 16). My package.json has all the karma plugins for chai, mocha, sinon, webpack, Chrome-launcher. cross-env NODE_ENV=test karma start karma.conf....
0
votes
0answers
8 views

html-webpack-plugin include local linked js and css files when generating html

I have a template file which I use to generate the final output html file using the html-webpack-plugin. Is there a way to include referenced local files when generating the final file? I have the ...
0
votes
0answers
5 views

How to set client host and port on webpack-hot-client when using server option?

I want to build a full stack koa server, there has some example on webpack-hot-client doc. Here is my code: const KoaWebpack = require('koa-webpack') const app = new Koa() app.use(myApi) // server ...
0
votes
0answers
9 views

Invalid mapping errors when executing 'npm run build'

The React app runs run using 'npm start' but will not execute the build script without failing. I have done some research on the bluebird library. I think it is a an unhandled exception which is a ...
0
votes
3answers
15 views

what does the “modules:auto” means in @babel/preset-env field?

the babel docs say the modules default option is auto, what does the auto means? does it transform the "import" to "require" or not? what's the difference between "modules: false" and "modules: auto"? ...
0
votes
1answer
16 views

How can I use proxyTable to make cross origin request in vue-cli?

I want to use proxyTable with axios in my vue-cli project. In my config/index.js, I put code like this: proxyTable: { '/getnews': { target: 'https://xx.xxx.xx.x' changeOrigin: true, ...
0
votes
0answers
23 views

how to bundle on page javascript files for several different web-pages?

I have multiple pages around 800. Those pages have around 10 on page js and css files apart from common layout. I can bundle the layout files in one bundle.js file but how to deal with 800 view ...
0
votes
0answers
8 views

JS heap limit exceeded while running angular karma test

JS heap memory exceeded exception while running karma test. On further analysis we found that commenting istanbul-instrumental-loader solves the issue config.module.rules.push({ test: /\....
0
votes
0answers
12 views

Is this the correct way to babel transpile the entire node_modules?

I have managed to get webpack working without any errors. However, I am not even sure if I am doing this the correct way at all. I use a lot of node modules that are es6 so I decided to get babel to ...
1
vote
1answer
27 views

How style-loader works with css-loader?

I know that style-loader adds CSS to a dom by injecting a tag. And css-loader gets css as string when it meets require('./style.css');. But, How style-loader plays with css-loader?? I'm reading ...
0
votes
1answer
28 views

React/Webpack - Migrate from webpack 1 to 4, Invalid configuration object

There is already a post with a problem similar to mine, but its solution did not help me: Webpack error: configuration has an unknown property 'postcss' I have the following error: Invalid ...
0
votes
1answer
24 views

How to import multiple images from assets folder

I am working with web pack and trying to import multiple images to JavaScript from the folder they are located in but not sure how to do it all together. The code below works but only for importing ...
0
votes
1answer
17 views

How to change colors of inline svg packaged with webpack?

I've tried a variety of things and it always comes out black. I've got this svg: <!-- Generated by IcoMoon.io --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"...
0
votes
1answer
20 views

Webpack / Typescript not correctly parsing for-await loop

Hitting a snag with yarn build in my vue-cli typescript project: tmpDataDocs is an array of Promise<DisplayableData> objects. As far as I understand the for await control structure, the type of ...
0
votes
1answer
25 views

How does webpack do code splitting for vendor file in this sample app

I am new to Webpack. I understand basic concepts of bundeling, code-splitting and chunks, etc. Now I am trying to sprinkle "Webpack magic" into a legacy angularjs app that uses ui-router. So I ...
1
vote
0answers
15 views

Watch a folder when adding files and write the filename into some file

Running a Webpack+Vue project. I need to watch the src folder for new files, and append the file names into .eslintrc, so ESLint will lint the new files in real time. (Because it's an old large ...
0
votes
0answers
9 views

Module parse failed: Unexpected token react + webpack + babel

I'm using react with mdbreact and web pack. The problems come when I have to import the mdbreact modules that I have imported at index.js it says this about the three CSS files: Module parse failed: ...
1
vote
0answers
32 views

How to configure react project to resolve entry files based on the name of the parent folder, instead of defaulting to index.js?

I have a React project where I'm using webpack and babel configuration created by create-react-app. The project has a structure similar to this: root ├── components/ │ └── Button/ │ ├── ...
0
votes
1answer
14 views

Splitting Vue methods into multiple files?

Currently i have a file in which i am rendering stuff conditionally based on route params. I intend to have 9 different params that render 9 different sets of information/features. At the moment i ...
0
votes
0answers
16 views

Handsontable not loading when using webpack

I've recently switched over to webpack from manually loading my JS libraries. Like others (see: #4053 and #3718) I've had to tamper with webpack.config.js, it now looks like so: const path = require(...
0
votes
0answers
15 views

Configure Webpack for GLTF

I am trying to load GLTF models into react-app using threejs, The app was created using create-react-app. I can render simple 3D shapes that are from react app, but when i try loading 3D models in ...
0
votes
0answers
17 views

Webpack Dev Server CLI: Is there a way to specify which entry point to load?

Currently, this is how I start the dev server: webpack-dev-server --config webpack.dev.config.js I'm trying to add a therapist entry point to my dev webpack config like this: module.exports = { ...
0
votes
0answers
14 views

Nuxtjs brings unexpected token < when importing vue-image-crop-upload library

I'm trying to make a cropped image and then upload it to amazon in my NuxtJs app. The problem comes when I import library vue-image-crop-upload and get unexpected token <. Or briefly Syntax error ...
0
votes
0answers
19 views

What are the consequences of mixing es6 and cjs imports in webpack 4?

WebPack 4 allows for tree shaking when bundling node modules and requires es6 modules to be able to successfully apply tree shaking (https://webpack.js.org/guides/tree-shaking/). The es6 version of a ...
0
votes
0answers
15 views

Visual Studio Code terminal isn't showing progress properly

I've tried searching up this problem to no avail; however, it's consistently been like this across many devices and many terminals, and most recently my zsh shell running inside of Visual Studio Code. ...
0
votes
0answers
17 views

How to interpret npm debug log for django-react tutorial

I am trying to run the tutorial project from the django rest framework website. I built the project inside a PyCharm venv. https://www.valentinog.com/blog/drf/#...
1
vote
0answers
45 views

How to fix “Error: Can't resolve all parameters for ApplicationModule”

I'm trying to run an Angular application using webpack but keep getting this error in the browser console during app startup (seems to come from compiler.js): Error: Can't resolve all parameters for ...
0
votes
0answers
14 views

Searchable JS/Next.js site text extraction

I have a Next.js documentation site at https://logary.tech source, and would like to implement the document search, e.g. with Lunr. How do I program babel/webpack/nextjs to also extract text (perhaps ...
0
votes
0answers
32 views

css and scss not loaded on some components - reactjs

After updating our project to a new version of the react (15.6 to 16.2), 70% of the components of React ceased loading the css. To put it bluntly, css works only in the header and footer. Moreover, ...