We Keep Coding

If running webpack programmatically he doesn't find module

I want to use webpack-api at my electron app for build external web project.
I decide using webpack API in my app, but webpack can't found the babel-loader.
I created simple repository to reproduce the error: repository
Abstract presentation of the project (A - electron app, B - web project for build)
Error msg:
main.js:1 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'D:\User\B\node_modules\babel-loader\lib\index.js'
at eval (webpack:///./node_modules/loader-runner/lib_lazy_namespace_object?:5)
at eval (main.js:1)
Base structure of both project:
Project A:
- main.js
- node_modules/
- webpack.config.js
Project B:
- main.js
- node_modules/
- webpack.config.js
Every project is independent and has all tool for development(like webpack)
My webpack config in project A for run webpack (if I using '/' in path I get API Schema error at webpack):
module.exports = {
mode: "development",
target: "web",
entry: "D:\\User\\B\\src\\main.js",
context: "D:\\User\\B\\",
output: {
path: "D:\\A",
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
resolve: {
modules: [
'D:\\User\\B\\node_modules', //the same error if remove this line
],
},
stats: {
errorDetails: true
},
}
Run webpack:
const webpack = require('webpack');
const config = require('./webpack.config');
const compiler = webpack(config);
compiler.run((err, stats) => {
//output errors...
});
Important:
If to try build project B using webpack cli (through npm), no
errors.
Project A based on Electron.
Using library version on both project: babel-loader^8.1.0, #babel/core^7.9.0, webpack^4.42.1, electron^8.2.1(electron only at A project)
Bundle file is created
Bundle js file is using in HTML file

Looks like this server already has other webpack wich running in watch mode and constanlty removing packages. Try to reload the server

Show correct stacktrace in karma tests

Prerequisites
Typescript
Karma / Jasmine
Webpack
Application
I have simple TypeScript application. Also set of *.ts tests and karma framework to run this tests. Transpiling with Webpack.
Here is part of karma configuration:
...
basePath: '',
frameworks: ['jasmine','sinon'],
files: [
'src/test/spec/**/*.ts'
],
preprocessors: {
'src/**/*.ts': ['webpack', 'sourcemap']
},
webpack: {
debug: true,
devtool: 'inline-source-map',
module: webpackConfig.module,
resolve: webpackConfig.resolve
},
webpackMiddleware: {
quiet: true,
stats: {
colors: true
}
}
...
And webpack configuration
...
resolve: {
extensions: ['.ts', '.js', '.tsx', '.jsx', '']
},
module: {
loaders: [{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: 'ts-loader'
}
]
}
...
Everything works fine, tests are written using TypeScript, PhantomJS is used as headless browser. It works.
Problem
But I experiencing problems with investigating failed tests, because stack trace written to console is incorrect - it always points to the test source file even problem occurred in other place(s).
As an example - I'm sharing my console output after karma launcher
TypeError: 'undefined' is not a constructor (evaluating 'new vRef(this)')
at src/test/spec/validations/required.ts:1764
at DataBase (src/test/spec/validations/required.ts:1690)
at src/test/spec/validations/required.ts:50
at http://localhost:9880/context.js:151
where 'src/test/spec/validations/required.ts' - it's my test file, but stacktrace truly goes through 3 different files.
How to fix output data to point correctly to failed place? Would be very appreciated if anyone can share with me my config or setup problems.

Webpack ERROR in missing path

I am getting an error whenever I try to run Webpack. It just says ERROR in missing path. The error goes away when I remove the module key in the configuration below:
module.exports = {
entry: './client/scripts/app.js',
output: {
path: './docs/scripts/',
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'ng-annotate!',
exclude: /node_modules|docs\/bower_components/
}],
}
};
Here is the error output:
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 76ms
+ 1 hidden modules
ERROR in missing path
My webpack config sits in the root of my project. The folder structure is below:
client
scripts
app.js
node_modules
docs
scripts
bundle.js
bower_components
webpack.config.js

You have mistake in RegExp, add \ before /
/node_modules|docs\/bower_components/
^^
also after ng-annotate you don't need add !, because you are using only one loader
loader: 'ng-annotate'
^^

Sourcemap + istanbul/isparta code coverage for a webpack + babel (for es6) + mocha (+karma)

