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
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.
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?
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
}
},
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).