Related
Typescript test files work perfectly using ts-jest transform (Windows 11, jest 29.4.2, node 18.13.0) if I don't import files from my application.
But if I import a file from my application (ESM js file compiled from typescript source) it fails with the error: ReferenceError: exports is not defined on the import line:
import {Configuration} from "../server/ServerConfiguration.js";
describe("ServerConfiguration", () => {
test("Defaults", () => {
const sc = Configuration.getInstance(true).configuration;
expect(sc.verboseLevel).toBeDefined();
});
});
There is no exports anywhere in the compiled js files. Nothing changes removing extension from imported file.
The test script is: "test": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest --config config/jest.config.json --runInBand".
I tried to add exports definition to the test file this way:
let exports: unknown;
void exports;
But the test simply hangs without any error.
The jest.config.json contains:
{
"rootDir": "..",
"testEnvironment": "node",
"verbose": true,
"testMatch": ["**/tests/*.test.ts"],
"moduleFileExtensions": ["ts", "js"],
"extensionsToTreatAsEsm": [".ts"],
"transformIgnorePatterns": ["!../common/", "!../server/", "!./"],
"transform": {
"\\.ts$": ["ts-jest", {
"tsconfig": "tests/tsconfig.json",
"diagnostics": {"ignore": [1343]}
}]
}
}
Anyone had the same problem (and found a way to solve it)?
Thanks!
mario
More info: another test that runs perfectly without defining the NODE_OPTIONS environment variable, now fails with the same error on the import os from "node:os"; line. So I try to upgrade node to version 19 and see what happens.
Background:
I have a Webpack setup that I use to preprocess SCSS with PurgeCSS with a live HMR server with esbuild-loader for speeding up compiles in Webpack but even then my compile times are still slow and I would like the raw-speed of ESBuild and remove Webpack setup altogether.
The basic setup of ESBuild is easy, you install esbuild using npm and add the following code in your package.json:
{
...
"scripts": {
...
"watch": "esbuild --bundle src/script.js --outfile=dist/script.js --watch"
},
...
}
and run it by using the following command:
npm run watch
This single-line configuration will bundle your scripts and styles (you can import style.css in script.js) and output the files in the dist directory but this doesn't allow advance configuration for ESBuild like outputting a different name for your stylesheet and script files or using plugins.
Problems:
How to configure ESBuild using an external config file?
ESBuild doesn't support SCSS out-of-the-box. How to configure external plugins like esbuild-sass-plugin and to go even further, how to setup PostCSS and its plugins like Autoprefixer?
How to setup dev server with auto-rebuild?
How to setup PurgeCSS?
Solutions:
1. How to configure ESBuild using an external config file?
Create a new file in root: esbuild.js with the following contents:
import esbuild from "esbuild";
esbuild
.build({
entryPoints: ["src/styles/style.css", "src/scripts/script.js"],
outdir: "dist",
bundle: true,
plugins: [],
})
.then(() => console.log("⚡ Build complete! ⚡"))
.catch(() => process.exit(1));
Add the following code in your package.json:
{
...
"scripts": {
...
"build": "node esbuild.js"
},
...
}
Run the build by using npm run build command and this would bundle up your stylesheets and scripts and output them in dist directory.
For more details and/or adding custom build options, please refer to ESBuild's Build API documentation.
2. ESBuild doesn't support SCSS out-of-the-box. How to configure external plugins like esbuild-sass-plugin and to go even further, how to setup PostCSS and plugins like Autoprefixer?
Install npm dependencies: npm i -D esbuild-sass-plugin postcss autoprefixer
Edit your esbuild.js to the following code:
import esbuild from "esbuild";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
// Generate CSS/JS Builds
esbuild
.build({
entryPoints: ["src/styles/style.scss", "src/scripts/script.js"],
outdir: "dist",
bundle: true,
metafile: true,
plugins: [
sassPlugin({
async transform(source) {
const { css } = await postcss([autoprefixer]).process(source);
return css;
},
}),
],
})
.then(() => console.log("⚡ Build complete! ⚡"))
.catch(() => process.exit(1));
3. How to setup dev server with auto-rebuild?
ESBuild has a limitation on this end, you can either pass in watch: true or run its server. It doesn't allow both.
ESBuild also has another limitation, it doesn't have HMR support like Webpack does.
So to live with both limitations and still allowing a server, we can use Live Server. Install it using npm i -D #compodoc/live-server.
Create a new file in root: esbuild_watch.js with the following contents:
import liveServer from '#compodoc/live-server';
import esbuild from 'esbuild';
import { sassPlugin } from 'esbuild-sass-plugin';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
// Turn on LiveServer on http://localhost:7000
liveServer.start({
port: 7000,
host: 'localhost',
root: '',
open: true,
ignore: 'node_modules',
wait: 0,
});
// Generate CSS/JS Builds
esbuild
.build({
logLevel: 'debug',
metafile: true,
entryPoints: ['src/styles/style.scss', 'src/scripts/script.js'],
outdir: 'dist',
bundle: true,
watch: true,
plugins: [
sassPlugin({
async transform(source) {
const { css } = await postcss([autoprefixer]).process(
source
);
return css;
},
}),
],
})
.then(() => console.log('⚡ Styles & Scripts Compiled! ⚡ '))
.catch(() => process.exit(1));
Edit the scripts in your package.json:
{
...
"scripts": {
...
"build": "node esbuild.js",
"watch": "node esbuild_watch.js"
},
...
}
To run build use this command npm run build.
To run dev server with auto-rebuild run npm run watch. This is a "hacky" way to do things but does a fair-enough job.
4. How to setup PurgeCSS?
I found a great plugin for this: esbuild-plugin-purgecss by peteryuan but it wasn't allowing an option to be passed for the html/views paths that need to be parsed so I
created esbuild-plugin-purgecss-2 that does the job. To set it up, read below:
Install dependencies npm i -D esbuild-plugin-purgecss-2 glob-all.
Add the following code to your esbuild.js and esbuild_watch.js files:
// Import Dependencies
import glob from 'glob-all';
import purgecssPlugin2 from 'esbuild-plugin-purgecss-2';
esbuild
.build({
plugins: [
...
purgecssPlugin2({
content: glob.sync([
// Customize the following URLs to match your setup
'./*.html',
'./views/**/*.html'
]),
}),
],
})
...
Now running the npm run build or npm run watch will purgeCSS from the file paths mentioned in glob.sync([...] in the code above.
TL;DR:
Create an external config file in root esbuild.js and add the command to run it in package.json inside scripts: {..} e.g. "build": "node esbuild.js" to reference and run the config file by using npm run build.
ESBuild doesn't support HMR. Also, you can either watch or serve with ESBuild, not both. To overcome, use a separate dev server library like Live Server.
For the complete setup, please refer to my custom-esbuild-with-scss-purgecss-and-liveserver repository on github.
Final Notes:
I know this is a long thread but it took me a lot of time to figure these out. My intention is to have this here for others looking into the same problems and trying to figure out where to get started.
Thanks.
Adding to Arslan's terrific answer, you can use the PurgeCSS plug-in for postcss to totally eliminate Step 4.
First, install the postcss-purgecss package: npm install #fullhuman/postcss-purgecss
Then, replace the code from Step 2 in Arslan's answer with the code shown below (which eliminates the need for Step 4).
import esbuild from "esbuild";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from "postcss";
import autoprefixer from "autoprefixer";
import purgecss from "#fullhuman/postcss-purgecss";
// Generate CSS/JS Builds
esbuild
.build({
entryPoints: [
"roomflows/static/sass/project.scss",
"roomflows/static/js/project.js",
],
outdir: "dist",
bundle: true,
loader: {
".png": "dataurl",
".woff": "dataurl",
".woff2": "dataurl",
".eot": "dataurl",
".ttf": "dataurl",
".svg": "dataurl",
},
plugins: [
sassPlugin({
async transform(source) {
const { css } = await postcss([
purgecss({
content: ["roomflows/templates/**/*.html"],
}),
autoprefixer,
]).process(source, {
from: "roomflows/static/sass/project.scss",
});
return css;
},
}),
],
minify: true,
metafile: true,
sourcemap: true,
})
.then(() => console.log("⚡ Build complete! ⚡"))
.catch(() => process.exit(1));
I am new in using Eslint.
So far I have installed Eslint in my local project and configured it. The eslintrc.js file contains
module.exports = {
env: {
node: true,
commonjs: true,
es6: true,
mocha: true,
},
extends: [
'airbnb-base',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
},
rules: {
},
};
And in package.json I have
"scripts": {
"lint": "eslint .eslintrc.js --fix",
}
In terminal I run
npm run lint
And the output is
> apigateway#1.0.0 lint C:\nodeprojects\restapi
> eslint .eslintrc.js --fix
C:\nodeprojects\restapi\.eslintrc.js
0:0 warning File ignored by default. Use a negated ignore pattern (like "--ignore-pattern '!<relative/path/to/filename>'") to override
But if I run
eslint <foldername> --fix then it works.
I am using webstorm IDE and in windows os.
Any help is highly appreciated.
ESlint default behaviour is ignoring file/folders starting with . - https://github.com/eslint/eslint/issues/10341.
In case for example you want to lint .storybook folder, ESLint will ignore it by default. To lint it, .eslintrc.js must include:
{
...
// Lint ".storybook" folder (don't ignore it)
"ignorePatterns": ["!.storybook"],
...
}
Because of that default ESLint behaviour, I do in all my projects like this (lint whole project from the root) :
{
...
// ESlint default behaviour ignores file/folders starting with "." - https://github.com/eslint/eslint/issues/10341
"ignorePatterns": ["!.*", "dist", "node_modules"],
...
}
Where I first don't ignore any file/folder starting with . and then I exclude folders that I actually want to ignore.
Your npm script runs the linter on the .eslintrc.js file and this file is as the comment says File ignored by default.
You need to change the lint script from:
"lint": "eslint .eslintrc.js --fix",
to:
"lint": "eslint <foldername> --fix"
Where <foldername> is the correct folder.
I ran into this issue where the pre-commit Husky hook would try to scan this file when trying to commit merges (where someone changed .eslintrc.js previously), then this would fail the merge commit in team members' local envs (file ignored by default)
You can create a .eslintignore file next to .eslintrc.js. Then in .eslintignore put:
!.eslintrc.js
I'm using TS 1.7 and I'm trying to compile my project to one big file that I will be able to include in my html file.
My project structure looks like this:
-build // Build directory
-src // source root
--main.ts // my "Main" file that uses the imports my outer files
--subDirectories with more ts files.
-package.json
-tsconfig.json
my tsconfig file is:
{
"compilerOptions": {
"module":"amd",
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outDir": "./build",
"outFile":"./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
When I build my project I expect the build.js file to be one big file compiled from my source.
But ths build.js file is empty and I get all of my files compiled o js files.
Each of my TS files look a bit like this
import {blabla} from "../../bla/blas";
export default class bar implements someThing {
private variable : string;
}
What am I doing wrong ?
Option 1 - if you are not using modules
If your code contains only regular Typescript, without modules (import/export) you just need to add parameter outfile to your tsconfig.json.
// tsconfig.json
{
"compilerOptions": {
"lib": ["es5", "es6", "dom"],
"rootDir": "./src/",
"outFile": "./build/build.js"
}
}
But this option have some limitations.
If you get this error:
Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'
Try "Option 2" below.
Option 2 - using a module loader
If you are using modules (import/export), you will need a module loader to run your compiled script in the browser.
When you compile to a single file (using outFile), Typescript natively supports compiling to amd and system module loaders.
In tsconfig, you need to set module to amd or system:
// tsconfig.json
{
"compilerOptions": {
"module": "AMD",
"lib": ["es5", "es6", "dom"],
"rootDir": "./src/",
"outFile": "./build/build.js"
}
}
If you choose AMD, you need to use the require.js runtime. AMD requires an AMD loader, require.js is the most popular option (https://requirejs.org/).
If you choose System, you need to use the SystemJS module loader (https://github.com/systemjs/systemjs).
Option 3 - use a module bundler / build tool
Probably, the best option is to use a module bundler / build tool, like Webpack.
Webpack will compile all your TypeScript files to a single JavaScript bundle.
So, you will use webpack to compile, instead of tsc.
First install webpack, webpack-cli and ts-loader:
npm install --save-dev webpack webpack-cli typescript ts-loader
If you are using webpack with Typescript, it's best to use module with commonjs:
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"lib": ["es5", "es6", "dom"],
"rootDir": "src"
}
}
Webpack webpack.config.js example:
//webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/YourEntryFile.ts",
},
output: {
path: path.resolve(__dirname, './build'),
filename: "[name]-bundle.js" // <--- Will be compiled to this single file
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
}
};
Now, to compile, instead of executing using tsc command, use webpack command.
package.json example:
{
"name": "yourProject",
"version": "0.1.0",
"private": true,
"description": "",
"scripts": {
"build": "webpack" // <---- compile ts to a single file
},
"devDependencies": {
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
Webpack's TypeScript Documentation
Lastly, compile everything (under watch mode preferably) with:
npx webpack -w
This will be implemented in TypeScript 1.8. With that version the outFile option works when module is amd or system.
At this time the feature is available in the development version of Typescript.
To install that run:
$ npm install -g typescript#next
For previous versions even if it's not obvious the module and the outFile options can not work together.
You can check this issue for more details.
If you want to output a single file with versions lower than 1.8 you can not use the module option in tsconfig.json. Instead you have to make namespaces using the module keyword.
Your tsconfig.json file should look like this:
{
"compilerOptions": {
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outFile": "./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
Also your TS files should look like this:
module SomeModule {
export class RaceTrack {
constructor(private host: Element) {
host.appendChild(document.createElement("canvas"));
}
}
}
And instead of using the import statement you'll have to refer to the imports by namespace.
window.addEventListener("load", (ev: Event) => {
var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});
The Easiest Way
You can do this with a custom tool called ncc, built and maintained by Vercel. Here's how they're using it in create-next-app:
ncc build ./index.ts -w -o dist/
Install it with yarn:
yarn add #vercel/ncc
Or npm:
npm install #vercel/ncc
I found this question when I needed to do something similar to bundle my Lambdas. The thing is, I only wanted to bundle my modules into single files with their imports included from my own code, not the node_modules.
I ended up using esbuild to solve my problem:
esbuild ./src/lambda/** --outdir=./dist/lambda --bundle --platform=node --target=node18 --packages=external
I'm attempting to use the ESLint linter with the Jest testing framework.
Jest tests run with some globals like jest, which I'll need to tell the linter about; but the tricky thing is the directory structure, with Jest the tests are embedded with the source code in __tests__ folders, so the directory structure looks something like:
src
foo
foo.js
__tests__
fooTest.js
bar
bar.js
__tests__
barTest.js
Normally, I'd have all my tests under a single dir, and I could just add an .eslintrc file there to add the globals... but I certainly don't want to add a .eslintrc file to every single __test__ dir.
For now, I've just added the test globals to the global .eslintrc file, but since that means I could now reference jest in non-testing code, that doesn't seem like the "right" solution.
Is there a way to get eslint to apply rules based on some pattern based on the directory name, or something like that?
The docs show you are now able to add:
"env": {
"jest/globals": true
}
To your .eslintrc which will add all the jest related things to your environment, eliminating the linter errors/warnings.
You may need to include plugins: ["jest"] to your esconfig, and add the eslint-plugin-jest plugin if it still isn't working.
ESLint supports this as of version >= 4:
/*
.eslintrc.js
*/
const ERROR = 2;
const WARN = 1;
module.exports = {
extends: "eslint:recommended",
env: {
es6: true
},
overrides: [
{
files: [
"**/*.test.js"
],
env: {
jest: true // now **/*.test.js files' env has both es6 *and* jest
},
// Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
// "extends": ["plugin:jest/recommended"]
plugins: ["jest"],
rules: {
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error"
}
}
],
};
Here is a workaround (from another answer on here, vote it up!) for the "extend in overrides" limitation of eslint config :
overrides: [
Object.assign(
{
files: [ '**/*.test.js' ],
env: { jest: true },
plugins: [ 'jest' ],
},
require('eslint-plugin-jest').configs.recommended
)
]
From https://github.com/eslint/eslint/issues/8813#issuecomment-320448724
You can also set the test env in your test file as follows:
/* eslint-env jest */
describe(() => {
/* ... */
})
To complete Zachary's answer, here is a workaround for the "extend in overrides" limitation of eslint config :
overrides: [
Object.assign(
{
files: [ '**/*.test.js' ],
env: { jest: true },
plugins: [ 'jest' ],
},
require('eslint-plugin-jest').configs.recommended
)
]
From https://github.com/eslint/eslint/issues/8813#issuecomment-320448724
As of 2021, I think the correct way or at least the one that works is to install #types/jest and eslint-plugin-jest:
npm i -D eslint-plugin-jest #types/jest
And adding the Jest plugin into .eslintrc.js with the overrides instruction mentioned by #Loren:
module.exports = {
...
plugins: ["jest"],
...
overrides: [
{
files: ["**/*.test.js"],
env: { "jest/globals": true },
plugins: ["jest"],
extends: ["plugin:jest/recommended"],
},
],
...
};
This way you get linting errors in your source files as well as in test files, but in test files you don't get linting errors for test and other Jest's functions, but you will get them in your source files as they will appear as undefined there.
I solved the problem REF
Run
# For Yarn
yarn add eslint-plugin-jest -D
# For NPM
npm i eslint-plugin-jest -D
And then add in your .eslintrc file
{
"extends": ["airbnb","plugin:jest/recommended"],
}
some of the answers assume you have eslint-plugin-jest installed, however without needing to do that, you can simply do this in your .eslintrc file, add:
"globals": {
"jest": true,
}
First install eslint-plugin-jest
Running:
yarn add eslint-plugin-jest or npm install eslint-plugin-jest
Then edit .eslintrc.json
{
"env":{
"jest": true
}
}
As of ESLint V 6 (released in late 2019), you can use extends in the glob based config as follows:
"overrides": [
{
"files": ["*.test.js"],
"env": {
"jest": true
},
"plugins": ["jest"],
"extends": ["plugin:jest/recommended"]
}
]
Add environment only for __tests__ folder
You could add a .eslintrc.yml file in your __tests__ folders, that extends you basic configuration:
extends: <relative_path to .eslintrc>
env:
jest: true
If you have only one __tests__folder, this solution is the best since it scope jest environment only where it is needed.
Dealing with many test folders
If you have more test folders (OPs case), I'd still suggest to add those files. And if you have tons of those folders can add them with a simple zsh script:
#!/usr/bin/env zsh
for folder in **/__tests__/ ;do
count=$(($(tr -cd '/' <<< $folder | wc -c)))
echo $folder : $count
cat <<EOF > $folder.eslintrc.yml
extends: $(printf '../%.0s' {1..$count}).eslintrc
env:
jest: true
EOF
done
This script will look for __tests__ folders and add a .eslintrc.yml file with to configuration shown above. This script has to be launched within the folder containing your parent .eslintrc.
Pattern based configs are scheduled for 2.0.0 release of ESLint. For now, however, you will have to create two separate tasks (as mentioned in the comments). One for tests and one for the rest of the code and run both of them, while providing different .eslintrc files.
P.S. There's a jest environment coming in the next release of ESLint, it will register all of the necessary globals.
I got it running after spending some time trying out different options. Hope this helps anyone else getting stuck.
.eslintrc.json (in root project folder):
{
"env": {
"browser": true,
"es2021": true,
"jest/globals": true
},
"extends": [
"standard",
"plugin:jest/all"
],
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"jest/no-hooks": [
"error",
{
"allow": [
"afterEach",
"beforeEach"
]
}
]
},
"plugins": [
"jest"
]
}
Empty .babelrc (in root project folder):
{}
.package.json (in root project folder):
{
"scripts": {
"test": "jest",
"lint": "npx eslint --format=table .",
"lintfix": "npx eslint --fix ."
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"aws-sdk-mock": "^5.2.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jest": "^24.4.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"jest": "^27.0.6"
}
}
VS Code settings.xml (editor configuration: enables auto fix on save + babel parser):
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.options": {
"parser": "#babel/eslint-parser"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
]
In your .eslintignore file add the following value:
**/__tests__/
This should ignore all instances of the __tests__ directory and their children.