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

webpack providePlugin with npm uuid

I'm trying to provide uuid plugin in a very similar way as jquery. (jquery is working fine). plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', "uuidv4"...
0
votes
0answers
4 views

Babel 7 + Inversify 4 + WebPack 4 - Unexpected character '@' on @inject

I have a typescript Vue SPA project where I use Inversify. I used awesome-typescript-loader for compiling my typescript source code; now I want to switch to Babel but when I compile my application ...
0
votes
0answers
6 views

jQuery validator custom method undefined *sometimes*

I've occasionally been getting a weird error reported in Sentry that one of our custom jQuery validator methods is undefined. However, this should be impossible - we're using webpack to bundle our ...
0
votes
0answers
4 views

Webpack serves different files from publicPath root url versus child url after refresh

When I run webpack-dev-server and navigate to it in my browser all is well. If I navigate to sub-child-pages via clicks/links, all is well. But If I then hit refresh so the app loads the child-url ...
0
votes
0answers
7 views

Webpack Externals - Unable to resolve path to module

According to the documentation I can reference an external CDN for a module and use it as normal. However, es-lint gives the following error: Unable to resolve path to module 'jquery'. My config is ...
0
votes
1answer
13 views

SF4/WWebpack - Javascript Function Is Not Defined

I'm using Symfony's WebPack.Encore bundle and I realize one thing is that for a single button onclick = function (), my function is not defined, whereas if I put it in a document.ready, it works. Can ...
0
votes
0answers
8 views

How can I force users on to the latest version of a PWA?

We have recently launched a progressive web app but have encountered issues when releasing updates to the PWA. When we push a new version of the app most of our distribution js files get renamed. e.g....
0
votes
0answers
11 views

Asp.Net Mvc Core 2.1 ReactRedux with webpack and typescript

I created new Asp.Net Mvc Core 2.1 React Redux project. I added webpack and typescript to this project. Now that I try to run it, I get an error message: TimeoutException: The create-react-app server ...
0
votes
0answers
11 views

chrome debugger shows incorrect scope for this keyword

I'm using create react app which i ejected. I've encountered the method=()=>{} for retaining scope and know it as babel-transform-class-properties. The code works as expected and the debugger ...
-1
votes
0answers
5 views

webpack module. from 2.x.x version,the webpack module's every export inside a scope

from webpack2.x webpack module 's every export inside a scope. the webpack build result __webpack_require__.d(__webpack_exports__, "a"/*here*/, function() { return ...
0
votes
0answers
10 views

DeprecationWarning: grpc.load

I am building an app which uses client-server communication and server-google cloud platform communications by using socket.io. For the front-end part, I'm using React where I have two components. ...
0
votes
0answers
7 views

webpack ignore plugin to ignore imports

I try to ignore the import of certain json files and copy them using the copy plugin. The import I'd like to ignore looks like this: const contract = truffleContract(require(path + name + ".json")); ...
0
votes
0answers
11 views

webpack SASS bundle and create multiple files

