We Keep Coding

require vm2 using electron and webpack

I encounter an error when I try to import the vm2 module inside the Electron renderer process using Webpack.
import fs from 'fs'
console.log('ok')
const { NodeVM } = require('vm2')
console.log('ko')
Here is the error, displayed by Webpack:
WARNING in ./~/vm2/lib/main.js
Critical dependencies:
180:26-33 require function is used in a way in which dependencies cannot be statically extracted
335:15-22 require function is used in a way in which dependencies cannot be statically extracted
367:26-33 require function is used in a way in which dependencies cannot be statically extracted
# ./~/vm2/lib/main.js 180:26-33 335:15-22 367:26-33
WARNING in ./~/vm2/lib/sandbox.js
Module parse failed: /Users/guillaume/Voyager/Voyager/node_modules/vm2/lib/sandbox.js 'return' outside of function (20:0)
You may need an appropriate loader to handle this file type.
SyntaxError: 'return' outside of function (20:0)
at Parser.pp.raise (/Users/guillaume/Voyager/Voyager/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.parseReturnStatement (/Users/guillaume/Voyager/Voyager/node_modules/acorn/dist/acorn.js:1864:74)
I tried excluding the node_modules folder from my webpack config:
module: {
loaders: [{
test: /\.js$/,
include: PATHS.app,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: [ 'es2015', 'react', 'stage-1' ],
plugins: [ 'add-module-exports', 'transform-decorators-legacy' ],
},
}, {
test: /\.scss$/,
loaders: [ 'style', 'css', 'postcss-loader?parser=postcss-scss' ],
include: PATHS.app,
}],
}
But it does not seem to work. the first console.log appears, not the second one.
I added the target as well using webpack-target-electron-renderer. Same..
Finally, when I add externals: [/vm2/], Webpack does not throw any error, but the renderer console says Uncaught ReferenceError: vm2 is not defined
I would guess it has something to do with the fact that vm2 is using require dynamically and webpack doesn't like that (because importing fs is working fine)
Where does that problem come from and how can I fix it?

Webpack throws syntax error for JSX

When I attempted to use webpack to compile my react jsx code, I received the following error:
ERROR in ./client/index.js
Module parse failed: C:\Users\Gum-Joe\Documents\Projects\bedel/client\index.js Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
at Parser.pp.raise (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:920:13)
at Parser.pp.unexpected (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1483:8)
at Parser.pp.parseExprAtom (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:330:12)
at Parser.pp.parseExprSubscripts (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:225:19)
at Parser.pp.parseMaybeUnary (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:204:17)
at Parser.pp.parseExprOps (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:151:19)
at Parser.pp.parseMaybeConditional (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExpression (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:86:19)
at Parser.pp.parseReturnStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1854:26)
at Parser.pp.parseStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1719:19)
at Parser.pp.parseBlock (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1991:21)
at Parser.pp.parseFunctionBody (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:607:22)
at Parser.pp.parseMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:576:8)
at Parser.pp.parseClassMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2137:23)
at Parser.pp.parseClass (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2122:10)
# ./client/index.js 1:0-20
.babelrc:
{
"presets": ["es2015", "react"]
}
webpack.config.js:
// Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// Use client as our root
context: __dirname + "/client",
// Entry file
entry: "./index.js",
// Resolve
resolve: {
extensions: ['', '.js', '.jsx']
},
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
],
// Plugins
plugins: [
// HTML
new HtmlWebpackPlugin({
title: 'Bedel',
filename: path.join(__dirname, 'views', 'index.ejs'),
template: path.join(__dirname, 'client', 'templates', 'index.ejs')
})
]
};
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React</p>;
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
I have installed all the babel presets required, as well as babel-core.
I have looked at the following answers already:
babel-loader jsx SyntaxError: Unexpected token
React, babel, webpack not parsing jsx code
Edit: After commenting out my jsx syntax, the outputting bundle.js does not appear to have been transformed by babel (i.e. I can see ES6 code in it)
Edit: Sorry for the inconvenience, but app.jsx was a solution that I tried that involved putting the logic that should be in index.js into a separate file.
Edit: Here is a list of the solutions I tried that did not work:
Copy .babelrc to client/.babelrc
Change test to test for .js instead of .js
Separate app logic into separate file (app.js)
Put presets to use in webpack config
Also, I have pushed my code to my GitHub repo (https://github.com/Gum-Joe/bedel). Feel free to have a look at it.

You configured the loader to only pass .jsx files through Babel:
test: /\.jsx$/
However, your file has the extension .js. Either rename the file or update the test expression to /\.jsx?$/.
In addition to updating the test, you need to rename .babel.rc to .babelrc (no . before rc). Otherwise Babel thinks that there is no configuration file and won't load any presets.

The loaders property must exist within the module property. Webpack Loaders
module.exports = {
// ...
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
]
},
//...
};

You need to use react-preset with babel, like here:
loaders: [{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
presets: [
'es2015',
'react'
]
}
}]

I'm having this issue as well, and if you're using Windows and Node 6.x, the only workaround I've found for now seems to be to use Node 4 LTS or 5 instead. Without knowing the root cause, the problem seems to stem from some combination of using JSX, Webpack, Babel, Acorn JS, Node 6, and Windows.
https://github.com/coryhouse/pluralsight-redux-starter/issues/2
https://github.com/danmartinez101/babel-preset-react-hmre/issues/32

Can you try wrapping the entire element in brackets "()"?
return (<p>...</p>)

Karma, webpack, emblem-loader compiled is not defined

We use coffee-script and emblem for templates in project. Webpack is used for bundling and Karma to run tests. I've tried to use emblem-loader for emblem processing with webpack. Here is the repository I created with simple example how to reproduce it.
karma webpack config (coffee-script):
webpack:
module:
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" },
{ test: /\.emblem$/, loader: "emblem-loader"}
],
resolve:
extensions: ["", ".emblem"]
webpackMiddleware:
noInfo: true
Template is imported via emblemTemplate = require 'template_path.emblem', then trying to do emblemTemplate(context).
Resulting Errors:
in PhantomJS: Can't find variable: compiled
in Chrome: ReferenceError: compiled is not defined
Definitely the problem is with processing the template and not template itself for loader returns function that check if (!compiled) {...}.

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.

How do I make Webpack exit with an error when jshint emits warnings?

Using jshint-loader with Webpack, how do I make the webpack command fail when JSHint emits warnings?
The context being that I wish to fail the CI build if linting detects issues.
Currently, I've simply configured Webpack to run jshint-loader on preload of JS files:
// webpack.config.js
module.exports = {
module: {
preLoaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'jshint-loader',
},
],
},
};

First, jshint-loader must be configured to fail in case issues are found (failOnHint: true), optionally one can also choose to emit warnings as Webpack errors (emitErrors: true).
// webpack.config.js
module.exports = {
module: {
preLoaders: [
{
test: /\.js/,
exclude: /node_modules/,
loader: 'jshint-loader',
},
],
},
jshint: {
emitErrors: true,
failOnHint: true,
},
};
Second, Webpack must be told to fail hard, by supplying the --bail option: webpack --bail.
Update:
webpack --bail still doesn't emit a non-zero exit code, argh.