Questions tagged [webpack]

11405 questions
1

votes
0

answer
91

Views

Split main.bundle.js angular starter

I am using https://github.com/gdi2290/angular-starter for my project and I want to split main.bundle.js in multiple files with predefined names. For example: main.bundle.1.js main.bundle.2.js main.bundle.3.js main.bundle.4.js Is it possible to make this kind of configuration?
Jovica Madzevic
1

votes
0

answer
301

Views

How to bundle Create React App with webpack?

I'm bundling the react app into a single file so that it will be simpler to serve from a Scala Play backend. my webpack.config.js looks like this const webpack = require('webpack') const path = require('path') module.exports = { entry: { frontApp: './src/index.js' }, output: { path: path.join(__dir...
irregular
1

votes
0

answer
215

Views

Ngrx not working properly with AOT in Angular

From past couple of days I am trying to use ngrx with AOT, with JIT it works fine, but with AOT it gives this error Uncaught TypeError: Cannot convert undefined or null to object in combineReducers, I believe its because it's getting undefined as the first parameter, here is my code: // reducer.ts...
Dheeraj Agrawal
1

votes
1

answer
1.1k

Views

webpack build error TypeError: Converting circular structure to JSON

I'm facing an error in building and running dev server with Webpack. I use Vue.js and used vue-cli for generating a project. For testing, I'm using Jest and npm test runs with no problems. If I run npm run build I get this error output: ERROR in TypeError: Converting circular structure to JSON -...
Mikeee
1

votes
0

answer
206

Views

How to use an alternative promise library in VueJs project?

Device: PC Browser: Chrome (62.0.3202.94) OS: Ubuntu 16.04 Hey! I'm using VueJs webpack starter. I've tried many things, but nothing seems to work — browser keeps using its native promise library. Here are some things I did (tried DefinePlugin, ProvidePlugin, explicit shadowing): webpack.base.con...
manidos
1

votes
2

answer
743

Views

Slow Karma Unit Tests

I wrote unit tests for a small reach application using Jasmine and Karma.And Karma is running slow for these tests. This is my karma config: var unitTestReportOutputDir = 'unit-test-report'; module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine'], reporters: ['dots'],...
zfranciscus
1

votes
1

answer
478

Views

Bitbucket pipelines webpack build and ftp deploy NO JS OUTPUT on the server

I have my pipelines build settings: branches: production: - step: name: Build and test JS. image: node:8.9.3 script: - npm install - npm test - npm run-script build - step: name: Build and test PHP. image: php:7-fpm script: - echo 'Here will be the Composer build and PHPUnit tests.' - step: name:...
Edenwave
1

votes
0

answer
42

Views

webpack solve require arguments before build (constexpr)

I'm working on a RESTful API express.js server. what I expect is something like A node Express router middleware for RESTful API base on certain folder path. but this package using dynamic require which loads modules on runtime with an expression. this cause webpack throw an error: Critical dependen...
Zazck
1

votes
1

answer
212

Views

React standalone bundle without react library inside

I have created standalone bundle which I include in React App. The App itself does not anything know about Extension Bundle (next XB) it load, but the XB does know about App and libraries it use inside. How to make App share library packages it compiled with to XB? I mean if the App compiled with Re...
Thomas Anderson
1

votes
0

answer
731

Views

webpack devServer configuration : "‘Access-Control-Allow-Origin

Hi all i'm new in stackoverflow and Premise that i not expert in NodeJs; below what i have done I downloaded webix jet from https://github.com/webix-hub/jet-start unpacked and installed webix jet in Ibm i (As400) via npm install (in Ibm i we run NodeJs V6.9.1) As Dependencies of webix Jet, there is...
jhon_art
1

votes
0

answer
265

Views

Webpack “cannot find module” error, path is wrong

I am trying to publish my application and I am getting the following webpack error: Error: Cannot find module 'C:\Users\User\source\repos\DDvwn\node_modules\webpack\bin\webpack.js' The path it provides is wrong. The correct path to the file should be C:\Users\User\source\repos\DDvwn\DDvwn\node_modul...
anesthetic
1

votes
1

answer
45

Views

What does module refer to in context of the 4 concepts of Webpack?

The 4 concepts of webpack are Entry, Output, Loaders, and Plugins. I have been looking through the documentation to get an understanding of how my React configuration works. Entry and Output make sense. But why is loaders included under module. In terms of the documentation modules are what webpack...
1

votes
0

answer
184

Views

why style-loader affects the actual class names applied?

I'm new to webpack configuration, and been learning the usage of loaders. from what I understand : css-loader reads the files and resolve imports and url's found there (and can also create css modules if set via options or change the classnames to scoped names...) style-loader generate js that, in t...
Amico
1

votes
1

answer
49

Views

How to compile test-only code with webpack