I'm changing from gulp to webpack, and I'm with some problems compiling SASS. I managed to not putting inline (although I would like to select if it would need to be inline or not, but will deal ...
2
votes
2answers
35 views

Loading CSS using Webpack and React

I am building an app which uses client-server comunications and server-google cloud platform comunications by using socket.io. For the front-end part I'm using React where I have two components App ...
0
votes
0answers
8 views

Webpack mix isn't updating when my files change in Laravel 5.6.26

here is my webpack.mix.js mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css') .sass('resources/assets/sass/backend/app.scss', 'public/css/backend.css') .styles([ '...
0
votes
0answers
10 views

toastr not showing when imported in a jsx file

I have a react app that uses webpack to bundle JS and CSS into 1 file and output it into a destination folder. I've recently added toastr to 1 of my jsx file: import toastr from "toastr"; import "...
0
votes
0answers
5 views

Using webpack-mocha with gulp

I'm trying to create a gulp task using mocha-webpack to run the task. mocha-webpack --require test/mocks --webpack-config webpack.mocha.js \"test/**/*.test.js\" Cannot see any supporting docs on ...
0
votes
0answers
9 views

Webpack doesn't include json files in NodeJS app

I have the following peace of code which loads a json file dynamically: getWeb3Contract: async function (name, web3, path = './../ABI/') { const contract = require(path + name + ".json"); ...
2
votes
1answer
39 views

Insufficient number of arguments or no entry found

I am building an app which uses client-server comunications and server-google cloud platform comunications by using socket.io. For the front-end part I'm using React where I have two components App ...
0
votes
0answers
13 views

Can't use custom css when use antd design in react app?

I setup SSR for my project. When run webpack, It's just compile antd design. All css files that I import into the component has gone. webpack.client.js import css to component in react import './...
0
votes
0answers
19 views

Bundling SCSS and importing from node_modules

I'm trying to bundle all my CSS but i'm running into a few issues. When I do @import "materialize-css/sass/materialize.scss"; it fails because it can't resolve the components When I try @import "~...
0
votes
0answers
37 views

x ** -y in ES6/Eslint

I'm trying to convert this part of my code to ES6/ESlint : return (1 - Math.pow((1 + percent / 12), -months)); so I wrote that : return (1 - (1 + percent / 12) ** -months) but Eslint output this ...
0
votes
1answer
18 views

How to compile angular 6 project having ECMA6 JS [polymer js] into a single bundle

I have angular6 application and using external JS files in ECMA6 [eg: polymer] Now when I build my application using Angular CLI, it's not able to transpile these External ECMA6 JS files due to which ...
0
votes
1answer
16 views

Missing class properties transform when Webpack presets:“env”

I'm testing React project on webpack-dev-server. I want to use classfield syntax but got an error at state init. client:162 ./src/containers/App.js Module build failed (from ./node_modules/babel-...
0
votes
0answers
18 views

Vue styles from separate file

Is there a directive or config option that allows all of a Vue app’s CSS to live externally, in a separate CSS file? I tried using the webpack plugin to extract CSS text. And it does generate a ...
0
votes
1answer
25 views

How to get started with Webpack

I'm having trouble understanding the workflow of webpack. In a regular project, I would have something like this: HTML: <button onclick = "doSomething()"></button> And then in ...
0
votes
0answers
7 views

Webpack 4 library to display mathml in a webpage?

I'm attempting to use some javascript for webpack 4 to display an equation in Firefox 62 (and eventually I hope to make it work on webkit). I was using this as my example (maybe it was a mistake to ...
1
vote
1answer
11 views

How to import tippy.js into an html page with webpack 4?

Per the tippy.js git hub page I installed it with npm: npm i tippy.js Now I have a .js source file that's used for a webpack 4 html page that gets output to my ./dist folder, but I don't know how to ...
1
vote
1answer
32 views

Webpack JSX cannot resolve relative module through ES6 imports

I'm setting up webpack for a large already existing React App. Seems to be working fine but some modules causes trouble unless I specifically add the extension to the import //not working import ...
1
vote
1answer
17 views

serverless-webpack can't resolve module

Getting this error from serverless-webpack: ERROR in ../db/actions/index.js Module not found: Error: Can't resolve 'amazon-dax-client' in '/var/task/db/actions' @ ../db/actions/index.js 2:24-52 @ .....
0
votes
1answer
31 views

Bundle Webpack multi entry points into one file using file-loader

I use a webpack config in which I use an array of file paths as entry point. Also known as multi-main entry. These files are not dependant on each other, but I want to bundle them. The js bundle just ...
0
votes
0answers
26 views

When building with webpack typescript types seem to be undefined

Building my React application using Typescript with Webpack 4 builds successfully. But when trying to view the application in the browser, I get this error: Uncaught TypeError: Cannot read property ...
0
votes
1answer
19 views

How to convert SVG icons using webpack?

I am working on a react and Webpack 3 application. I have a set of SVG icons and want to convert these icons into images and put it into images folder so that I can access these images and use it in ...
0
votes
1answer
19 views

What is exactly the importLoaders option of css-loader in Webpack 4?

I've started learning Webpack 4 since a month. Most things I wanted to do is working great but this importLoaders option of css-loader is still a mystery for me. Its official documentation is poor and ...
-1
votes
0answers
39 views

NOT (!) and DOUBLE-NOT (!!) operators in file path [duplicate]

I'm getting the following error in ReactJS npm console: Uncaught Error: Cannot find module "!!../../node_modules/css-loader/index.js! ../../node_modules/postcss-loader/index.js! ../../node_modules/...
-1
votes
1answer
4 views

json flag is out putting malformed json

I am running a npm script/command to produce a webpack stat file. The cli command is the following: webpack --profile --json > stats.json However this is producing a malformed json file. There ...
0
votes
0answers
10 views

Serve index.html from dist folder in webpack

I want to serve the index.html directly from dist package created by webpack when run web pack dev server. Right now it's serving the file from application folder. When I run npm run build , index....
1
vote
3answers
42 views

Vue js loading js file in mounted() hook

I have a vue component <template> <div id="wrapper"> <div class="main-container"> <Header /> <router-view/> <Footer/> </div> &...
0
votes
0answers
7 views

How to profile webpack build time beyond --profile?

I tried using --profile flag and discovered that one of my modules took 5.5 seconds, only being 19KB. This is suspicious, but how can I investigate further why it took so long?
0
votes
1answer
23 views

Add relative Image URL to hash name

In my ReactJS Application I have image structure created for each domain and in Webpack Configuration using file loader, I have images converted to hash name and copied at some asset folder after ...
0
votes
2answers
34 views

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7. ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: ...
0
votes
0answers
17 views

webpack 4: Bundle css files to one main.css (and a main.min.css)

I've got a structure like this: src/ -- styles/ -- a.css -- scripts/ -- b.js -- c.js and im looking to produce a dist like: dist/ -- main.js -- main.min.js -- main.css -- main.min.css I'...
0
votes
0answers
8 views

Webpack 4 dynamic import server-side import vendor chunks after main script parsed

My splitChunks config is very simple. Only thing I add is the styles chunk which will combine all css( without it it breaks page) Working with React Loadable optimization: { splitChunks: { ...
0
votes
0answers
16 views

webpack chunk.js throws an exception

I'm currently trying to get webpack working for my project. As a starting point, I'm using this repository: https://github.com/fstanis/webextensions-webpack-boilerplate This is a great starting point,...
0
votes
0answers
9 views

Error precompiling assets while deploying to Heroku with webpack

I have a project that I've recently upgraded to rails 5.2, and I'm using the webpacker gem. I get the following error trying to deploy to Heroku: No such file or directory - /tmp/...
0
votes
0answers
33 views

REACT: WEBPACK: Build to PROD showing local machine path in SourceMap

This is probably a very stupid question but I'm not a REACT developer and I've never worked with it before. So, I had to deploy a React build in my cloud server and I found out after making it work, ...
0
votes
0answers
22 views

“Module not found: Error: Can't resolve 'jquery'” when when importing bootstrap (4) to my index.js file

I keep getting this error after importing bootstrap to my index.js file: ERROR in ./public/assets/node_modules/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'jquery' in ...
0
votes
0answers
10 views

css variables & styled components

I have a bunch of css variables that are part of a cdn that I add to my templates and I want to use these variables in my styled components. Do I need to include additional loaders in my webpack ...
0
votes
0answers
9 views

NPM doesn't recognized any CLI installed using -g, -S & -D flag?

I have quite a strange problem. I messed up with npm while trying to configure Webpack-cli and delete the cache. Now, NPM doesn't recognize any CLI installed weather globally or as a Dev Dependency. I ...
0
votes
0answers
6 views

i am using webpack with babylonjs but can not load model with importMesh methods

i am using webpack and i try to load 3d model for babylonjs here is how i write the code , i require it after i require it ,the images files can not be shown also, i have tried this and that ...