Adding source maps to sentry angular project - javascript

sentry throws this error error
I build the project, files appear in the dist folder files
My configs settings:
tsconfig.json:
"compilerOptions": {
"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/"
}
angular.json:
"build": {
...
"configurations": {
"production": {
...
"sourceMap": {
"hidden": true,
"scripts": true,
"styles": true
}
}
}
}
main.ts:
Sentry.init({
dsn: token
integrations: [
new BrowserTracing({
tracePropagationTargets: ["name"],
routingInstrumentation: Sentry.routingInstrumentation,
}),
],
tracesSampleRate: 1.0,
release: "fake"
});
I will describe my process of working with sentry CLI:
1)sentry-cli releases new fake
2)sentry-cli releases files fake upload-sourcemaps ../../dist
3)sentry-cli releases finalize fake

Related

TSError: ⨯ Unable to compile TypeScript - Jest, Nodejs, Typescript

I'm getting an error when i run the yarn test. Apparently the error is in the jest.cofig.ts in the object "moduleNameMapper".
I think it's in that file because if I remove the line the tests "work" (it doesn't actually test anything, but it doesn't give the error either.)
jest.config.ts
/*
* For a detailed explanation regarding each configuration property and type check, visit:
* https://jestjs.io/docs/en/configuration.html
*/
import { pathsToModuleNameMapper } from 'ts-jest/utils';
import { compilerOptions } from './tsconfig.json';
export default {
preset: 'ts-jest',
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.js?$': 'babel-jest',
},
verbose: true,
clearMocks: true,
setupFiles: ['<rootDir>/src/tests/index.ts'],
setupFilesAfterEnv: ['<rootDir>/src/tests/setup.ts'],
testEnvironment: 'node',
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>' }),
};
tsconfig.json
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"lib": [
"es6"
],
"allowJs": true,
"outDir": "./dist",
"rootDir": "./src",
"removeComments": true,
"typeRoots": [
"./node_modules/#types",
"./src/#types"
],
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"strictPropertyInitialization": false,
"baseUrl": ".",
"paths": {
"#infrastructure/*": ["./src/infrastructure/*"],
"#useCases/*": ["./src/use-cases/*"],
"#tests/*": ["./src/tests/*"],
"#domain/*": ["./src/domain/*"],
"#messagesConsumers/*": ["./src/messages-consumers/*"]
}
},
"include": [
"src/**/*"
]
}
package.json -> scripts
"scripts": {
"tsc": "tsc",
"test": "NODE_ENV=test tsnd -r tsconfig-paths/register --transpile-only src/tests/init.ts",
"test2": "cross-env NODE_ENV=test jest",
"prepare": "husky install && yarn husky set .husky/pre-commit 'yarn lint-staged'",
"setup:dev": "NODE_ENV=development tsnd -r tsconfig-paths/register --transpile-only --ignore-watch node_modules --no-notify src/setup/setup.ts",
"setup:production": "NODE_ENV=production tsnd -r tsconfig-paths/register --transpile-only --ignore-watch node_modules --no-notify src/setup/setup.ts"
},
yarn test error message:
Failed to parse the TypeScript config file /var/www/nodejs/necata-gateway/jest.config.ts
TSError: ⨯ Unable to compile TypeScript:
jest.config.ts:16:24 - error TS2695: Left side of comma operator is unused and has no side effects.
16 moduleNameMapper: (0, utils_1.pathsToModuleNameMapper)(tsconfig_json_1.compilerOptions.paths, { prefix: '<rootDir>' }),
~
at readConfigFileAndSetRootDir (/var/www/nodejs/necata-gateway/node_modules/jest-config/build/readConfigFileAndSetRootDir.js:136:13)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at readConfig (/var/www/nodejs/necata-gateway/node_modules/jest-config/build/index.js:225:18)
at readConfigs (/var/www/nodejs/necata-gateway/node_modules/jest-config/build/index.js:420:26)
at runCLI (/var/www/nodejs/necata-gateway/node_modules/#jest/core/build/cli/index.js:132:59)
at initialize (/var/www/nodejs/necata-gateway/src/tests/init.ts:29:23)
I still dont understand why this error.... But i changed the object "moduleNameMapper" by removing the function and adding an array with my folder paths.
export default {
preset: 'ts-jest',
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.js?$': 'babel-jest',
},
verbose: true,
clearMocks: true,
setupFiles: ['<rootDir>/src/tests/index.ts'],
setupFilesAfterEnv: ['<rootDir>/src/tests/setup.ts'],
testEnvironment: 'node',
// moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>' }),
moduleNameMapper: {
// '^#App/(.*)$': '<rootDir>/src/$1',
// '^lib/(.*)$': '<rootDir>/common/$1',
'^#useCases/(.*)$': '<rootDir>/src/use-cases/$1',
'^#tests/(.*)$': '<rootDir>/src/tests/$1',
'^#domain/(.*)$': '<rootDir>/src/domain/$1',
'^#messagesConsumers/(.*)$': '<rootDir>/src/messages-consumers/$1',
'^#infrastructure/(.*)$': '<rootDir>/src/infrastructure/$1',
},
};
And now my tests run...

