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.

Filter by
Sorted by
Tagged with
-1
votes
0answers
8 views

Conditional “test harness” code for my React NPM package?

I'm writing this app using React and I was trying to package it up in NPM to use it in a different project. I have as my index.js entrypoint something like this: import { MyReactComponent } from './...
-1
votes
1answer
20 views

MODULE NOT FOUND: date-fns/is_after

My package.json conatins "date-fns": "^2.0.0-beta.4". i downloaded a React JS theme its was working fine but now suddenly it is throwing an error saying module not found. import isAfter from 'date-...
0
votes
0answers
38 views

“exports is not defined” when loading svg icon

I'm using the svg-sprite-loader plug-in when trying to load an icon from an svg sprite file, however, the page fails with webpack error "exports is not defined". What could be happening? How can one ...
0
votes
0answers
12 views

Telling webpack a 3rd party module uses ES Modules

Before trying to explain it, I'll just jump straight into it: Create a next.js scaffold. npx create-next-app (optional) I've added typescript here. Rename any of the .js to .ts, then run yarn dev ...
1
vote
1answer
34 views

Issue with setup and run Electron + React + Typescript + Webpack application

I'm trying to run my Electon application that I'm migrating from ES6 to Typescript. With my configuration I can build dll and main successfully but get an error (SyntaxError: Unexpected token ...) ...
-1
votes
2answers
43 views

How to remove \n and \t from webpack compiled template literal?

