Develop Reference

Webpack error for 3rd party react module (effector)

EDIT: I gave up with my own Webpack setup and just used react-scripts and now it compiles just fine. So must have been my Webpack/Babel setup, though still can't find out what
I'm trying to play around with the module effector, which has a React binding effector-react. I copy pasted a basic (working) code sandbox example, but I'm getting a webpack error which makes me think my build configuration isn't right.
My simple component is as follows:
import React from "react";
import { useStore } from "effector-react";
import { s_counter } from "stores/counter";
function Count () {
const counter = useStore(s_counter);
return ( <div>{counter}</div> );
};
export default Count;
and my effector counter store is as follows:
import { createStore, createEvent } from "effector";
// Store
const s_counter = createStore(0);
export { s_counter };
I think the issue is with my Webpack/Babel config, which are as follows:
webpack.config.js
const path = require("path");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/src/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
alias: {
components: path.resolve(__dirname, 'src/components/'),
stores: path.resolve(__dirname, 'src/stores/'),
},
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
I'm using webpack 4, and when I build by just running webpack my app doesn't load and I get the console error:
effector.es.js:35 Uncaught SyntaxError: Invalid or unexpected token
at Object../node_modules/effector/effector.es.js (bundle.js:109)
at __webpack_require__ (bundle.js:20)
at eval (effector-react.es.js:13)
at Module../node_modules/effector-react/effector-react.es.js (bundle.js:97)
at __webpack_require__ (bundle.js:20)
at eval (Count.jsx:4)
at Module../src/components/Count.jsx (bundle.js:311)
at __webpack_require__ (bundle.js:20)
at eval (App.jsx:4)
at Module../src/components/App.jsx (bundle.js:299)
The actual error is caused by importing things from effector-react, specifically this line:
import { useStore } from "effector-react";
doesn't matter what module I import from effector-react, I get that console error. Any ideas for what's going wrong are welcome.
EDIT: same kind of problem if importing from effector itself too

Tested on npm#6.4.1, webpack4.30.0 & node#10.13.0
Try this,
Did you download effector separately as a npm dependency.
I believe you are not able to resolve this module specifically.
I tried using the same modules using.
npm install effector
npm install effector-react
Adding the above two dependencies. It works fine.
Adding a sample of my module property from webpack
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}]
}
Hope this helps.

MQTT.js and Webpack - "WS is not a constructor"

I am trying to bundle one of our microservices which is using MQTT.js and I am struggling with really strange issue.
It is working fine without bundling, so ws is available in node_modules.
Stuff which I think matters:
error:
TypeError: WS is not a constructor
at WebSocketStream (dist/index.js:159329:16)
at createWebSocket (dist/index.js:147450:10)
at Object.buildBuilderBrowser (dist/index.js:147476:10)
at MqttClient.wrapper [as streamBuilder] (dist/index.js:147937:36)
at MqttClient._setupStream (dist/index.js:146471:22)
at new MqttClient (dist/index.js:146452:8)
at Function.connect (dist/index.js:147940:10)
webpack config:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { NODE_ENV = 'production' } = process.env;
module.exports = {
entry: { index: './src/index.ts' },
mode: NODE_ENV,
target: 'node',
watch: NODE_ENV === 'development',
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
resolve: {
extensions: ['.ts', '.js'],
},
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.ts$/,
use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
},
{
test: /(\.md|\.map)$/,
loader: 'null-loader',
},
],
},
};
Function where it happens:
createMqttClient(): MqttClient {
return mqtt.connect(this.mqttOptions.url, { ...this.mqttOptions.options });
}
The url is like: ssl://url-to-our-mqtt
Can anybody help please?

I also ran into same issue.
The problem for me was that I used
plugins: [
new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
],
in webpack.config.js order to fix the shebang error that comes with mqtt.js since it is a CLI tool.
Then instead I have used
{
test: [
/node_modules[/\\]mqtt[/\\]mqtt.js/,
/node_modules[/\\]mqtt[/\\]bin[/\\]sub.js/,
/node_modules[/\\]mqtt[/\\]bin[/\\]pub.js/,
],
loader: 'shebang-loader'
},
And my problem was fixed. Do you also use mqtt/dist/mqtt.js instead of mqtt in your imports or if you do something similar to mine, the shebang-loader rule I have posted above might solve your problem.

I experienced the same with Amazon aws-iot-device-sdk-js and Microsoft azure-iot-device-mqtt which both include mqtt.
The initial issue is the build error:
ERROR in ./node_modules/mqtt/mqtt.js Module parse failed: Unexpected character '#' (1:0)
This error is caused by the package mqtt. Three files (mqtt.js, pub.js and sub.js) contain a shebang line
#!/usr/bin/env node
The solution using module replacement suggested some places
plugins: [
new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
],
unfortunately changes the build error with the run time error
TypeError: WS is not a constructor
As mentioned in other answers, webpack can be configured (https://webpack.js.org/concepts/loaders/) to use the shebang loader (https://www.npmjs.com/package/shebang-loader)
TL;DR
Install shebang-loader
npm install shebang-loader --save
In webpack.config.js use the loader
module.exports = {
...
module: {
rules: [
{
test:
[
/.*mqtt\.js$/,
/.*sub\.js$/,
/.*pub\.js$/
],
use: 'shebang-loader'
}
]
}
}

Getting Error: Module parse failed: ... unexpected character '#'

I am using webpack for the first time and want to use some css with my react/redux application. I followed a guide, but still seem to be having problems. I am getting the above error as you can see.
folder structure looks like this:
.git
-node_modules
-public
-bundle.js
-index.html
-src
-actions
-components
-reducers
app.js
-style
-style.css
.babelrc
.gitingore
package-lock.json
package.json
README.md
server.js
webpack.config.js
This is the exact error:
Uncaught Error: Module parse failed: C:\Users\Amazo\projects\reduxApp\style\style.css Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #row1 {
| margin-top: 15px;
| }
I will post my webpack config file below:
var path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude:/node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
]
},
resolve: {
extensions: ['.js','.jsx']
},
plugins: [
new HTMLWebpackPlugin({
template: 'public/index.html';
}),
new ExtractTextPlugin('style.css')
]
};