In TypeScript, what is the proper config to make module alias work when building the dist folder?

I was experimenting on module alias for typescript and it works during dev, but when I try to build it I always get cannot find module because it is pointing to src file even on build.
I tried replacing dist to moduleAliases in package.json. It compiled, however, when I run yarn run dev, it is using the dist folder source code instead of my src. I also tried introducing tsconfig-paths to my dev e.g "dev": "NODE_ENV=development ts-node -r tsconfig-paths/register ./src/index.ts", but the system is still reading the moduleAliases. Maybe someone here have encountered similar issue while doing module paths.
Here is my project structure:
|-project
|---src
|-------index.ts // (where I put require('module-alias/register');)
|-------app (business logic) // where I start using modules e.g import config from '#config/index.config';
|-----------index.ts
|-----------routes
|-------config
|---dist
|---node_modules
|---.env
|---.eslintrc
|---package.json
|---tsconfig.json
|---yarn.lock
Snippet of my package.json
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"dev": "NODE_ENV=development ts-node-dev --respawn --transpileOnly ./src/index.ts",
"prod": "yarn run build && node -r ./dist/index.js",
"build": "NODE_ENV=production yarn run build-ts",
"build-ts": "tsc -p .",
},
"_moduleAliases": {
"#config": "./src/config",
"#routes": "./src/app/routes",
},
My tsconfig.json
{
"compilerOptions": {
"incremental": true,
"target": "es6",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./dist",
"removeComments": true,
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noUnusedLocals": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"suppressImplicitAnyIndexErrors": true,
"moduleResolution": "node",
"baseUrl": "./src",
"paths": {
"#config/*": ["config/*"],
"#routes/*": ["app/routes/*"],
},
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
My .eslintrc (not sure if it matters or relevant to this problem)
{
"extends": ["airbnb-typescript/base"],
"rules": {
"import/prefer-default-export": 0
},
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}
How I use it
import config from '#config/index.config';
Thanks a lot.

Jest & React & Typescript & React-Testing-Library error

I have a React/NextJS project setup using Typescript and am adding unit testing with Jest and React Testing Library.
A unit test for my component looks like this:
import React from 'react';
import '#testing-library/jest-dom/extend-expect';
import { render } from '#testing-library/react';
import AppLayout from '.';
describe('<AppLayout>', () => {
it('renders children', () => {
const children = 'Test';
const props = { pathname: '/' };
const component = <AppLayout {...props}>{children}</AppLayout>;
const { getByText } = render(component);
expect(getByText(children)).toBeInTheDocument();
});
});
This throws the following error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's some key files in my project to help:
.babelrc
{
"env": {
"development": {
"presets": ["next/babel"],
"plugins": ["babel-plugin-styled-components"]
},
"production": {
"presets": ["next/babel"],
"plugins": [
"#babel/plugin-transform-react-inline-elements",
["babel-plugin-styled-components", { "displayName": false }]
]
}
}
}
tsconfig.js
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"isolatedModules": true,
"lib": [
"dom",
"es2017"
],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"removeComments": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "esnext"
},
"exclude": [
".next",
"node_modules"
]
}
jest.config.js
module.exports = {
roots: ['./'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
};
My project compiles and runs fine but I'm guessing there's some configuration issue I need to fix to get my unit tests running correctly. Any ideas?
This jest.config.js works with Typescript, Jest, React Testing Library and without Babel.
To test it works, execute:
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react/client
yarn && yarn test
Although testEnvironment: 'jsdom' is not really needed due to being the default, you can look at the other settings.
As a sidenote, Babel is a wonderful software but you might consider setting "target": "es5" and using react-app-polyfill instead.

Problems with rollupjs configuration

When building my TypeScript project (all node modules are up to date) with the following configuration I get a error message called "Error: When building multiple chunks, the output.dir option must be used, not output.file."
Can anyone help? Thanks.
// [EDIT: I've simplified this configuration as the original
// one caused some misunderstandings]
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
import { uglify } from 'rollup-plugin-uglify'
import gzip from 'rollup-plugin-gzip'
export default {
input: 'src/main/my-project.ts',
output: {
file: 'dist/my-project.umd.production.js',
format: 'umd',
name: 'MyProject',
sourcemap: false,
globals: {
'react': 'React'
}
},
external: ['react'],
plugins: [
resolve(),
commonjs(),
typescript({
exclude: 'node_modules/**'
}),
uglify(),
gzip()
]
}
This is my tsconfig.json in case it may be important.
The build script is started by rollup --c rollup.config.js:
{
"compilerOptions": {
"target": "ES5",
"jsx": "react",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"downlevelIteration": true,
"sourceMap": true,
"lib": ["es5", "es6", "dom"],
"esModuleInterop": true,
"baseUrl": ".",
"typeRoots": [
"node_modules/#types"
],
"types": [
"node", "react", "react-dom", "mocha", "chai"
]
},
"files": [
"src/main/my-project.ts"
],
"include": [
"./src/**/*.ts*"
]
}
I had a similar issue and as a fix I needed to specify the output module in package.json
{
...
"module": "./dist/index.esm.js",
...
}
And it's aligned with the rollup config:
output: [
{ file: pkg.main, format: 'cjs' },
{ file: pkg.module, format: 'esm' },
]
For all those how are still struggling to get this issue fixed and you are using dynamic imports in the component than you should add inlineDynamicImports: true just above output object
It seems that the configuration wasn't the problem, but there was still something wrong with the versions of my node modules.
After I did the following, everything worked fine again:
> ncu -u
> npm update
> npm install

How to configure ESlint for JS application that imports TypeScript modules

The goal
I have an application that I'd like to migrate to TypeScript progressively. I'd like to be able to:
import *.ts files in Vue single file components
import *.ts files in regular *.js files.
import *.js files in *.ts files
My setup
The app was set up using vue-cli 3.x. I'm using Airbnb ESLint config.
The majority of the application is written in JS, but all newly added modules are written in TypeScript.
My .eslint.js config, before adding TypeScript was:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'#vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
After I installed #vue/cli-plugin-typescript, typescript and #vue/eslint-config-typescript modules (using the vue add #vue/typescript command) I started getting ESLint errors after importing *.ts files in *.js files. These were only ESLint errors, not TypeScript or Babel compilation errors.
So I've modified the .eslint.js config as follows:
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'#vue/airbnb',
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
overrides: [
{
files: [
'**/*.js',
'**/*.vue'
],
parserOptions: {
parser: 'babel-eslint',
},
},
{
files: [
'**/*.ts'
],
parserOptions: {
parser: 'typescript-eslint-parser',
},
}
],
};
I've added override sections in order to apply different parsers depending on a file extension.
My tsconfig.json file:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"allowJs": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
So it is a standard tsconfig.json that vue-cli generates. The only thing I've changed was the allowJs: true - thanks to this I can import JS modules that don't have d.ts types definitions - that makes the migration easier.
The question
It all seems to be configured properly, but occasionally I'm getting ESLint errors. It looks like sometimes babel-eslint instead of typescript-eslint-parser is used to lint *.ts files. I don't know how to reproduce it, but I'm almost sure that it happens when I import *.ts files in *.vue files. Errors are usually gone when I stop and start Webpack again (with yarn serve).

Categories

Resources