I have a test project at https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage.
It consists of two simple source files in src/, one with a deliberate error (src/lib2.js).
I want to webpack and transpile using babel from ES6 to ES5 and run the Mocha tests on this bundle using Karma.
I've already added source mapping and tested this so that I can see the line number of the original file.
For me, the stack trace looks like this:
21 02 2016 16:03:15.445:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
21 02 2016 16:03:15.451:INFO [launcher]: Starting browser Chrome
21 02 2016 16:03:16.551:INFO [Chrome 48.0.2564 (Linux 0.0.0)]: Connected on socket /#yRS32ons0_2HGhrwAAAA with id 3072946
START:
lib1
✖ should return 1
Finished in 0.015 secs / 0.001 secs
SUMMARY:
✔ 0 tests completed
✖ 1 test failed
FAILED TESTS:
lib1
✖ should return 1
Chrome 48.0.2564 (Linux 0.0.0)
Error: SIMULATED ERROR
at foo (/home/danb/projects/so-test-project/tests.webpack.js:135:10 <- webpack:///src/lib2.js:13:8)
at Context.<anonymous> (/home/danb/projects/so-test-project/tests.webpack.js:93:31 <- webpack:///test/index.js:7:11)
On the 2nd last line above, it shows webpack:///src/lib2.js:13 which is the correct location in the original source.
To get that mapping, I did this: https://github.com/danielbush/webpack-babel-karma-sourcemap-coverage/commit/6ea992cae499dccc68488bcb3eaca642ae4ed24e
What I want to do is add coverage using something like istanbul (or isparta which uses istanbul) so that I can generate an HTML coverage report in coverage/ that shows me lines that aren't covered (potentially) -- as well as overall coverage percentages.
But I want to ensure that my stack traces are still source mapped correctly like the above.
I've tried isparta-loader and isparta-instrumenter-loader to transpile and instrument the files in question in webpack, but my line numbers are slightly wrong in the stacktrace (above). There seems to be a number of isparta-like things floating around and the documentation is not super-friendly.
To express all of this a bit more generally: I'm bundling files and tests and then testing this in the browser (karma or by more manual means), and I want my source maps (in the browser) to point to the original lines of code and at the same time I want a coverage report to refer to the original lines and files that haven't been covered.

I don't have a solution for a single karma/webpack configuration. My workaround is to have 2 karma confs - which I'm quite happy with atm. (I have other non-karma setups for running tests as well.)
One conf runs the tests in the background with accurate stack traces for my es6 code, and the other runs coverage using isparta-loader to transpile and instrument my source code. (isparta-loader uses isparta, which uses istanbul).
So my "running tests" karma conf looks a bit like this:
var webpack = require('webpack');
module.exports = function (config) {
config.set({
browsers: [ 'PhantomJS' ],
singleRun: false,
frameworks: [ 'mocha' ], // Use the mocha test framework
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': [ 'webpack', 'sourcemap' ]
},
reporters: [ 'mocha' ],
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
// Use imports loader to hack webpacking sinon.
// https://github.com/webpack/webpack/issues/177
{
test: /sinon\.js/,
loader: "imports?define=>false,require=>false"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: { presets: ['es2015'] }
}
]
}
},
webpackServer: {
noInfo: true
}
});
}
and my coverage karma conf looks a bit like this:
var webpack = require('webpack'),
path = require('path');
module.exports = function (config) {
config.set({
browsers: [ 'PhantomJS' ],
singleRun: true,
frameworks: [ 'mocha' ],
files: [
'tests.webpack.js'
],
preprocessors: {
'tests.webpack.js': [ 'webpack' ]
},
reporters: [ 'coverage' ],
webpack: {
// *optional* babel options: isparta will use it as well as babel-loader
babel: {
presets: ['es2015']
},
// *optional* isparta options: istanbul behind isparta will use it
isparta: {
embedSource: true,
noAutoWrap: true,
// these babel options will be passed only to isparta and not to babel-loader
babel: {
presets: ['es2015']
}
},
module: {
loaders: [
{
test: /sinon\.js/,
loader: "imports?define=>false,require=>false"
},
// Perform babel transpiling on all non-source, test files.
{
test: /\.js$/,
exclude: [
path.resolve('node_modules/'),
path.resolve('lib/')
],
loader: 'babel-loader',
query: { presets: ['es2015'] }
},
// Instrument source files with isparta-loader (will perform babel transpiling).
{
test: /\.js$/,
include: [
path.resolve('lib/')
],
loader: 'isparta'
}
]
}
},
webpackServer: {
noInfo: true
},
coverageReporter: {
reporters: [
{ type: 'html', dir: 'coverage/' },
{ type: 'text' }
]
}
});
}
This 2nd conf provides a text report that gives immediate coverage summary in the terminal, and the html report which gives nice source file highlighting of untested code. (There's a hack in both for sinon, which isn't related to this issue.) tests.webpack.js uses webpack's require.context to pull in my browser tests written in mocha. And various karma-* plugins are required.

You may have better luck using Istanbul's new official Babel Plugin to instrument your sources for code coverage.
In my experience, compared to isparta, it provided more accurate coverage reports and required basically no configuration apart from adding it to the list of plugins in my Babel configuration.
Sourcemaps appeared to work correctly "out of the box" when I used it on my project.

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

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 */
'use strict';
require('../css/normalize.css');
var React = require('react');
var Hello = require('./Test/Hello');
React.render(<Hello />, document.getElementById('content'));
And my webpack config file:
module.exports = {
entry: './ui/src/index.jsx',
output: {
path: __dirname + '/build-ui',
filename: 'app.js', //this is the default name, so you can skip it
//at this directory our bundle file will be available
//make sure port 8090 is used when launching webpack-dev-server
publicPath: 'http://localhost:8090/assets'
},
module: {
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
},
externals: {
//don't bundle the 'react' npm package with our bundle.js
//but get it from a global 'React' variable
'react': 'React'
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
When webpack tries to bundle the project it always states the following error:
ERROR in Loader /Users/Johannes/Documents/Development/holmes/node_modules/css/index.js didn't return a function
# ./ui/src/index.jsx 5:0-31
I don't know what to do about that. Has anyone encountered that issue? And how can I solve it?
EDIT: My directory looks as follows:
holmes/
ui/
css/
normalize.css
src/
Test/
Hello.jsx
index.jsx
index.html
package.json
webpack.config.js

This error is caused by a css module inside node_modules. Since you've specified the css-loader in your config, webpack tries to lookup that loader inside node_modules and finds another module called css which doesn't look like a loader (hence the error message).
To avoid confusion you should simply add the -loader postfix to each loader. Omitting the -loader postfix is just a convenience feature by webpack, but unfortunately it's the culprit of that error in your case.
loaders: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.jsx$/,
loader: 'jsx-loader?insertPragma=React.DOM&harmony'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
}
Update: Starting with webpack 2, you can't omit the -loader postfix anymore. We decided to do this to prevent errors like this.

I had a similar issue with react-flexbox-grid. In my case, the solution was installing css-loader and style-loader npm modules:
npm install css-loader style-loader --save-dev

I also came across a similar issue using node-noop.
Fortunately, using null as a replacement worked when I added enzyme and react-addons-test-utils to a project.