Add .css to your resolve
resolve: {
extensions: ['.js','.jsx', '.css']
},
Otherwise, webpack won't be able to process it correctly

NpmInstallPlugin - TypeError: undefined is not a function

I'm a super newbie in webpack. I'm starting a new project with babel-loader and react. However, I see this error when starting the server:
/home/mfebrianto/dev/mfebrianto/food/Menubook/node_modules/npm-install-webpack-plugin/src/plugin.js:32
this.options = Object.assign(installer.defaultOptions, options);
^
TypeError: undefined is not a function
at new NpmInstallPlugin (/home/mfebrianto/dev/mfebrianto/food/Menubook/node_modules/npm-install-webpack-plugin/src/plugin.js:32:25)
at Object.<anonymous> (/home/mfebrianto/dev/mfebrianto/food/Menubook/webpack.config.js:79:13)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at module.exports (/usr/lib/node_modules/webpack-dev-server/node_modules/webpack/bin/convert-argv.js:80:13)
at Object.<anonymous> (/usr/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:55:48)
This is my webpack.config.js :
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
process.env.BABEL_ENV = TARGET;
const common = {
// Entry accepts a path or an object of entries. We'll be using the
// latter form given it's convenient with more complex configurations.
entry: {
app: PATHS.app
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
// Test expects a RegExp! Note the slashes!
test: /\.css$/,
loaders: ['style', 'css'],
// Include accepts either a path or an array of paths.
include: PATHS.app
},
// Set up jsx. This accepts js too thanks to RegExp
{
test: /\.jsx?$/,
// Enable caching for improved performance during development
// It uses default OS directory by default. If you need something
// more custom, pass a path to it. I.e., babel?cacheDirectory=<path>
loaders: ['babel?cacheDirectory'],
// Parse only app files! Without this it will go through entire project.
// In addition to being slow, that will most likely result in an error.
include: PATHS.app
}
]
}
};
// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
// Enable history API fallback so HTML5 History API based
// routing works. This is a good default that will come
// in handy in more complicated setups.
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
// Display only errors to reduce the amount of output.
stats: 'errors-only',
// Parse host and port from env so this is easy to customize.
//
// If you use Vagrant or Cloud9, set
// host: process.env.HOST || '0.0.0.0';
//
// 0.0.0.0 is available to all network devices unlike default
// localhost
host: process.env.HOST,
port: process.env.PORT || 9000
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true, // --save
peerDependencies: true
})
]
});
}
if(TARGET === 'build') {
module.exports = merge(common, {});
}
What should I do to make the NpmInstallPlugin work in my project?

Make sure that you use node version 4 or above.
You can check it with command in console:
node -v
This problem is probably related with not supporting Object.assign() in node version 0.x.

Webpack fails to build ES6 in external packages

I'm trying to use an ES6 npm package (in this case one called gamesystem) in a project and build with webpack (and babel) it fails to build any ES6 code inside the external dependency, why is that? If I have the same code as a dependency with a relative path it works fine.
App code:
'use strict';
import World from 'gamesystem'; // Breaks
//import World from '../node_modules/gamesystem'; // Also breaks
//import World from '../gamesystem'; // Works (copied the same directory gamesystem outside the node_modules directory)
let world = new World();
Error:
ERROR in ./~/gamesystem/World.js
Module parse failed: /home/user/project/node_modules/gamesystem/World.js Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
|
| import System from './System';
|
| export default class World {
# ./src/app.js 3:18-39
Webpack config:
'use strict';
// Modules
let WebpackNotifierPlugin = require('webpack-notifier');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let config = {
entry: {
app: __dirname + '/../src/app.js'
},
devtool: 'source-map',
devServer: {
stats: {
modules: false,
cached: false,
colors: true,
chunk: false
},
proxy: require('./devProxy')
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test: /\.html$/,
loader: 'raw'
}]
},
plugins: [
new WebpackNotifierPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/../src/index.html',
inject: 'body',
minify: false
})
]
};
module.exports = config;

You're explicitly excluding node_modules from babel-loader:
exclude: /node_modules/,
You'll need to tweak that if you want to pass modules from node_modules through babel. You might consider explicit includes like this:
// be sure to req path
// var path = require('path')
include: [
// Include everything from your app path
path.resolve(__dirname, 'my-app-js-path'),
// Include gamesystem modules
/\bgamesystem\b/,
],