Develop Reference

Jest (typescript): SyntaxError: Unexpected token 'export' (lowdb)

As the title suggests, I am having trouble with jest not allowing an export from the lowdb package within my tests. It seems to only throw this error for this single package -- the rest of my code is also using ES6 exports and my package.json file has the key type: module.
What have I tried
Adding type module -- Jest: SyntaxError: Unexpected token 'export'
Adding transformIgnorePatterns: ["<rootDir>/node_modules/(?!lowdb)"] -- Jest setup "SyntaxError: Unexpected token export"
Add a transform for js which uses babel-jest -- Jest encountered an unexpected token - SyntaxError: Unexpected token 'export'
Update my tsconfig to output commonJS modules
Update my tsconfig to allowJs:true and update my jest transforms to parse JS with ts-jest
I'm not sure where I am going wrong and am sorry in advance if I am being dim.
This is my TS Config
{
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"esModuleInterop": true,
"allowJs": true,
"target": "ES6",
"moduleResolution": "node",
"resolveJsonModule": true,
"module": "ES6",
"baseUrl": "src",
"declaration": true,
"allowSyntheticDefaultImports": true,
"paths": {
"#services/*": ["services/*"],
"#constants/*": ["constants/*"],
"#typeDefs/*": ["typeDefs/*"],
"#config/*": ["config/*"],
"#utils/*": ["utils/*"],
"#assets/*": ["assets/*"]
}
},
"include": ["src/**/*.ts"],
"exclude": ["rollup.config.ts", "jest.config.ts"]
}
And this is my jest.config.ts file:
import type { Config } from "#jest/types";
import { pathsToModuleNameMapper } from "ts-jest";
import { compilerOptions } from "./tsconfig.json";
// Sync object
const config: Config.InitialOptions = {
verbose: true,
roots: ["<rootDir>"],
preset: "ts-jest",
testEnvironment: "node",
transform: {
"^.+\\.ts$": "ts-jest",
"^.+\\.js$": "babel-jest",
},
testRegex: ["^.+\\.test\\.ts$"],
moduleDirectories: ["src", "node_modules"],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
};
export default config;
Finally, I am invoking jest as follows:
"test:ts": "jest --config=jest.config.ts",
Thank you in advance.
EDIT: Some additional context
I am pretty sure it should not affect this issue but I figure it could help to provide more context. I am running jest with two different configs -- one for JS and one for TS and the repo to which it relates has some build scripts written in JS that will only ever be run in nodeJS.
The JS config is as follows (has no issues):
// Sync object
/** #type {import('#jest/types').Config.InitialOptions} */
const config = {
verbose: true,
testEnvironment: "jest-environment-node",
transformIgnorePatterns: ["/node_modules/"],
transform: {},
testRegex: ["^.+\\.test\\.js$"],
};
export default config;
And it is invoked as follows:
"test:js": "yarn node --experimental-vm-modules $(yarn bin jest) --config=jest.config.js",

I too ran into similar issue. Here is how I fixed by tweaking jest.config.js:
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
transformIgnorePatterns: ["/node_modules/(?!lowdb|steno)"],
transform: {
"^.+\\.(js)?$": require.resolve("babel-jest"),
},
};
We want the babel-jest to parse the js files, and the lowDB and one of its dependency -steno.
Next, we need to ensure the babel.config.js to contain the following (we need to configure babel with #babel/plugin-transform-modules-commonjs plugin to correctly parse import/exports and should use importInterop:'node'.
module.exports = {
env: {
test: {
presets: [
[
"#babel/preset-env",
{
targets: {
node: "current",
},
modules: "commonjs",
},
],
],
plugins: [
[
"#babel/plugin-transform-modules-commonjs",
{
importInterop: "node",
},
],
],
},
},
};
Ensure you have installed all necessary dev dependencies:
npm i -D babel-jest #babel/core
npm i -D #babel/preset-env
npm i -D #babel/plugin-transform-modules-commonjs

How to import a self-made module in create-react-app?

I'm using create-react-app in my ReactJS app with TypeScript, and I would like to import a TypeScript/JavaScript module that I created in another project.
The module consists of a file mymodule.js, in which the code looks approximately like this:
var mymodule;
(function (mymodule) {
var MyClass = /** #class */ (function () {
function MyClass() {
}
MyClass.myMethod = function () {
// code
};
return MyClass;
}());
mymodule.MyClass = MyClass;
})(mymodule || (mymodule = {}));
Then there is the type definition file mymodule.d.ts, which looks like this:
declare module mymodule {
class MyClass {
private static myMethod;
}
}
In my create-react-app project, I placed these two files in the folder /src/vendor, and I want to use the module like this:
import { MyClass } from '../vendor/mymodule';
...
However, Visual Studio Code (i.e. the TypeScript compiler) says
File '.../vendor/mymodule.d.ts' is not a module. ts(2306)
When I run the project, the variables from the module (e.g. the class MyClass) are undefined.
This might be the reason for the error: The library is generated using module: "AMD", but create-react-app seems to enforce module: "esnext".
Edit: Here's the tsconfig.json of the create-react-app project:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true
},
"include": [
"src"
]
}

