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?
Related
My app uses a third party library that has the syntax:
const module = await import(`data:text/javascript;charset=utf-8,${content}`);
While building through Webpack I am getting the following error:
ERROR in ./node_modules/#web/test-runner-commands/browser/commands.mjs
Module not found: Error: Can't resolve 'data:text' in 'C:\path_to_project\node_modules\#web\test-runner-commands\browser'
I tried using babel-loader in my Webpack config:
module: {
rules: [
{
test: /\.m?js$/,
include: [
path.resolve(workingDirectory, 'node_modules/#web')
],
use: 'babel-loader'
}
]
}
I need help figuring out what loader would be able to interpret the expression.
I am trying to include multiple paths into Webpack module rules. Initially it gave me error for ./src/bootstrap.js, So I included the same in rules, now it gives me error for ./src/App.js. When I try to include it in same way, it breaks badly and gives error for many other files.
Can some please tell me how can I include /node_modules/mfe-react/index.js and all files in src folder ?
module.exports = {
module: {
rules: [
{
test: /\.*?js$/,
exclude: /node_modules/,
include: ['/node_modules/mfe-react/index.js',
path(__dirname, "..", "src", "bootstrap.js")
],
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: ["#babel/plugin-transform-runtime"],
},
},
},
],
},
Error:
ERROR in ./src/App.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
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>)
In my project I use gulp to run task, with webpack to compile js modules, which uses babel loader to transform react and ES6. Now I want to add relay transformation. I went by this instructions: https://facebook.github.io/relay/docs/guides-babel-plugin.html#advanced-usage but they doesnt' seem right.
I had to do some little reverse engineering and i produced following gulp task:
gulp.task('js', () => {
// Compile babel (react)
gulp.src(paths.js)
.pipe(er(webpack({
module: {
plugins: [
new require('webpack/lib/ProvidePlugin')({
React: "React",
Relay: 'Relay'
})
],
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react'],
plugins: [require('babel-relay-plugin')(require(paths.db_schema).data)]
}
}
]
},
output: {
filename: paths.js_output
}
})))
.pipe(gulp.dest(paths.dist));
});
Now I get such error for every processed file:
ERROR in (filename)
Module build failed: TypeError: Falsy value found in plugins
at d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:187:15
at Array.map (native)
at Function.normalisePlugins (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:182:20)
at OptionManager.mergeOptions (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:298:36)
at OptionManager.init (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\options\option-manager.js:481:10)
at File.initOptions (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\index.js:211:75)
at new File (d:\Node\organize.me\node_modules\babel-core\lib\transformation\file\index.js:129:22)
at Pipeline.transform (d:\Node\organize.me\node_modules\babel-core\lib\transformation\pipeline.js:48:16)
at transpile (d:\Node\organize.me\node_modules\babel-loader\index.js:14:22)
at Object.module.exports (d:\Node\organize.me\node_modules\babel-loader\index.js:88:12)
# multi main
I did wome more of reverse engineering and i found out that array in plugins is just [ null ] when i replace that line with
plugins: [new (require('babel-relay-plugin')(require(paths.db_schema).data))()]
I get error
TypeError: Cannot read property 'Plugin' of undefined
So how can i make gulp, webpack, babel and relay work together?
Thanks.
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.