Unexpected babel build output - node.js

I get the following output when I transpile a javascript file with Babel 7.
I don't understand the presence of the cov_5hsavp2s2() function. It seems to be some metadata.
Is there a way (a flag or config) to prevent it from being generated as it has nothing to do with the functionality of the module.
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _useMuiTheme = _interopRequireDefault(require("./useRepl"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function cov_5hsavp2s2() {
var path = "/home/me/use-repl/src/index.js";
var hash = "8995b4e9d98ed443cd65fa7d3cf9e2594de820db";
var global = new Function("return this")();
var gcv = "__coverage__";
var coverageData = {
path: "/home/me/use-repl/src/index.js",
statementMap: {},
fnMap: {},
branchMap: {},
s: {},
f: {},
b: {},
_coverageSchema: "1a1c01bbd47fc00a2c39e90264f33305004495a9",
hash: "8995b4e9d98ed443cd65fa7d3cf9e2594de820db"
};
var coverage = global[gcv] || (global[gcv] = {});
if (!coverage[path] || coverage[path].hash !== hash) {
coverage[path] = coverageData;
}
var actualCoverage = coverage[path];
{
// #ts-ignore
cov_5hsavp2s2 = function () {
return actualCoverage;
};
}
return actualCoverage;
}
cov_5hsavp2s2();
var _default = _useMuiRepl.default;
exports.default = _default;
Package.json
{
"name": "#devskope/use-repl",
"version": "1.0.0",
"main": "./lib/index.js",
"files": [
"/lib"
],
"scripts": {
"build": "babel --delete-dir-on-start --copy-files src --out-dir lib ",
"test": "nyc mocha"
},
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
],
"plugins": [
"istanbul"
]
},
"nyc": {
"require": [
"#babel/register"
]
},
"engines": {
"node": ">=.10.0.0"
},
"author": "devskope",
"repository": {
"type": "git",
"url": "git+https://github.com/devskope/use-mui-theme.git"
},
"bugs": {
"url": "https://github.com/devskope/use-mui-theme/issues"
},
"homepage": "https://github.com/devskope/use-mui-theme#readme",
"license": "MIT",
"keywords": [
"hook",
"hooks",
"material-ui",
"material ui",
"mui",
"react",
"theme"
],
"peerDependencies": {
"#material-ui/core": "^4.4.0",
"react": "^16.8.0",
"react-dom": "^16.8.0"
},
"devDependencies": {
"#babel/cli": "^7.10.1",
"#babel/core": "^7.10.1",
"#babel/preset-env": "^7.10.1",
"#babel/preset-react": "^7.10.1",
"#babel/register": "^7.10.1",
"babel-plugin-istanbul": "^6.0.0",
"chai": "^4.2.0",
"dotenv": "^8.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jsdom": "^16.2.2",
"mocha": "^7.2.0",
"nodemon": "^2.0.4",
"nyc": "^15.0.1",
"prop-types": "^15.7.2"
},
"dependencies": {
"#material-ui/core": "^4.4.0"
}
}

Solved by adding an env stanza to the babel config to restrict Istanbul to the test environment.
{ //...rest of package.json
"babel": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-react"
],
"env": {
"test": {
"plugins": [
"istanbul"
]
}
}
},
}

Related

NodeJS ExpressJS EJS Tailwind not working