You can't import the file due to the fact that you are not exporting the module. In order for module loading to work, you should have an export at the bottom of your myModule class file.
export {
mymodule
}

How do I configure absolute paths for imports in TypeScript based React Native apps?

In order to avoid '../../../../' style relative imports in a TypeScript based React Native app, I would like to configure the app so that I can use absolute imports instead.
It is important that the configuration also supports Jest unit tests.
I created the app using npx react-native init MyTestApp --template typescript
React Native version: 0.60.5
What is the exact configuration I would need to achieve this?

Requirement
// Meh
import config from '../../../../../../../config';
// Awesome!
import config from '#cuteapp/config';
How To
Add this babel plugin package
yarn add --dev babel-plugin-module-resolver
My babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
cwd: 'babelrc',
extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
alias: {
'#cuteapp': './app'
}
}
],
'jest-hoist'
]
};
My tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es2015", "es2015.promise", "es2016.array.include", "dom"],
"strict": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"#cuteapp/*": ["app/*/index", "app/*"]
},
"noEmit": true,
"resolveJsonModule": true,
"target": "esnext",
"types": ["jest"]
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js"]
}
Restart the IDE.
That's it.

Summary:
The npm package babel-plugin-module-resolver is needed, as well as some configuration in tsconfig.json and babel.config.js
Step by step:
Install babel-plugin-module-resolver using npm or yarn.
npm i babel-plugin-module-resolver --save-dev
# Or (If you're using yarn):
yarn add --dev babel-plugin-module-resolver
tsconfig.json: Add "baseUrl": "." to compilerOptions
babel.config.js: Add a key named plugins with the following value:
[
[
'module-resolver',
{
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
'.android.js',
'.android.tsx',
'.ios.js',
'.ios.tsx'
],
root: ['.']
}
]
]
Complete configuration:
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": "."
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
babel.config.js:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
extensions: [
'.js',
'.jsx',
'.ts',
'.tsx',
'.android.js',
'.android.tsx',
'.ios.js',
'.ios.tsx'
],
root: ['.']
}
]
]
};
This is for a clean new project created using npx react-native init MyTestApp --template typescript on React Native version 0.60.5

If you do not want to use the babel plugin
create a new package.json file inside the src folder with the following. (change myapp to whatever you want to, it can even be src.)
{
"name": "myapp"
}
update your tsconfig.json file
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"myapp/*": ["src/*"]
}
...
}
}
In your.tsx file
import { MyThing } from 'myapp/MyThing';

For anyone who uses TypeScript and just wants to use import with absolute paths without aliases.
Assuming all of your code folders are inside of src.
Insert "baseUrl": "src" in compilerOptions object inside tsconfig.json.
Now you can use absolute paths in imports.

2022 Update
1.Create a package.json in your src folder.And add {"name":"src"} in it.
2.Update your tsconfig.json file like this,
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
}
...
}
}
3.Restart your ide.
Now you can import like this,
import MyComponent from 'src/components/MyComponent';

All of the other answers didn't work for me with a freshly created React Native + Typescript project.
What worked for me was setting both baseUrl and paths in tsconfig.json:
{
"baseUrl": ".",
"paths": {
"NAME_IN_PACKAGE_JSON/*": ["./*"]
}
}
Replace NAME_IN_PACKAGE_JSON with your package.json's name field.
E.g. if the name field is myapp you can do:
import HomeScreen from "myapp/screens/HomeScreen";

All you have to do if you have a "src" file on your project root is to add a package.json file in it and write { "name": "src" } in it. Then every import named "src/..." resolves beautifully.
I found this solution in this video.

