Babel compiles with Webpack but not with Jest - node.js

I'm trying to setup Jest to work with my ES6 project using Babel with env preset. The code compiles and works with Webpack but not with Jest. Issue seems to be with transpiling code from inside of node_modules.
package.json (yarn) :
{
"name": "generative-toolbox",
"version": "0.0.1",
"main": "toolbox.js",
"repository": "git#bitbucket.org:yojeek/generative-toolbox.git",
"author": "msamoylov <antiplaka#gmail.com>",
"license": "MIT",
"private": true,
"scripts": {
"build": "yarn webpack --config webpack.config.js",
"test": "jest --debug"
},
"devDependencies": {
"babel-jest": "^22.4.3",
"jest": "^22.4.3",
"regenerator-runtime": "^0.11.1",
"webpack-cli": "^2.1.2"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-register": "^6.26.0",
"dat.gui": "^0.7.1",
"enumify": "^1.0.4",
"event-pubsub": "^4.3.0",
"webpack": "^4.6.0"
},
"babel": {
"presets": [
["env"],
"stage-2"
],
"env": {
"test": {
"presets": [
["env", {
"targets": {
"node": "9.4.0"
},
"debug": true
}],
"stage-2"
]
}
}
}
}
webpack.config.js :
var path = require("path");
module.exports = {
entry: "./toolbox.js",
mode: 'development',
output: {
path: path.resolve(__dirname, "dist"),
filename: "generative.toolbox.js",
publicPath: '/dist/',
library : "GenT"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
}
}
Definitions from toolbox.js :
import EventPubSub from 'event-pubsub'
class GUI {
gui
config
values
constructor() {
// some valid code
}
}
class MIDI extends EventPubSub {
midi
constructor() {
super()
// some valid code down there
}
}
test.js :
import {GUI, MIDI} from './toolbox.js'
test('gui sanity', () => { // <--- pass
let gui = new GUI()
expect(gui).toBeTruthy()
});
test('midi sanity', () => { // <--- fail
let midi = new MIDI()
expect(midi).toBeTruthy()
});
Test fails with following result :
TypeError: Class constructor EventPubSub cannot be invoked without 'new'
99 | midi
100 |
> 101 | constructor() {
102 | super()
103 |
104 | // request MIDI access
at new MIDI (toolbox.js:101:17)
at Object.<anonymous> (test.js:15:14)

So, because I want to extend ES6 Class from within node_modules I had to explicitly exclude it in jest config :
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!event-pubsub).+\\.js$"
]
}
That way the module will be imported to my test as it is (not transpiled).

Related

How to run the webpack 3 project in a local system?