I have a few private methods that I want to write unit tests for. However, since these are private methods, they are not exported. This article shows how you can use grunt to wrap a code in comments and this code will be excluded from compiling if you are compiling for production. Is there a simila...
Kousha
1

votes
0

answer
274

Views

Angular: error, not installed as it should

I'm new to Angular 2 and Angular CLI environment. I'm working on a project and when tried installing angular CLI and related stuff. It got installed but: When ng --version is checked Angular CLI: 1.6.1 Node: 6.12.2 OS: linux x64 Angular: error ... animations, cli, common, compiler, compiler-cli, cor...
Yashwanth M
1

votes
1

answer
256

Views

Karma-typescript Interface XXX cannot simultaneously extend types ' YYY

My tsconfig.json is { 'compilerOptions': { 'outDir': './dist/', 'sourceMap': true, 'module': 'es6', 'target': 'es5', 'jsx': 'react', 'allowJs': true, 'preserveConstEnums': true, 'removeComments': true, 'noImplicitAny': false, 'moduleResolution': 'node', 'noUnusedParameters': true }, 'include': [ '....
Kousha
1

votes
0

answer
130

Views

Node serverside rendering by parsing static bundle files

I am looking into server side rendering for a react/webpack web application. Then I was wondering.. Is it any simple way of processing the static files produced by webpack? So the server side renderer read the index.html file that contains the bundle, run the javascript in it so the react app is inj...
henit
1

votes
0

answer
75

Views

Is Dependency Injection with AngularJS and Webpack superfluous?

I'm working on an AngularJS application and trying to convert it from a Gulp bundling system over to Webpack. I've been searching for some time now for arguments for/against utilizing the AngularJS dependency injection in tandem with require() statements for Webpack dependency graphs. Why might some...
Andrew Craswell
1

votes
0

answer
79

Views

How to get the same hash output in Webpack

Is it possible to generate the exact same outputs in local and server? I am using the same Webpack version, I have removed node_modules and reinstalled all the packages with the exact same versions. But still, the outputs for both are different. Local: Hash: de5e3b914a5511a29229 Version: webpack 3.4...
EnZo
1

votes
2

answer
1k

Views

Webpack bundled JS not being executed

This is a very strange problem because actually, some of the bundled code is being executed. I use style loader for my CSS and that of course gets put into bundle.js and loads and works fine. However, I also have a file with some code to set up the jQuery localScroll plugin, and that code isn't wo...
1

votes
0

answer
192

Views

ESLint error when importing from redux-saga

Importing redux-saga as follows: import { takeLatest } from 'redux-saga/effects' ESLint is raising the following error: Error while running ESLint: Cannot find module '/Users/cjpitt/project/node_modules/redux-saga/config/webpack.config.dev.js' My ESLint config contains import resolvers as follows: '...
cjpete
1

votes
0

answer
145

Views

Stop webpack from compiling multiple times on single file change

I am using Vue.js Single File Components with Typescript. For CSS there is a webpack loader that generates CSS stylesheet file from .vue files. rules: [ { test: /\.vue$/, use: [ { loader: 'vue-loader' } ] }, { test: /\.vue$/, use: [ { loader: 'webpack-atomizer-loader' } ] }, { test: /\.css?$/, use:...
Kushagra Gour
1

votes
0

answer
457

Views

how to add scss support for vuejs

I'm trying to use vue-material but in the documentation, it only says to read on Pre-Processors, I tried everything on the pre-processors page and couldn't fix my error: The scss part is: @import '~vue-material/components/MdAnimation/variables'; @import '~vue-material/theme/engine'; .md-layout-item...
lingxiao
1

votes
2

answer
2.8k

Views

What is best way to include external js files in (webpack and vue2)

I just developed the project using webpack2 and vue2. I have other external plugins which cannot be installed through npm. So my question is the best way to include these files. Here are my index.html this is my index.html whare I include some external js files. Can we do some bundling so that we do...
Amit Sharma
1

votes
0

answer
388

Views

Set up map alias for WebPack and Jest

So I have this on my webpack.config.js resolve : { alias : { Actions : path.resolve(__dirname , 'src/actions/'), Components : path.resolve( __dirname , 'src/components/' ), Reducers : path.resolve( __dirname , 'src/reducers/' ), Sagas : path.resolve( __dirname , 'src/sagas/' ) } }, All is...
Jplus2
1

votes
2

answer
1.9k

Views

Get Bootstrap theme into React app

I have a bootstrap theme with many CSS files. It is responsive and I want all the current styling for UI elements. However, I want to build my app out as React components only, What is the most efficient way to do this? How can I use the bootstrap theme's CSS files while recreating it in React?
JohnSnow
1

votes
1

answer
332

Views

webpack not bundling with babel-loader and react

I am following along with a relatively older tutorial (from 2014) on RGR. I had to use an updated version of React, Webpack, and Babel so there are some differences. Everything has been working thus far except when I tried to compile JSX into webpack, it is giving me a build error. ERROR in ./public...
Kris Martin
1

votes
0

answer
400

Views

webpack: Module build failed: Error: Final loader didn't return a Buffer or String

In project try to use .mtl files. I add this third-party library 'three-mtl-loader' for do this. But files not resolved. Project use react.js for frontend and want to make component that will visualize 3d objects. Use for that three.js, react-three-renderer. I start with mtl loader, but will need ob...
1

votes
2

answer
459

Views

Vue.js Codes Not Work With Webpack

I'm Using Webpack And Vue.js. I have Very Simple Code Just Like This : {{msg}} new Vue({ el: '#msg', data:{ msg:'Hello' } }); If I Use vue.js Directly at Index.html, Then My Code Work Fine But If I Import vue.js In Seprate js File Then I Got Error : Uncaught ReferenceError: Vue is not defined at ind...
siros
1

votes
2

answer
56

Views

how can i avoid including repeatedly or abstract header & footer angular ui-router

var headerView = { templateUrl: 'views/header/header.html', controller: 'HeaderCtrl' }; var footerView = { templateUrl: 'views/footer/footer.html' }; var myApp = angular.module('myApp', ['ui.router']); myApp.controller('MainCtrl', function($scope) {}); myApp.config(function($stateProvider, $urlRoute...
D V Yogesh
1

votes
0

answer
37

Views

How to point webpack externals to a property of a default export?

Another team at my company has a react app that is bundled by webpack as an AMD module, which exports a single object with named properties. It looks something like: const React = require('react'); const ReactDOM = require('react-dom'); const App = require('./src/App.js'); module.exports = { React:...
adharris
1

votes
0

answer
185

Views

CKEditor webpack loader issues

I want to use CKEditor in a AdminLTE project. This project has a url loader in the rules: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude: path.resolve(__dirname, 'node_modules/@ckeditor'), query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } } this loa...
Milo van Loon
1

votes
0

answer
201

Views

How to compile CSS on Visual Studio 2017 Angular template using webpack?

Please ignore my ignorance, but I am somewhat new to programming and very new to webpack and Angular. I have VS 2017 and I created a new project via New Project > ASP.NET Core Web App > and then selected the Angular template under .NET Core/ASP.NET Core 2.0. Webpack is already built into the project...
A. Doe
1

votes
0

answer
105

Views

angularjs es6 lazy loading

I have angularjs application, built with webpack. I use ES6 modules, and import the css within each component. Anyway, I want the CSS to be included and used only when I navigate to the component - lazy loading. How can I do it?
user3712353
1

votes
2

answer
246

Views

Issue using webpack CommonsChunkPlugin for multiple entries

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'lib'], filename: '[name]-[hash].bundle.js', }), In the above config, I want to exclude page1 from CommonsCh...
Hari Prakash
1

votes
2

answer
654

Views

babel-preset-env and stage-0 confusing

Stages represent the status of experimental features? what fetures are on experimental, any links/details of it? 'presets': [ [ 'env',{ 'modules': false, 'targets': { 'browsers': ['last 2 versions', 'safari >= 7'] } } ], 'stage-0', 'react' ], 'plugins': [ [ 'transform-runtime',{ 'helpers': false, '...
user9122693
1

votes
0

answer
56

Views

How do I attach to window in webpack to make it available in browser

I can attach to window in my entry.ts file, but when it builds my bundle it wraps the attachment, and prevents it from attaching in the actual browser. import 'bootstrap'; declare var $: any declare const window: Window ( window).$ = ( window).jQuery = $; In my entry.ts file I can access jQuery via...
IronSean
1

votes
0

answer
311

Views

Uncaught ReferenceError: require is not defined, webpack error

I'm using node modules for a client application in the browser. I get 'Uncaught ReferenceError: require is not defined' when I try to require a constructor function from a neighbouring file into the app.js. app.js and Desktop.js are located in the same folder so the relative link path should be cor...
Evelina
1

votes
0

answer
415

Views

Webpack - Bundle only required CSS files for production

I have a Vue app that has 3 different css themes depending on what the 'brand' is set to. Right now it is working in development. I run an npm run dev command and pass in the brand, then set the brand variable to be globally accessible, and then in my main.js file I set the required css dynamically...
Linx
1

votes
1

answer
220

Views

How to load the webpack bundles created in 'ng build --prod' in django templates?

I am using Angular 4 for client side/frontend and using django 1.11 for backend. I edited .angular-cli.json to redirect the bundles output directory to django app assets ./.angular-cli.json { ... 'apps':[ .., 'outDir': 'django_app/assets/webpack_bundles/', .... ], ... } when building ng build --dev...
Leo

View additional questions