I am working on a website and I am trying use tailwind with EJS as the viewer and it's not loading the CSS (It's what I am assuming) I have watched several Youtube videos and non of them have worked.
Tailwind Config file
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Server.js File
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./views/*.{html,js,css} ",
"./views/index.ejs",
],
theme: {
extend: {},
},
plugins: [ {
tailwindcss: {},
autoprefixer: {},
}
]
}
Package.json file
{
"name": "person-website",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "nodemon server.js",
"build-tail": "SET NODE_ENV=production tailwindcss build -i /styles/tailwindcss.css -o /assets/styles.css"
},
"author": "Thomas Murray",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"nodemon": "^2.0.20",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.4"
}
}
My file structure
It just keeps loading the HTML/EJS file and the CSS

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.

How to fix cookie NotYetImplemented issue with domino and Angular universal ssr?

import 'zone.js/dist/zone-node';
import 'localstorage-polyfill';
global['localStorage'] = localStorage
import {APP_BASE_HREF} from '#angular/common';
import {ngExpressEngine} from '#nguniversal/express-engine';
import * as express from 'express';
import {existsSync, readFileSync} from 'fs';
import {join} from 'path';
import * as cookieparser from 'cookie-parser';
import { REQUEST, RESPONSE } from '#nguniversal/express-engine/tokens';
// ssr DOM
const domino = require('domino');
const fs = require('fs');
const path = require('path');
// Use the browser index.html as template for the mock window
const template = fs.readFileSync(path.join(process.cwd(), '.', 'dist/functions/browser', 'index.html')).toString();
console.log(template)
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['self'] = win;
global['IDBIndex'] = win.IDBIndex;
global['navigator'] = win.navigator;
import {AppServerModule} from './src/main.server';
import { environment } from 'src/environments/environment';
import { globalAgent } from 'http';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const websiteFileLocation = environment.production ? "browser" : "dist/functions/browser"
const distFolder = join(process.cwd(), websiteFileLocation);
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
server.use(cookieparser());
// Our Universal express-engine (found # https://github.com/angular/universal/tree/main/modules/express-engine)
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
// All regular routes use the Universal engine
server.get('*', (req, res) => {
res.render(indexHtml, { req, res, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }, {provide: REQUEST, useValue: req},
{provide: RESPONSE, useValue: res}] });
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
run();
export * from './src/main.server';
that is my server.ts
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { ServerCookiesModule } from 'ngx-universal-cookies/server';
import { BrowserModule } from '#angular/platform-browser';
import { CookieBackendModule } from 'ngx-cookie-backend';
#NgModule({
imports: [
AppModule,
ServerModule,
CookieBackendModule.withOptions()
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
this is app.server.module.ts
I try to run npm run dev:ssr and it fails to start and get the error
C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92809
throw new Error("NotYetImplemented");
^
Error: NotYetImplemented
at Document.exports.nyi (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:92809:9)
at CookiesStorage.getAllItems (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127014:46)
at new CookiesStorage (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:126929:10)
at Module.89257 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:127102:24)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.28011 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:799:21)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.34440 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:631:12)
at __webpack_require__ (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:365916:42)
at Object.90158 (C:\Users\Fujitsu\terabulk\terabulk-front-ssr\dist\functions\server\main.js:94:39)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:58554
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"cli": {
"analytics": "8be174a3-843d-4fe9-8af7-242a16b597a4"
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"paddybaba2": {
"projectType": "application",
"schematics": {
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "terabulk",
"i18n": {
"sourceLocale": {
"code": "en"
},
"locales": {
"zh": "translate/messages5.cn.xlf",
"ru": "translate/messages.ru.xlf",
"de": "translate/messages.de.xlf",
"ga": "translate/messages.ga.xlf",
"es": "translate/messages.es.xlf"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/functions/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/animate.css/animate.min.css",
"src/styles.scss",
"./node_modules/ngx-lightbox/lightbox.css",
"node_modules/#videogular/ngx-videogular/fonts/videogular.css",
"src/style-variables.scss"
],
"scripts": [],
"localize": false
},
"configurations": {
"en": {
"localize": [
"en"
]
},
"cn": {
"localize": [
"zh"
]
},
"ru": {
"localize": [
"ru"
]
},
"de": {
"localize": [
"de"
]
},
"ga": {
"localize": [
"ga"
]
},
"es": {
"localize": [
"es"
]
},
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "5000kb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "16kb",
"maximumError": "400kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"en": {
"browserTarget": "paddybaba2:build:en"
},
"cn": {
"browserTarget": "paddybaba2:build:cn"
},
"ru": {
"browserTarget": "paddybaba2:build:ru"
},
"de": {
"browserTarget": "paddybaba2:build:de"
},
"es": {
"browserTarget": "paddybaba2:build:es"
},
"ga": {
"browserTarget": "paddybaba2:build:ga"
},
"production": {
"browserTarget": "paddybaba2:build:production"
},
"development": {
"browserTarget": "paddybaba2:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "paddybaba2:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"deploy": {
"builder": "#angular/fire:deploy",
"options": {
"prerender": false,
"ssr": false,
"browserTarget": "paddybaba2:build:production",
"firebaseProject": "terabulk2",
"firebaseHostingSite": "terabulk2"
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/functions/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"en": {},
"cn": {},
"ru": {},
"de": {},
"ga": {},
"es": {},
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"development": {
"optimization": false,
"sourceMap": true,
"extractLicenses": false
}
},
"defaultConfiguration": "production"
},
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"configurations": {
"development": {
"browserTarget": "paddybaba2:build:development",
"serverTarget": "paddybaba2:server:development"
},
"production": {
"browserTarget": "paddybaba2:build:production",
"serverTarget": "paddybaba2:server:production"
}
},
"defaultConfiguration": "development"
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"routes": [
"/"
]
},
"configurations": {
"production": {
"browserTarget": "paddybaba2:build:production",
"serverTarget": "paddybaba2:server:production"
},
"development": {
"browserTarget": "paddybaba2:build:development",
"serverTarget": "paddybaba2:server:development"
}
},
"defaultConfiguration": "production"
}
}
}
},
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
}
}
package.json
{
"name": "paddybaba2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"build-all": "ng build --configuration en --deleteOutputPath=false && ng build --configuration cn --deleteOutputPath=false && ng build --configuration ru --deleteOutputPath=false && echo internationalization build all languages finished. && ws",
"deploy": "ng build --localize=true && firebase deploy",
"push": "git add . && git commit -m %npm_config_msg% && git push -u origin main",
"deploy-blog": "ng build --localize=true && cd .. && cd terabulk-blog && ng build --output-path C:\\Users\\Fujitsu\\terabulk\\terabulk-front\\public\\blog --base-href /blog/ && cd .. && cd terabulk-front && firebase deploy",
"dev:ssr": "ng run paddybaba2:serve-ssr",
"serve:ssr": "node dist/paddybaba2/server/main.js",
"build:ssr": "ng build && ng run paddybaba2:server",
"prerender": "ng run paddybaba2:prerender"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.1.3",
"#angular/cdk": "^14.1.2",
"#angular/common": "^14.1.3",
"#angular/compiler": "^14.1.3",
"#angular/core": "^14.1.3",
"#angular/fire": "^7.4.1",
"#angular/forms": "^14.1.3",
"#angular/platform-browser": "^14.1.3",
"#angular/platform-browser-dynamic": "^14.1.3",
"#angular/platform-server": "^14.1.3",
"#angular/router": "^14.1.3",
"#bugsplat/ngx-animated-counter": "^2.0.0",
"#ng-select/ng-select": "^9.0.2",
"#nguniversal/express-engine": "^14.1.0",
"#nguniversal/module-map-ngfactory-loader": "^8.2.6",
"#stomp/stompjs": "^6.1.2",
"#syncfusion/ej2-notifications": "^20.1.47",
"#types/socket.io": "^3.0.2",
"#videogular/ngx-videogular": "^6.0.0",
"angular-cc-library": "^3.0.1",
"angular-file-saver": "^1.1.3",
"angular-progress-bar": "^1.0.11",
"angular-responsive-carousel": "^2.1.2",
"angular-shorturl": "^0.1.7",
"angular2-toaster": "^11.0.1",
"animate.css": "^4.1.1",
"canvas": "^2.9.3",
"cookie-parser": "^1.4.6",
"domino": "^2.1.6",
"express": "^4.15.2",
"fabric": "^5.2.1",
"file-saver": "^2.0.5",
"jsdom-canvas-2": "^11.6.3-alpha.0",
"localstorage-polyfill": "^1.0.1",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"lodash.set": "^4.3.2",
"net": "^1.0.2",
"ng-animate": "^1.0.0",
"ng-pattern-restrict": "^0.2.3",
"ng-popups": "^9.0.0",
"ng-tiny-url": "^1.0.2",
"ngx-clipboard": "^15.1.0",
"ngx-cookie": "^6.0.1",
"ngx-cookie-backend": "^6.0.1",
"ngx-editor": "^11.1.0",
"ngx-filesaver": "^13.0.0",
"ngx-lightbox": "^2.4.1",
"ngx-spinner": "^12.0.0",
"ngx-store": "^3.0.1",
"ngx-universal-cookies": "^8.0.1",
"rxjs": "~6.6.0",
"rxjs-compat": "^6.6.7",
"sockjs-client": "^1.5.2",
"stompjs": "^2.3.3",
"three.js": "^0.77.0",
"ts-debug": "^1.3.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.1.3",
"#angular/cli": "^14.1.3",
"#angular/compiler-cli": "^14.1.3",
"#angular/localize": "^14.1.3",
"#nguniversal/builders": "^14.1.0",
"#types/cookie-parser": "^1.4.3",
"#types/core-js": "^2.5.5",
"#types/express": "^4.17.0",
"#types/jasmine": "~3.8.0",
"#types/node": "^12.11.1",
"#types/sockjs-client": "^1.5.1",
"#types/stompjs": "^2.3.5",
"jasmine-core": "~3.8.0",
"jsdom": "20.0.0",
"jsdom-global": "3.0.2",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.6.4"
}
}
it is a large project can't fit everything in here but i can add your requested code if needs be. I believe the problem lies with domino not being able to work with cookies. I need to do this so i can deploy to firebase with ssr.
As you can see I am using ngx-store, this provides decorators that can automatically store variables to localStorage. I don't think it has universal support. Do you know of anyway to polyfill or shim it?

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
}
},

Babel compiles with Webpack but not with Jest

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).

Resources