I am developing a javascript plugin, which uses es6 template literals to generate a template, I am attaching a piece of code in my plugin. "use strict"; (function () { window.project = { template:...
-1
votes
0answers
17 views

Webpack and visual studio problem with relative paths

I have a angular webpack visual studio problem. I am using this middleware called UseWebpackDevMiddleware. I also have installed all the Npm and nuget packages app.UseWebpackDevMiddleware(new ...
0
votes
0answers
19 views

inline background-image not showing with webpack 4 [duplicate]

I want to be able to display an inline background image via webpack but so far it do not work as expected. In my index.html I have img tags which displaying correctly in browser. However, it is not ...
0
votes
1answer
24 views

Webpack import, default.a is not a constructor

I know this problem already has already been resolved in other threads but none of the provided solutions works for me. I'm trying to import classes from another project to a new react-create-app ...
0
votes
0answers
23 views

Module Warning in extract mode

I trying to solve warning in console when proceed svg in webpack encore. Im using svg-sprite-loader (https://github.com/kisenka/svg-sprite-loader) I want create one svg sprite from multiple svgs its ...
0
votes
1answer
12 views

How to configure a webpack proxy for multiple URLs efficiently?

I'm using webpack dev server to build a single page application. There are many routes like /api, /alpha, /bravo ... /zulu, and they all need to be proxied. I wrote webpack.config.js file to proxy ...
0
votes
0answers
13 views

Module source string.replace causes garbled bundle

If I change the length of a module's source by means of a string.replace(): compiler.hooks.shouldEmit.tap('WebpackSvgSpritely', compilation => { Object.keys(compilation.modules).map((i) => { ...
1
vote
1answer
24 views

“webpack -p --mode production” is not working

I'm making react small application with webpack. Running scripts in package.json but is not working. Building developing mode success. Building production mode with no option failed. Scripts // ...
0
votes
1answer
28 views

insert node_modules assets into my project

I'm using webpack to build my lambda functions, but there is a package with loads a .proto extension file and I can't import it into my project so I'm getting file not found error. This is called ...
1
vote
1answer
12 views

getting bundle error when trying to load svg with raw-loader

My goal is to read in an svg as a raw string using raw-loader, then use dangerouslySetInnerHTML to add this svg string to a div and thus render the svg. However, I am running into an issue when ...
1
vote
1answer
22 views

How to get sourcemaps to work in Webpack?

I have recently moved from grunt/bower to webpack but can't get sourcemaps to work. I get code references like debugger://VM8967 instead of real file names like I'm used to. I've tried many ...
0
votes
0answers
23 views

'Webpack-Dev-Server' not auto-reloading after editing HTML or CSS files

I am trying to set up the webpack-dev-server so that it automatically refreshes after editing any file in my project. It works flawlessly for Javascript/Typescript files, however it is not refreshing ...
0
votes
0answers
8 views

Hot reload does not work under Ubuntu using Firefox

I develop React JS apps under Ubuntu 16.04 using Firefox 68.0.2. Upon running npm start, the dev server starts on port 3000 and Firefox opens the app. Hot reload does not work. The web console in ...
0
votes
0answers
17 views

Bundle NodeJS/Express backend with Webpack

First of all, I'm quite new to Webpack/NodeJS so this might be a dumb question. Also English is not my native language so please excuse me if I make some errors. I'm currently developing a web ...
0
votes
1answer
24 views

How to call a function inside a vue npm package?

What I'm trying to do is to display and modify the images that the car has "in my case", so I used the vue-upload-multiple-image package to save the images and went well, but when I call back these ...
0
votes
0answers
41 views

Change JSON data in react without having to rebuild

I have a react app which imports a JSON file. When I build my app, the JSON file disappears, but my data is in one of the JavaScript files. Is there any way I can change the JSON data without having ...
0
votes
1answer
18 views

Using webpack for copying file if it is on localhost, else minifying

I am new to Webpack. My team is using Golang for the server, and starting to use ReactJS + MobX on the front end. We use Webpack to bundle/transpile all the code into one bundle file per page. (It is ...
1
vote
1answer
20 views

Webpack 4 css-loader cannot resolve font

Webpack/css-loader is throwing the error: ERROR in ./src/styles/global.css (./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib!./src/styles/global.css) [React] Module not ...
0
votes
2answers
22 views

Webpack images from css file after build doesn't copy

When I run npm run build the images from .html files are loaded / copied. But the ones from the css file doesn't get copied in the final dist/assets/img folder. And if I use copy-webpack-plugin, ...
0
votes
0answers
22 views

How to import just the functions i need and tree shake

I am trying to import 2 functions from date-fns (using webpack 4 and babel). When I analyze my prod build the whole library is added to the bundle. First I have tried importing with import { format, ...
1
vote
1answer
21 views

How to alter a rule with Vue-cli?

From vue-inspect I can read this: /* config.module.rule('fonts') */ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, use: [ /* config.module.rule('fonts').use('url-loader') */ { ...
0
votes
0answers
21 views

Why I am not able to import sass files

I am using Laravel with react and I just simply want to include a single scss file in webpack.mix.js and in that file I am refering to all other scss files But I am not able to make it work , I have ...
0
votes
0answers
14 views

“Expected 'styles' to be an array of strings.”

I have angularjs and angular2 combined project and I want to import styleUrls to app.component.ts, but it gives me an error "Expected 'styles' to be an array of strings.". Debugged the frontend and it ...
0
votes
0answers
17 views

Trying to http request another site from vue app [duplicate]

I am trying to build app and itneeds to reach to external web site via HTTP request (GET). When I am trying to do so using axios and VueJS, I am getting error: has been blocked by CORS policy: ...
0
votes
0answers
14 views

Enable text compression using Webpack and Apache

Supposedly this plugin is supposed to do it. I installed the plugin with npm npm install compression-webpack-plugin --save-dev And edited my webpack.config.js file to include const ...
0
votes
1answer
15 views

angular cli - Importing an image to angular component using base64 on compile

Is there a way to convert an image to base64 to use it inside a component? For example this is my home.component.html and I want to convert its content: <img src="assets/images/home/home-phone....
-1
votes
0answers
23 views

react app with webpack/babel appears blank on IE browser

I have react-hooks app built with react-router, redux, webpack4, babel. and I can not get react app renders on IE browser. I guess it's an issue with transpiling es6 to es5. Here's things that I ...
0
votes
0answers
22 views

How to override styling in react-select npm package for different viewports using className

Unable to style for different viewports using react-select npm package. Re: https://react-select.com/styles#using-classnames I'm trying to use className to override react-select styling, as it's ...
0
votes
0answers
7 views

How to run bin/webpack with capistrano and rails

So I have a rails 6 app that doesn't load any css or javascript assets when I run cap production deploy. So what I do is after I run cap production deploy, I ssh into my server, navigate to myapp/...
0
votes
1answer
23 views

Adding JS Files - Webpack - Static Site Boilerplate

I'm currently learning webpack to improve my static site building process. I'm using a boilerplate called Static site boilerplate. I have an issue with it since i'm not on point with webpack. At ...
0
votes
0answers
12 views

Laravel Mix webpack alias - PhpStorm

I have problem to setup PHPStorm correctly for Laravel Mix and webpack. I tried every solution I found on google but nothing helped... Any suggestions? I'm trying to setup alias for CSS and alias for ...
-1
votes
0answers
16 views

Scss not being processed by plugin loader 'TypeError: this[MODULE_TYPE] is not a function' [on hold]

The problem is I get errors on webpack build over scss files on a project migrating from angular 5 to 8, even when I have the sass-loader and minicssextractplugin declared over loaders and imported. ...
0
votes
0answers
25 views

webpack external config not found

I'm working React Project when I compile I get the following error Module not found: Can't resolve 'config' in '/Users/mirasmith/Desktop/KPV1-Project-master/src/_services' but follow that ...
3
votes
0answers
40 views

Laravel Vue SPA. Can run app fine with “npm run dev”, but “npm run production” hangs compiling with no errors

I am building an SPA with Laravel and Vue.js. After running 'npm run dev' the compiling freezes without completing and producing no errors. When running 'npm run watch' the first compile freezes ...
0
votes
0answers
15 views

vue-cli-service can't resolve import with custom alias in *.vue

first of all I know that there are a lot of similar questions to this one, but all of those I checked are either not my exact problem or outdated (e.g. ppl asking for how to add @/ that now is there ...
0
votes
1answer
18 views

Searching for Webpack config for React Components Library with Typescript, SASS & CSS Modules via SASS support

Like the title says I'm searching for a working Webpack config for a React Components Library with support for Typescript, SASS and CSS Modules via SASS. I would really appreciate if somebody has one ...
0
votes
0answers
7 views

Displaying PropTypes info in storybook from node_modules package

I maintain two repositories, 1 containing storybook and stories and the other containing components. The component I am attempting to display propTypes for is written in Typescript and done like so ...
1
vote
1answer
28 views

Ruby on Rails 6 how to reference images from asset pipeline for css

I am trying to create a rails 6 application. In rails 5 while sass was still applicable I would use image-url(xxx.png) to reference images within the asset pipeline. However, in rails 6 this is no ...
0
votes
0answers
11 views

How do I use webpack dynamic imports inside an NPM package?

I have a navbar npm package that I import into other projects. It dynamically imports fontawesome icons based on a a json config file loaded from a webserver at runtime. When I build the navbar ...
1
vote
0answers
36 views

What does a comma(,) syntax mean in bash script

My console exited with code 0 after executing this line DEBUG=server,socket,redis nodemon --watch server server/src/index.js --ext js,graphql --exec babel-node this is a bash script which i'm trying ...
0
votes
0answers
48 views

Laravel jQuery is not defined, no defer in script tag

In my app.js file, jQuery is defined: import * as $ from 'jquery'; console.log($); //works fine My app.js is processed by webpack and laravel mix, and loaded from the public folder: <!-- ...
-2
votes
0answers
23 views

How do I modify webpack.config.js for VUE CLI3 for HtmlWebpackPlugin?

I need to add the HtmlWebpackPlugin and html-webpack-inline-source-plugin so that I can inject the css and js into index.html. I need to create a single bundle file for production.
1
vote
0answers
17 views

Webpack resolutions error with lodash and other modules

Using yarn to generate webpack build throws multiple module resolution errors on Mac OSX only. Using npm works fine. I believe the problem might be within webpack configuration to properly locate ...
0
votes
0answers
28 views

How to troubleshoot next.config.js module loaders

I am using zeit's MDX plugin with next.js right now and also dotenv support in my project. But when I'm trying to include support for CSS files the app crashes. It doesn't recognize the css import so ...
1
vote
1answer
33 views

lazy loading - when does it download chunk files?

I am using vue.js . I want to use lazy loading for routes for example. Let's say I built the project with webpack by firing (npm run build). Then, as webpack started building, it would generate all ...