You can solve it using 5 simple steps withou eject:
Step 1: Adding react-app-rewired into your devDependencies.
yarn add -D react-app-rewired or npm intall react-app-rewired --save-dev
Step 2: After installation, you'll be able to change package.json default ReactsJS scripts to:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
Step 3: Creates a new file called tsconfig.paths.json on root path, with content like:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": ["./src/shared/services/*"],
"interfaces/*": ["./src/shared/interfaces/*"]
}
}
}
Tip 1: you can choose which path you want to use, like:
#services, #interface, #src, ~, #, etc just by changing the keys inside "paths": {}
The same is applied to it's value: ["src/shared/services/"], ["src/shared/interfaces/"], ["src/*"], use the relative path here.
Step 4: Into tsconfig.json, before "compilerOptions" you need to extends the tsconfig.paths.json you just created.
Like this:
{
"extends": "./tsconfig.paths.json",
...//rest of file infos compilerOptions, include... whatever
}
Step 5: Creates a new file config-overrides.js, adding your alias and relative paths on it:
const path = require('path');
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
...config.alias,
'services': path.resolve(__dirname, 'src/shared/services'),
'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
},
};
return config;
};
Tip 2: If you're using eslint, remember to have an .eslintignore file and add config-overrides.js within it.
Restart your IDE or text editor, in my case VSCode.
It's DONE!. Now just run yarn start or npm run start

"Please add a #NgModule annotation" Error on Angular2

I have made a custom angular2(5.0.x) module that looks like this :
import { GuageService } from './services/guage.service';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { GuageComponent } from './guage/guage.component';
#NgModule({
declarations: [GuageComponent],
imports: [
CommonModule
],
providers : [GuageService],
exports : [GuageComponent]
})
export class GuageModule {}
I use it in my app modules like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '#kronsbi/bi-module-template';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxButtonModule,
DxCircularGaugeModule,
HttpClientModule,
GuageModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
When I try to start my app I get the following error.
Unexpected value 'GuageModule' imported by the module 'AppModule'. Please add a #NgModule annotation.
UPDATE
tsconfig for the main app:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
ts config for the GuageModule package:
{
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"stripInternal": true,
"experimentalDecorators": true,
"strictNullChecks": true,
"noImplicitAny": true,
"module": "es2015",
"moduleResolution": "node",
"paths": {
"#angular/core": ["node_modules/#angular/core"],
"rxjs/*": ["node_modules/rxjs/*"]
},
"rootDir": ".",
"outDir": "dist",
"sourceMap": true,
"inlineSources": true,
"target": "es5",
"skipLibCheck": true,
"lib": [
"es2017",
"dom"
]
},
"files": [
"index.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true
}
}

If you are using Angular 5.0 you need to add "annotationsAs": "decorators" to the "angularCompilerOptions" for your package.
Angular 5 introduced new optimizations and by default the decorators are removed on compile because they are not needed at runtime. This does not work for packages as you already discovered. You can read about this in the Angular 5 announcement blog the "Build Optimizer" paragraph mentions this. Version 5.0.0 of Angular Now Available
I use this settings in my angular packages:
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"skipMetadataEmit": false,
"strictMetadataEmit": true,
"annotationsAs": "decorators"
}

I had the same problem. With angular 5+ and angular cli 1.5 it says that your code is not compatible and also your library is scoped package. I have managed to fix it with adding
export * from './your-path'
In all my files (exporting everything from my library).
As i understood its you import as 3 party library You can try to run the application with
ng serve --preserve-symlinks
also add flatModuleId in src/tsconfig.es5.json accordingly:
"flatModuleId": "#scope/library-name"
Link to github here
There is issue on github for more information

This is most likely an issue with the way your npm package is being created. In your package.json for your GuageModule are you defining a main? This should point to the entry point to your npm package. Here is an example of mine.
"main": "./dist/module.js",
Then if you want typings from GuageModule in your main app you'll need to go to your tsconfig.json and under compilerOptions set declaration to be true to generate the typings files.
"compilerOptions": {
...
"declaration": true
...
},
Then finally in your package.json you will need to point to the entry point for your typings file.
"types": "./src/app/layout.module.d.ts"
Now you should be able to import your module and have typings on the module that you imported. Hope this helps!

Please add "emitDecoratorMetadata": true in the compilerOptions of tsconfig.json of your gauge module

how could I define a global module by typescript and not add to compiled file?

If a have a global module in a.ts:
export = class A(){
}
I want to import this module into a lot of .ts file, but when I do this, the module A will be compile to every file that I import module A.
So how can I define a global module, when I import it, this module will not be add to the compiled file.
my tsconfig.json :
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"sourceMap": false,
"outFile": "index.js",
"moduleResolution": "classic",
"baseUrl": "./",
"paths": {
"jQuery": ["types/jquery.d.ts"],
}
},
"exclude": [
"node_modules"
]
}