I have a webpack project 3 and I want to run it on my local system.
Here is my webpack config file and the package.json
{
"private": true,
"name": "XXx",
"version": "Xxx",
"description": "X",
"main": "index.js",
"dependencies": {
"babel": "^6.23.0",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"findandreplacedomtext": "^0.4.6",
"raw-loader": "^0.5.1",
"style-loader": "^0.19.1",
"text-loader": "0.0.1"
},
"devDependencies": {
"nodemon": "^1.19.4",
"sass": "^1.58.0",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
},
"scripts": {
"min.js": "make min.js",
"min.css": "make min.css",
"serve": "webpack"
},
"author": "",
"license": "ISC"
}
Makefile
const UglifyJs = require('uglifyjs-webpack-plugin')
const isWatching = process.argv[2] === '-w'
const plugins = [
function() {
this.plugin('watch-run', function(watching, callback) {
console.log('Begin compile at ' + new Date())
callback()
})
}
]
if (!isWatching) {
plugins.unshift(
new UglifyJs({
extractComments: false,
sourceMap: true,
})
)
}
module.exports = {
entry: {
'bundle': './js/bundle.js'
},
devtool: isWatching ? 'source-map' : false,
output: {
path: `${__dirname}/js`,
filename: '[name].min.js',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'raw-loader',
}
},
{
test: /\.s?css$/,
use: [
{
loader: "css-loader",
options: {
url: false, // do not bundle images
},
},
{loader: "sass-loader"},
],
}
]
},
plugins,
}
There is a makefile but I dont think this is required for this problem.
I have tried
webpack -p , webpack -w , and webpack .
webpack -p is giving an error : ERROR in bundle.min.js from UglifyJs Unexpected token: punc ({) [bundle.min.js:1,976]
while webpack -w works fine I am unable to find any url for the website.
the last command runs and ends.

Webpack won't compile when I use an image url in scss

I'm trying to get a very simple project going with Material Design and WebPack, but I'm getting compile errors. I've been following this guide to set everything up:
https://material.io/develop/web/getting-started
I'm honestly baffled by this error. I have obviously looked online for a solution, but everything I found was related to linter. I don't use a linter.
Here's the error:
ERROR in ./app.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (5:73)
3 | import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
4 | import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
> 5 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL("./images/bckgnd_light.jpg", import.meta.url);
| ^
6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
8 | // Module
My app.scss file only consists of:
#content {
background: url('./images/bckgnd_light.jpg') #e8e5d7;
}
My webpack.config.js:
const autoprefixer = require('autoprefixer');
module.exports = {
entry: ['./app.scss', './app.js'],
output: {
filename: 'bundle.js',
},
mode: 'development',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'bundle.css',
},
},
{loader: 'extract-loader'},
{loader: 'css-loader'},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
autoprefixer()
]
}
}
},
{
loader: 'sass-loader',
options: {
// Prefer Dart Sass
implementation: require('sass'),
// See https://github.com/webpack-contrib/sass-loader/issues/804
webpackImporter: false,
sassOptions: {
includePaths: ['./node_modules'],
},
},
}
],
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader'
},
],
},
};
package.json:
{
"name": "materialdesigntest",
"version": "1.0.0",
"description": "",
"main": "index.html",
"dependencies": {
"#material/button": "^14.0.0",
"#material/ripple": "^14.0.0",
"#material/textfield": "^14.0.0",
"material-components-web": "^14.0.0"
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/eslint-parser": "^7.18.2",
"#babel/preset-env": "^7.18.6",
"autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"postcss-loader": "^7.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"author": "",
"license": "ISC"
}
After some more digging I found this thread:
https://github.com/peerigon/extract-loader/issues/111
Changing the css-loader to this solved the issue for me:
{
loader: 'css-loader',
options: {
esModule: false
}
},

Cant find what causes the error when import component class

Im getting an error : unexpected token when importing a component-class while within another component class.
Im new to react, webpack and still learning javascript nodejs callbacks hooks, Im reading and search for best practices regardig nodejs and react on how to setup my dev-environment on Ubuntu.
A lot of trial and error to figure out whats going on behind the scene.
Im able to connect to my single page if I dont add as soon as I add import it raises an error.
// main.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';
ReactDOM.render( <App /> , document.getElementById('root'));
// App.jsx
import React from 'react';
import {SubmitButton} from './components/SubmitButton';
export default class App extends React.Component {
render(){
return(<div><h1>Hi, I am a header!</h1></div>);
}
}
// SubmitButton.jsx
import React , {Component} from 'react';
export class SubmitButton extends Component{
constructor() {
super();
}
render() {
return(<div>Swing</div>);
}
}
// $npm run start ... webpack.config.js :
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
}
// ERROR
ERROR in ./src/components/SubmitButton/SubmitButton.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /appdevops/graphCRMcli/src/components/SubmitButton/SubmitButton.jsx: Unexpected token (8:9)
6 | }
7 | render() {
> 8 | return(<div>
| ^
9 | <SubmitButton>Swing</SubmitButton>
10 | </div>
11 | );
at Parser.raise
///package.json file
{
"name": "MyClient",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server --display-error-details --config webpack.config.js --hot --mode development",
"build" : "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"cross-spawn": "^7.0.0",
"css-loader": "^3.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {}
}
// .babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// HtmlWebpackPlugin is used to inject our created bundles into this html file so // we need to create it.
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
});
module.exports = {
mode : 'development',
entry: {
app: ['./src/main.jsx'],
vendor: ['react', 'react-dom']
},
output: {
path: '/appdevops/graphCRMcli/dist',
libraryTarget: 'umd',
filename: '[name].js'
},
devServer: {
host : '0.0.0.0',
compress: true,
port: 3000
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
HtmlWebpackPluginConfig
],
};
I solved it by adjusting webpack.config.js and :
removing .babelrc
adding contents of .babelrc to webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react" ]
}
}
}
]
}

