FAQ Database Discussion Community


Trying to understand Webpack

javascript,module,webpack
I'm an HTML/CSS/PHP/MYSQL programmer, now trying to learn some javascript. I'm doing that by digging trough the code of the webmail I'm currently using (open source) and trying to understand how it works. I'm trying to understand how the different parts of the page are getting loaded (without the page...

webpack and react jsx - hot loading not working with docker container

docker,reactjs,webpack,webpack-dev-server
Changed to: hot loading does not work in docker and it looks like it is a docker issue. Following this: React with webpack or this React hot loader on local host machine they work fine and to me, they work the same - still I dont get why you would...

How to bundle node modules with native addons using webpack in node-webkit?

node.js,node-webkit,webpack
I'm trying to build pty.js for use in node-webkit (i.e. nw.js) v0.8.6: mkdir testapp && cd testapp nvm use 0.10.36 npm install -g nw-gyp npm install pty.js cd node_modules/pty.js # Build the native addon for node-webkit v0.8.6: nw-gyp configure --target=0.8.6 && nw-gyp build The output ends with gyp info ok....

How to let Webpack require a root node_module instead of an child package?

backbone.js,npm,webpack
I have installed backbone and backbone.babysitter trough npm. When I use backbone in my scripts like this: import Backbone from "backbone"; It loads the installed backbone version 1.2.1. This works fine until I want to use backbone.babysitter. When backbone.babysitter loads it needs to add properties to backbone itself. But the...

What's wrong with my webpack file?

javascript,webpack
OK, let's say on main.js, I have this: var topMenu = require('./menu.js'); console.log(topMenu.getCount()); // 1 topMenu.increment(); console.log(topMenu.getCount()); // 2 and on menu.js, I have this: exports.currentTab = 0; var count = 1; exports.increment = function() { count++; }; exports.getCount = function() { return count; }; exports.showSearch = function () {...

Caching with Webpack, [hash] value inside index source code, using React.js

node.js,caching,reactjs,webpack,isomorphic-javascript
I'm building an isomorphic application. It is completely built with react -- namely, the html base is also in react. I have my root html as an app component. It looks something like this: ... var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title>...

Webpack dev server cannot load nested urls (GET 404 error)

backbone.js,gulp,webpack,webpack-dev-server
I'm currently setting up a site that uses a webpack-dev-server and a backbone router. Until today, everything seemed to be working (for example I could go to http://localhost:3333 for my home page and http://localhost:3333/login for my login page. But today I tried to go to my first nested url, http://localhost:3333/people/1,...

ES6 module import is not defined during debugger

ecmascript-6,webpack,javascript-debugger,babeljs
While playing around with Babel and Webpack I stumbled into some really weird behavior today. I threw a debugger in my main.js to see if I was importing correctly, but Chrome's console kept yelling that the module I was trying to import was not defined. I try console logging the...

Webpack - Requiring a file based on build configuration

webpack
In our project, it is possible to run the application in either fake-backend mode or real-backend mode. The idea is that the developer can develop locally with functions that implement backend API but return mock data. I'd like to be able to do something like: webpack --config webpack-config-fake.js Then in...

React +(Router) without webpack or browserify

reactjs,browserify,webpack,react-router
Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot. So is it possible to get reactrouter working...

Karma tests reporting fast runs, but actually running slow

javascript,angularjs,mocha,karma-runner,webpack
This is best explained with a video (or see the gif below): You'll notice that the Karma progress reporter is reporting that the tests are taking milliseconds, but it's obviously taking quite a while... I tweeted about this and was told to Try opening the debug page, and open the...

webpack CommonJS backbone and underscore

javascript,backbone.js,underscore.js,webpack
I'd like to use Backbone with webpack in the CommonJS style, but I need to understand how to: Tell webpack that Backbone depends on underscore Prevent them from automatically defaulting to AMD It seems like imports-loader might be the answer. Do I want something like this in my configuration? module:...

webpack-dev-server react-router push state

reactjs,webpack,react-router
I am trying to get react-router to work with webpack-dev-server but keep getting cannot Get /SOMEURL. This is because webpack-dev-server is looking for that specific file but cannot find it. I'd like webpack to resort to using react-router vs searching for the files itself. How can I set that up?...

Webpack optimize with UglifyJS plugin causes runtime error

javascript,reactjs,uglifyjs,webpack
I have an isomorphic React application that is bundled via webpack. I have 2 entry points corresponding to 2 bundled file outputs: vendors.js and app.js. When running the webpack-dev-server or when compiling without any optimization flags, everything works fine. However, as soon as I try to use the Uglify plugin,...

Managing Jquery plugin dependency in webpack

javascript,jquery,amd,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 use plugins which have JQuery as their dependencies and I want to have them...

React FixedDataTable Webpack bundle - Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined

reactjs,webpack
I've created a simple component called MyDataTable, as a wrapper over React FixedDataTable component and bundled it with Webpack. The file resulted from this bundle is called my-components.js. Nothing really complicated until here. You can try the source code to see how it works: https://github.com/cosminnicula/fdtwebpack Now, the second step would...

How can I injector Angular module in webpack?

angularjs,commonjs,webpack
I install ngRoute from npm, my webpack default load default.js webpack.config.js 'use strict'; var path = require('path'), webpack = require("webpack"), AngularPlugin = require('angular-webpack-plugin'); module.exports = { resolve: { root: [path.join(__dirname, "bower_components")] }, plugins: [ new webpack.ResolverPlugin( [new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])], ["normal", "loader"] ), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "windows.jQuery": "jquery",...

Webpack: Create a bundle with each file in directory

javascript,angularjs,webpack
I am trying to bundle every angular module in webpack. My target is to have one app.js that will be bundled by webpack with this configuration: entry: { app: "./app/app.js" }, output: { path: "./build/ClientBin", filename: "bundle.js" }, I will place this bundle script in my index.html so it will...

React-Style, Webpack, React - Uncaught Error: Invariant Violation: The `style` prop

reactjs,webpack,webpack-dev-server
I'm getting the following error in my browser: Uncaught Error: Invariant Violation: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This is when running webpack-dev-server and going to localhost:8080. ./modules/main.js: /** @jsx React.DOM */ var...

web pack require() or not? react-hot-loader ES6 or jsx?

javascript,reactjs,webpack
I am looking at the react-hot-loader boilerplate. I thought that using web pack was about serving javascript in one or smaller build.js(name defined), and that required you to use "require('name'). But it looks like the boilerplate is using ES6 "import React from 'react';"? And using react-hot-loader or react-loader was some...

Webpack: Module build failed with jade-loader

webpack
This is likely a config issue, but I'm new to Webpack and haven't been able to figure it out after a few days. I'd appreciate some help! Packages webpack 1.9.8 jade-loader 0.7.1 jade 1.9.2 webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = { // ... resolve: {...

How to reconcile global webpack install and local loaders

node.js,webpack
My package.json includes webpack and some loaders: "devDependencies": { "babel-core": "^5.2.17", "babel-loader": "^5.0.0", "jsx-loader": "^0.13.2", "node-libs-browser": "^0.5.0", "webpack": "^1.9.4" } When I run webpack it's not in my path so it doesn't show as found. I installed it globally npm install -g webpack so the binary would appear in my...

Webpack plugin watching child compilation

javascript,node.js,webpack
The plugin compiles an additional asset during the emit phase: MyPlugin.prototype.apply = function(compiler) { compiler.plugin('emit', function(compilation, callback) { var outputOptions = { filename: 'output.js', publicPath: compilation.outputOptions.publicPath }; var childCompiler = compilation.createChildCompiler('MyPluginCompilation', outputOptions); childCompiler.apply(new NodeTemplatePlugin(outputOptions)); childCompiler.apply(new LibraryTemplatePlugin('result', 'var')); childCompiler.apply(new NodeTargetPlugin());...

Webpack require won't work

javascript,jquery,webpack
So I have this code, using jQuery... require("./locations.js"); $( document ).ready(function() { console.log("Adding locations.."); $.each(locations, function(key,loc) { if (loc.popular == 1) $(".popular-list").append("<a href='#'><li class='loc'>Hello</li></a>"); }); $.ajax({ url : "changelog.txt", dataType: "text", success : function (data) { $(".the-log").html(data); } }); }); and locations.js contains this: var locations = [ { name:...

Webpack: node_modules/css/index.js didn't return a function

javascript,webpack
I'm trying out webpack for the first time and used this tutorial to get started and include react.js. After finishing the steps and installing the style and css module I keep getting an error that the css module didn't return a function. This is my index.jsx: /** @jsx React.DOM */...

webpack: How to use Chunk multiple items

javascript,webpack
How to use CommonsChunkPlugin to Chunk multiple vendors into their own chunk file? I want to chunk each of the libraries separately into their own Chunk file, and effectively have, commons.[chunkhash].js react.[chunkhash].js lodash.[chunkhash].js bluebird.[chunkhash].js app.[chunkhash].js And when using OccurenceOrderPlugin make sure that however app code changes (or) irrespective of the...

error with webpack when follow official tutorial

javascript,webpack
When I learn webpack I follow this tutorial: http://webpack.github.io/docs/tutorials/getting-started/ I run webpack ./entry.js bundle.js after I installed webpack(use the same command as the tutorial) and create just the exact files as the tutorail. Then I got the error. "module.js:338 throw err; ^ Error: Cannot find module 'assert/' at Function.Module._resolveFilename (module.js:336:15)...

How to make “require('jquery')” automatically load with many jquery plugins/extensions in webpack?

jquery,node.js,webpack
There are a number of plugins I want jquery to automatically have. In a regular site I would simply include jquery and the script in order. How do I accomplish this with webpack? Assume there is no npm package for the plugins and I just want to load them from...

Is it possible to disable source maps for certain files in webpack?

javascript,webpack,source-maps
I'd like to hide a part of my code from being shown in chrome dev tools. Is it possible with webpack?

Is bundling (webpack/browserify) faster than going through a CDN?

jquery,browserify,webpack
I was just curious if anyone had done any research into this matter. At my place of work we have React, Bluebird, jQuery, and Lodash in every single one of our projects/bundles. We use webpack to bundle all of these dependencies, but I'm not sure if it is actually worth...

Passing environment-dependent variables in webpack

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 of achieving a similar result with webpack?

Run command after webpack build

javascript,webpack
I'd like to run webpack in --watch mode, and run a shell command after each build that synchronizes a folder to another one. I found this plugin that triggers an event after each build. That works, but the last piece of the puzzle is to trigger a shell command (for...

Webpack bundle-loader trying to load non-existent file

webpack
I'm trying to use Webpack's bundle-loader to asynchronously load Pikaday for a datepicker component (I only want to load Pikaday on those pages that use it). It seems that I've managed to get the build working correctly -- an additional JS file is generated that includes Pikaday, and my base...

What webpack loader can require a library in every file matched by a pattern?

reactjs,webpack
I've got a number of files in some/path/*.cjsx, compiled using the coffee and cjsx loader. They all have React = require('react'), and I was wondering if there's a way to make this DRY without assigning React to a global variable.

react-bootstrap using webpack

webpack,react-bootstrap
I am trying to use react-bootstrap with web pack. I am able to get a bootstrap <Button> on a page, but there is no styles attached? I have installed: "devDependencies": { "babel-core": "^5.1.11", "babel-loader": "^5.0.0", "css-loader": "^0.12.1", "react-hot-loader": "^1.2.2", "react-router": "^0.13.3", "webpack": "^1.7.2", "webpack-dev-server": "^1.7.0" }, "dependencies": { "bootstrap": "^3.3.4",...

Webpack-dev-server and isomorphic react-node application

node.js,reactjs,webpack,isomorphic-javascript,webpack-dev-server
I've managed to properly use webpack dev server alongside with a node server (express), using the plugin section inside webpack's config. It all works fine but now I'm trying to go isomorphic and use client-side components inside the express application. So far the only problem I'm encountering is that without...

webpack verbose error message

node.js,webpack
I was using webpack, and recently updated few packages (babel, babel-loader,..) and see an error in webpack output. but, not sure how to debug further. The application seems to work fine. I tried with various debug options, but not getting a verbose output of the error. ./node_modules/.bin/webpack --config webpack.config.js --progress...

Using a loader inside a webpack plugin

javascript,webpack
For clarification - this is a question about writing a webpack plugin How do you use the webpack require inside a webpack plugin? MyPlugin.prototype.apply = function(compiler) { var self = this; compiler.plugin('emit', function(compilation, callback) { var file = 'example.css'; compilation.fileDependencies.push(file); var loaderResult = require('style!css!' + file); // <-- is there...

Webpack: Is it possible to evaluate javascript expression at compile time?

javascript,node.js,bundling-and-minification,webpack
I'm trying to setup webpack for my project. The project is big enough and is provided in multiple languages. I want each of my entry points to be provided in each language as separate files. My language files are not just plain JSON, but JavaScript instead. So i18n plugin doesn't...

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item

javascript,reactjs,webpack
I'm new to React and Javascript and I'm trying to render the following React component: 'use strict'; var React = require('react'); import ToReadList from './toreadlist.js'; var ToRead = React.createClass({ getInitialState: function() { return { bookTitles: [] }; }, handleSubmit: function(e) { e.preventDefault(); this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim()); this.setState({items: this.state.bookTitles}); }, render: function() { return...

Sass loader not working in webpack

node.js,sass,webpack
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command: ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer...

Webpack HMR never updates the page

javascript,node.js,webpack
I've been messing around with different features of Webpack, and I'm slowly making sense of things. Typical console-output: [WDS] App updated. Recompiling... [WDS] App hot update... [HMR] Checking for updates on the server... [HMR] The following modules couldn't be hot updated: (They would need a full reload!) [HMR] - 14...

Webpack externals in both node and the browser

node.js,reactjs,webpack,isomorphic-javascript
I have an isomorphic React application which runs in both the browser and on the server. I build the same code for both by running two separate Webpack builds through two different entry points and with different configs. The problem is that the external file that exists on the browser...

CommonJS Illegal invocation error when calling function on module.exports

javascript,commonjs,webpack,method-invocation
Doing this works fine: var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; function _test() { console.log('hello from test'); } requestAnimationFrame(_test); However moving this to another file and exporting it using CommonJS/webpack results in: Uncaught TypeError: Illegal invocation (like so:) module.exports.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame; ... var poly =...

Trying to use mongoose with node-webkit target on Webpack

node.js,mongoose,node-webkit,webpack
I use webpack and target it's build output for node-webkit. I want to require the mongoose module inside my project to connect to mongodb, but it always states some errors when I try to pack the project: WARNING in ./~/mongoose/~/mongodb/~/mongodb-core/~/bson/~/bson-ext/ext/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./win32/x64/bson...

React from NPM cannot be used on the client because 'development' is not defined. The bundle was generated from Webpack

javascript,node.js,npm,reactjs,webpack
I'm creating a React Node.js app and I'm trying to generate a Webpack bundle containing the React source code I loaded from NPM. However, it seems that the React code from NPM cannot be used directly in the client. It triggers this error: Uncaught ReferenceError: development is not defined The...

Webpack loading code split bundles on the fly

javascript,requirejs,webpack
So I want to split my application code into 3 bundles using webpack. I'm able to get my framework bundle loading and working, but I can't get the other two bundles to load on the fly. Heres my webpack config: var fs = require('fs'), path = require('path'), webpack = require('webpack'),...

what is the most reasonable way apply webpack to a full-stack node app?

express,webpack,webpack-dev-server
i've been studying up on webpack for a couple of weeks now, and i've seen many examples of front end setups, and probably just this one setup for a backend. i'm trying to setup a react app with a node back-end (e.g. express, koa, hapi, etc) where i would need...

How to minify gulp-webpack file?

javascript,node.js,compression,gulp,webpack
Have a follow situation: gulp.task('webpack', function(cb) { gulp.src('webpack-init.js') .pipe(webpack({ output: { filename: 'bundle.js', }, })) .pipe(gulp.dest('./client/js')); cb(); }); All ok, but i want to minify output file. If i use gulp-uglify directly - .pipe(webpack(...)) .pipe(uglify().on('error', gutil.log)) .pipe(gulp.dest('./client/js')); have an error: "Unexpected token: punc ())]" and others of that ilk. ...

Include paths for imports in babel using webpack

ecmascript-6,webpack,babeljs
Given a directory structure such as: project ├───common │ └───js └───src └───js is there any way to add import paths to webpack so that a script inside src/js can resolve code inside common/js if it cannot find anything else locally? Something like the code below would include common/js/CommonClass.js: import CommonClass...

How to restrict Webpack `require.context` neatly?

javascript,webpack
I am developing a little static site generator on top of Webpack and React. Currently I'm making it more dynamic. One part of this is making it more configurable. Given a site structure like this . ├── _book ├── assets ├── build ├── drafts ├── manuscript ├── node_modules ├── pages...

Importing CSS files in Isomorphic React Components

javascript,reactjs,webpack,babeljs
I have a React application with Components written in ES6 - transpiled via Babel and Webpack. In some places I would like to include specific CSS files with specific Components, as suggested in react webpack cookbook However, if in any Component file I require a static CSS asset, eg: import...

Defining an imported external module with WebPack + TypeScript

javascript,jquery,typescript,webpack
I'm trying to get WebPack set up with TypeScript and some external libraries, but having some trouble. I'm importing the src version of jQuery in order to let WebPack choose the required modules (this was needed to get the Boostrap-SASS loader working), so am importing the library like this in...

Webpack + React and Google Chrome 43.0.2357.65

javascript,google-chrome,reactjs,webpack
After updating Google Chrome (v. >= 43.0.2357.65) error was displayed in console: Uncaught SyntaxError: Unexpected token function in different places of my bundle.js. It appears only when bundle.js returns 200 http status. But after refresh page this file returns 304 http status and all works fine without errors. I'm using...

Webpack: can't find bundle.js

javascript,node.js,webpack
I've finally got the he dev server running and I get something on screen. I've setup a "start" script for NPM like this: "start": "webpack-dev-server --content-base app" I get an error: http://localhost:8080/bundle.js Failed to load resource: the server responded with a status of 404 (Not Found) My folders are set...

Webpack imports-loader with messageformat and angular-translate

javascript,angularjs,google-chrome,webpack
I'm having some difficulty making angular-translate-interpolation-messageformat play nice with the imports-loader for MessageFormat. I outline the issue in this issue. Copied: Even though the module is exposed using UMD (yay) it is actually using the global MessageFormat object here. This is forcing me to either expose MessageFormat onto window (which...

How do I load SVGs directly in my React component using webpack?

svg,icons,reactjs,loader,webpack
I would like to render a material design icon directly in my NextButton component using webpack. Here's the relevant part of my code: var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg'); var NextButton = React.createClass({ render: function() { return ( <Link to={this.props.target} className='button--next'> {this.props.label} {NextIcon} </Link> ) } }); But this isn't working as...

Webpack Uglify plugin returns “Killed” on Ubuntu

gulp,webpack
On my remote server (Ubuntu 14.04 x64), whenever I try to uglify my bundles, the process simply returns "Killed". When I don't uglify, it's just fine. Has anyone run into this? When I do it on my local Mac, it's fine (although I just tested it and it took 1.4...

Why does webpack include a module in my first entry as well as my page bundle

reactjs,webpack,react-router
It seems like I'm having some sort of configuration issue with webpack and my react-router app. I'm trying to break up the bundle by pages, but I'm using react-router and I have a single "main" which does a router.run to route the app paths. It looks like when webpack runs...

Webpack dev server hot mode not working

javascript,webpack,webpack-dev-server
Heres my config: devServer: { contentBase: '/web/dist/', hot: true, stats: {colors: true}, inline: true } And here's the gulp task im running: gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) { es6promise.polyfill(); console.log('STARTING DEV SERVER...'); server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer); server.listen(8080, '0.0.0.0', function (err, stats) { if (err) { throw...

How to shim tinymce in webpack?

javascript,node.js,tinymce,webpack,shim
I'm trying to get tinymce recognized by webpack. It sets a property named tinymce on window, so evidently one option is to require() it using syntax like this (described at the bottom of the EXPORTING section of the webpack docs): require("imports?window=>{}!exports?window.XModule!./file.js But in this example, how is ./file.js resolved? I...

Does webpack allow to run my app without building like jspm?

javascript,dependency-management,browserify,webpack,jspm
I was just wondering about this. Can webpack work in the browser without doing any builds, like JSPM? Or is it the same as browserify? I looked at the official docs and found no mention of this.

Exposing jquery plugin with Webpack

webpack
I'm trying to use bootstrap-daterangepicker with Webpack. In my view file I have the following: define(function (require) { require('bootstrap-daterangepicker'); $('#daterangepicker').daterangepicker({ ... }); }); And in webpack.config.js: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] This results in daterangepicker is not a function. I've taken a look...

How to include external file with webpack

javascript,webpack
Is it possible to include external file with webpack (outside the context) and make the file included in built output bundle.js? consider this setup where "sub-app" is context for webpack: /sub-app/entry.js /bower-components/zepto/zepto.js And webpack config with broccoli: var webpackify = require('broccoli-webpack'); var path = require('path'); var webpack = require("webpack"); var...

angular.element($window).scrollTop() is throwing “is not a function” with webpack

angularjs,angularjs-directive,webpack
I am using Angularjs for my frontend development. Recently I started implementing Webpack then I realized that angular.element($window).scrollTop() stopped working and started throwing error as "windowElement.width is not a function". Following are old code and new code with webpack. Old working code: app.directive("ajnav", ['$window', '$location', function ($window, $location) { return...