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,815
questions
2347
votes
67
answers
3.0m
views
Error message "error:0308010C:digital envelope routines::unsupported"
I created the default IntelliJ IDEA React project and got this:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (...
- 24.1k
2075
votes
7
answers
310k
views
NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed]
I'm trying to summarize my knowledge about the most popular JavaScript package managers, bundlers, and task runners. Please correct me if I'm wrong:
npm & bower are package managers. They just ...
- 45.4k
655
votes
23
answers
494k
views
Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0
I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node.js v15.0.1
Installed:
React v17.0.1,
node-sass v5.0.0,
Then I tried to import a blank .scss file to ...
- 6,713
553
votes
19
answers
1.0m
views
Getting Unexpected Token Export
I am trying to run some ES6 code in my project but I am getting an unexpected token export error.
export class MyClass {
constructor() {
console.log("es6");
}
}
- 5,587
517
votes
12
answers
715k
views
Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED [duplicate]
I'm having an issue with a Webpack build process that suddenly broke, resulting in the following error...
<s> [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules
node:...
- 5,929
502
votes
12
answers
377k
views
Managing jQuery plugin dependency in webpack
I'm using Webpack in my application, in which I create two entry points - bundle.js for all my JavaScript files/codes, and vendors.js for all libraries like jQuery and React. What do I do in order to ...
- 5,850
439
votes
37
answers
646k
views
How to Polyfill node core modules in webpack 5
webpack 5 no longer do auto-polyfilling for node core modules.
How to fix it please?
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer ...
- 4,481
437
votes
13
answers
437k
views
How to copy static files to build directory with Webpack?
I'm trying to move from Gulp to Webpack. In Gulp I have task which copies all files and folders from /static/ folder to /build/ folder. How to do the same with Webpack? Do I need some plugin?
- 47k
436
votes
13
answers
170k
views
What does the @ mean inside an import path?
I'm starting a new vue.js project so I used the vue-cli tool to scaffold out a new webpack project (i.e. vue init webpack).
As I was walking through the generated files I noticed the following imports ...
- 20.7k
414
votes
12
answers
560k
views
How to add fonts to create-react-app based projects?
I'm using create-react-app and prefer not to eject.
It's not clear where fonts imported via @font-face and loaded locally should go.
Namely, I'm loading
@font-face {
font-family: 'Myriad Pro ...
- 29.9k
413
votes
11
answers
398k
views
where is create-react-app webpack config and files?
I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations.
How does react-create-app work with webpack? Where are the ...
- 4,611
401
votes
6
answers
283k
views
How do I generate sourcemaps when using babel and webpack?
I want to set up a config to generate sourcemaps. I'm running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js.
var webpack =...
user916367
401
votes
14
answers
304k
views
How to bundle an Angular app for production
What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.
Please include the Angular version within answers so we can track better when it moves to later ...
- 6,026
394
votes
18
answers
407k
views
Passing environment-dependent variables in webpack
I'm trying to convert an angular app from gulp to webpack. in gulp I use gulp-preprocess to replace some variables in the html page (e.g. database name) depending on the NODE_ENV. What is the best way ...
- 7,864
366
votes
46
answers
574k
views
Field 'browser' doesn't contain a valid alias configuration
I've started using webpack2 (to be precise, v2.3.2) and after re-creating my config I keep running into an issue I can't seem to solve I get (sorry in advance for ugly dump):
ERROR in ./src/main.js
...
- 31.3k
353
votes
17
answers
368k
views
TypeError: this.getOptions is not a function
I am facing a weird error when I installed Bootstrap. The error is below. I tried uninstalling less-loader and installing [email protected], because I saw it online, but it did nothing. I am unsure ...
- 4,389
342
votes
8
answers
351k
views
babel-loader jsx SyntaxError: Unexpected token [duplicate]
I'm a beginner in React + Webpack.
I found a weird error in my hello world web app.
I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx ...
- 3,689
340
votes
32
answers
532k
views
The create-react-app imports restriction outside of src directory
I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message.
./src/components/website_index.js Module not ...
- 7,297
319
votes
2
answers
75k
views
What exactly is Hot Module Replacement in Webpack?
I've read a few pages about Hot Module Replacement in Webpack.
There's even a sample app that uses it.
I've read all of this and still don't get the idea.
What can I do with it?
Is it supposed to ...
- 267k
317
votes
8
answers
248k
views
ES6 exporting/importing in index file
I am currently using ES6 in an React app via webpack/babel.
I am using index files to gather all components of a module and export them. Unfortunately, that looks like this:
import Comp1_ from './...
- 6,834
312
votes
29
answers
332k
views
How to add font-awesome to Angular 2 + CLI project
I'm using Angular 2+ and Angular CLI.
How do I add font-awesome to my project?
- 7,174
310
votes
9
answers
164k
views
What does "publicPath" in Webpack do?
Webpack docs state that output.publicPath is:
The output.path from the view of the JavaScript.
Could you please elaborate on what this actually means?
I use output.path and output.filename to ...
- 170k
302
votes
5
answers
94k
views
Webpack style-loader vs css-loader
I have two questions.
1) CSS Loader and Style Loader are two webpack loaders. I couldn't grasp the difference between the two. Why do I have to use two loaders when they both do the same job?
2) ...
- 3,805
292
votes
25
answers
422k
views
I am getting an "Invalid Host header" message when connecting to webpack-dev-server remotely
I am using as an environment, a Cloud9.io ubuntu VM Online IDE and I have reduced by troubleshooting this error to just running the app with Webpack dev server.
I launch it with:
webpack-dev-server ...
- 4,679
271
votes
14
answers
289k
views
How to build minified and uncompressed bundle with webpack?
Here's my webpack.config.js
var webpack = require("webpack");
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
path: "./dist",
filename: "bundle.min.js"
},
...
- 133k
266
votes
27
answers
574k
views
Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
I am trying to import components from react-materialize as -
import {Navbar, NavItem} from 'react-materialize';
But when the webpack is compiling my .tsx it throws an error for the above as -
ERROR ...
- 6,818
264
votes
19
answers
133k
views
How can I use ES6 in webpack.config.js?
How to use ES6 in webpack.config ?
Like this repo
https://github.com/kriasoft/react-starter-kit
does ?
For instance:
using this
import webpack from 'webpack';
instead of
var webpack = require('...
- 32.3k
260
votes
13
answers
221k
views
How to create multiple output paths in Webpack config
Does anyone know how to create multiple output paths in a webpack.config.js file? I'm using bootstrap-sass which comes with a few different font files, etc. For webpack to process these i've included ...
- 4,139
250
votes
25
answers
377k
views
Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"
I'm trying to import a theme from a CSS module but TypeScript gives me a "Cannot Find Module" error and the theme isn't applied on runtime. I think there's something wrong with my Webpack config but I'...
- 23.1k
244
votes
5
answers
169k
views
What does this "react-scripts eject" command do?
What does the npm run eject command do? I do understand what other commands do like start, build, test. But no idea about eject.
- 5,891
241
votes
31
answers
246k
views
Cannot find module 'webpack/bin/config-yargs'
Getting error when running webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/. Here is the error log:
module.js:442
throw err;
^
Error: Cannot find ...
- 2,558
240
votes
14
answers
387k
views
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. I am currently playing around with reactabular.js.
Whenever I do a npm start it always runs on localhost:8080.
How ...
- 7,265
239
votes
11
answers
165k
views
Webpack.config how to just copy the index.html to the dist folder
I am trying to automate assets going into /dist. I have the following config.js:
module.exports = {
context: __dirname + "/lib",
entry: {
main: [
"./baa.ts"
]
}...
- 9,523
237
votes
25
answers
492k
views
Error: Cannot find module 'webpack'
I'm just getting started with webpack and am having difficulty getting the multiple-entry-points sample to build. The webpack.config.js file in the example includes the line
var CommonsChunkPlugin =...
- 6,102
236
votes
3
answers
103k
views
What are differences between SystemJS and Webpack?
I'm creating my first Angular application and I would figure out what is the role of the module loaders.
Why we need them?
I tried to search and search on Google and I can't understand why we need to ...
- 14.2k
231
votes
14
answers
645k
views
Correct path for img on React.js
I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture
Here my files architecture:
components
...
- 3,346
227
votes
12
answers
207k
views
What does "The code generator has deoptimised the styling of [some file] as it exceeds the max of "100KB"" mean?
I added a new npm package to my project and require it in one of my modules.
Now I get this message from webpack,
build modulesNote: The code generator has deoptimised the styling of "D:/path/to/...
- 5,305
225
votes
19
answers
415k
views
How to use Google fonts in React.js?
I had built a website with React.js and webpack.
I want to use Google fonts in the webpage, so I put the link in the section.
Google Fonts
<link href="https://fonts.googleapis.com/css?family=...
- 2,401
220
votes
22
answers
481k
views
How to include bootstrap css and js in reactjs app?
I am new to ReactJS, I want to include bootstrap in my React app
I have installed bootstrap by npm install bootstrap --save
Now, want to load bootstrap CSS and JS in my React app.
I am using webpack.
...
- 3,214
219
votes
8
answers
75k
views
How to prevent moment.js from loading locales with webpack?
Is there any way you can stop moment.js from loading all the locales (I just need English) when you're using webpack? I'm looking at the source and it seems that if hasModule is defined, which it is ...
- 5,628
209
votes
14
answers
661k
views
"You may need an appropriate loader to handle this file type" with Webpack and Babel
I am trying to use Webpack with Babel to compile ES6 assets, but I am getting the following error message:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /...
- 8,907
201
votes
7
answers
268k
views
Define global variable with webpack
Is it possible to define a global variable with webpack to result something like this:
var myvar = {};
All of the examples I saw were using external file require("imports?$=jquery!./file.js")
- 31.7k
198
votes
11
answers
130k
views
How to tell webpack dev server to serve index.html for any route
React router allows react apps to handle /arbitrary/route. In order this to work, I need my server to send the React app on any matched route.
But webpack dev server doesn't handle arbitrary end ...
- 6,268
193
votes
9
answers
229k
views
How do I use /deep/ or >>> or ::v-deep in Vue.js?
So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this in ...
- 6,785
190
votes
8
answers
241k
views
Webpack - Critical dependency: the request of a dependency is an expression
I am getting three warning messages when importing request in a barebone webpack project. A minimal example to reproduce the bug is available on GitHub (run npm install and npm start).
Critical ...
- 5,883
188
votes
35
answers
517k
views
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
I have this simple helloworld react app created from an online course, however I get this error:
Invalid configuration object. Webpack has been initialised using a
configuration object that does ...
- 33.6k
185
votes
26
answers
334k
views
webpack is not recognized as a internal or external command,operable program or batch file
I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been ...
- 2,761
184
votes
8
answers
160k
views
How to get access to webpack-dev-server from devices in local network?
There is some webpack dev server config (it's part of the whole config):
config.devServer = {
contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
stats: {
modules: ...
- 12.1k
184
votes
12
answers
254k
views
Resolving require paths with webpack
I'm still confused how to resolve module paths with webpack. Now I write:
myfile = require('../../mydir/myfile.js')
but I'd like to write
myfile = require('mydir/myfile.js')
I was thinking that ...
- 4,798
184
votes
16
answers
206k
views
How to decrease prod bundle size?
I have a simple app, initialized by angular-cli.
It display some pages relative to 3 routes. I have 3 components. On one of this page I use lodash and Angular 2 HTTP modules to get some data (using ...
- 9,512