Entry module not found

ERROR in Error: Child compilation failed:
Entry module not found: Error: Can't resolve '/Users/MarkPierre/Desktop/es6-project-2019/src/index.html' in '/Users/MarkPierre/Desktop/es6-project-2019':
Error: Can't resolve '/Users/MarkPierre/Desktop/es6-project-2019/src/index.html' in '/Users/MarkPierre/Desktop/es6-project-2019'
When I run the command npm run start, I get the error message mentioned above.
I've checked the path and it's there. Any ideas?
Seems like the issue occurs with template: './starter/src/index.html'. I've removed the starter, but still the same issue. Very frustrating as this is the final part of the config :-(
babelrc file
{
"presets": [
["#babel/preset-env", {
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack: --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"#babel/polyfill": "^7.2.5"
}
}
webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['#babel/polyfill', './starter/src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js',
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
}
};

Ignoring node_modules for compiling server-side ES6 with Webpack locally

I am working with a Raspberry Pi Zero that is my server, running my module.
Raspberry's are not the best to compile code so I want to compile the server-side code locally. To do so I need to compile the code without resolving my imports. Why that ?
Because the Server module uses other modules that can only be installed on the Raspberry (such as UPM or MRAA for sensors).
For now I compile on the Pi but it's slow.
So I'm trying to compile to ES6 locally with my config:
const path = require("path");
const webpack = require("webpack");
const nodeExternals = require("webpack-node-externals");
module.exports = {
entry:
{
index: __dirname + "/src/index.js"
},
output: {
// sourceMapFilename: "[name].map",
path: path.resolve(__dirname, "build"),
filename: "[name].js",
sourceMapFilename: "[name].map",
chunkFilename: "[id].chunk.js"
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src")
],
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
presets: ["env"],
plugins: [
["transform-runtime"],
["transform-es2015-modules-commonjs-simple", { // Very important
"noMangle": true
}]
]
}
}
}
]
},
plugins: [
new webpack.ProvidePlugin({Hardlets: path.resolve(__dirname, "../Hardlets/build/index")}),
new webpack.IgnorePlugin(new RegExp("/(node_modules)/"))
// new webpack.optimize.UglifyJsPlugin(),
// new HtmlWebpackPlugin({template: "./src/index.html"})
],
target: "node",
externals: [nodeExternals()],
devtool: "source-map"
};
Which gives me an error because only the devDependencies are installed locally but not the other dependencies (sensors...):
ERROR in ./src/hardlets/relays/Relays.js Module not found: Error:
Can't resolve 'jsupm_relay' in
'/home/stinky/Projects/gardener/Sensors/src/hardlets/relays' #
./src/hardlets/relays/Relays.js 1:1008-1030 #
./src/HardletInstances.js # ./src/index.js
ERROR in ./src/hardlets/dht22/DHT22.js Module not found: Error: Can't
resolve 'rpi-dht-sensor' in
'/home/stinky/Projects/gardener/Sensors/src/hardlets/dht22' #
./src/hardlets/dht22/DHT22.js 1:925-950 # ./src/HardletInstances.js
# ./src/index.js
How can I prevent webpack from trying to resolve/import these dependencies ? The dependencies must be resolved at runtime.
There is my package.json:
{
"name": "gardener",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http://192.168.8.100:3000/pi/Gardener.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-runtime": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs-simple": "^6.7.4",
"webpack": "^3.8.1",
"webpack-node-externals": "^1.6.0"
},
"dependencies": {
"upm": "^1.0.0",
"rpio": "^0.9.19",
"rpi-dht-sensor": "^0.1.1"
}
}
The modules could not be excluded with nodeExternals() because it lists the modules in /node_modules/. However, the modules that are to be excluded are not installed locally so nodeExternals() does not do the job.
It needs to exclude them from by reading package.json.
This will read the modules from the package.json file & exclude them instead of the node_modules directory:
// webpack.config.js
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
externals: [nodeExternals({
modulesFromFile: true
})], // in order to ignore all modules in package.json when bundling
...
};

Resources