Develop Reference

Error "Process not defined" on import custom lib with TS

I have a problem on build my project react with typescript, on import in another project the types doesn't work, have a message 'process not defined'.
//package.json
...
"main": "./lib/cjs/index.js",
"module": "./lib/esm/index.js",
"types": ".lib/cjs/types.d.ts",
...
Initial i'm using this configurations to building the lib.
//tsconfig.base.ts
{
"compilerOptions": {
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"checkJs": true,
"allowJs": true,
"declaration": true,
"allowSyntheticDefaultImports": true,
"jsx": "react-jsx"
},
"include": ["../src", "../public"],
"exclude": [
"../src/stories",
"../node_modules",
"../lib",
"../src/stories",
"../src/tests",
"../src/components/modals"
]
}
//tsconfig.cjs.ts
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"lib": ["ES6", "DOM"],
"target": "ES6",
"module": "CommonJS",
"moduleResolution": "Node",
"outDir": "../lib/cjs",
"declarationDir": "../lib/cjs"
}
}
//tsconfig.esm.ts
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"lib": ["ES2022", "DOM"],
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Node",
"outDir": "../lib/esm",
"declarationDir": "../lib/esm"
}
}
Im another try, i'm used rollup to build but doesn't worked too.
//rellup-cjs.config.mjs
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import css from 'rollup-plugin-import-css';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import terser from '#rollup/plugin-terser';
export default {
input: './src/index.tsx',
output: {
dir: './lib/cjs/',
format: 'cjs',
sourcemap: true,
exports: 'auto',
preserveModules: true,
},
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json', outDir: './lib/cjs/' }),
css(),
terser(),
],
};
//rellup-esm.config.mjs
...
export default {
...
output: {
dir: './lib/esm/',
format: 'esm',
sourcemap: true,
exports: 'auto',
preserveModules: true,
},ugins: [
...
typescript({ tsconfig: './tsconfig.json', outDir: './lib/cjs/' }),
...
],
};
This the exports of my project:
exports-img
I'm tried to be use rollup or any typescript configurations, but nothing work, I'm made this lib using chakra-ui and others external libs.

Building project for production causes error within mock file with Jest

I have this mock within a mocks folder (React project). This file is named as getEnvironmentContextMock.ts
import { getEnvironmentContext } from "../apis/environmentStrategy";
const getEnvironmentContextMock = jest
.fn(getEnvironmentContext)
.mockReturnValue({
identity: process.env.REACT_APP_URL_IDENTITY,
company: process.env.REACT_APP_URL_SUBSCRIPTION,
client: process.env.REACT_APP_URL_CLIENTS,
orders: process.env.REACT_APP_URL_ORDER,
});
export { getEnvironmentContextMock };
And when I try to generate the build for production
Exclude node_modules
NODE_ENV=production
npm i
NODE_ENV=production
npm run build --prod
I have the following error within the mock file:
Cannot find name 'jest'. TS2304
My jest.config file
/** #type {import('#ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: "ts-jest",
testEnvironment: "jsdom",
globals: {
"ts-jest": {
isolatedModules: true,
},
},
transform: {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.tsx?$": "ts-jest",
},
// Runs special logic, such as cleaning up components
// when using React Testing Library and adds special
// extended assertions to Jest
setupFilesAfterEnv: ["#testing-library/jest-dom/extend-expect"],
moduleNameMapper: {
"\\.(css|less|sass|scss)$": "identity-obj-proxy",
"\\.(png|jpg|gif|ttf|eot|svg)$": "identity-obj-proxy",
},
moduleDirectories: ["js", ".", "node_modules"],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};
And my tsconfig file
{
"compilerOptions": {
"target": "es2016",
"module": "esnext",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"lib": ["dom", "dom.iterable", "esnext"],
"noImplicitAny": false,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"types": ["jest"],
"typeRoots": ["./types", "./node_modules/#types"]
},
"include": ["src"],
"exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"]
}
Any thoughts on how to fix that?
The build works if I change the mock file name extension to test.tsx, but I don't it as it is not a test file, just a mock file.

intellisense not working with tsconfig.json, babel.config.js, and .eslintrc.json

I configure these babel.config.js, tsconfig.json, and .eslintrc.json
it working fine with project run and build but it's not showing any suggestions (intellisense) with my imports.
Please review and help me to fix it. So, visual sutio code show intellisense and I can work fast.
.eslintrc.js
module.exports = {
root: true,
extends: ['airbnb', 'airbnb/hooks', '#react-native-community'],
settings: {
'import/resolver': {
alias: [
['assets', './assets'],
['components', './components'],
['screens', './screens'],
['utils', './utils'],
],
},
},
};
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": [
"dom",
"esnext"
],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
},
"baseUrl": ".",
"paths": {
"assets/*": ["./assets/*"],
"components/*": ["./components/*"],
"screens/*": ["./screens/*"],
"utils/*": ["./utils/*"],
},
"exclude": ["node_modules"],
"extends": "expo/tsconfig.base"
}
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
alias: {
assets: './assets',
components: './components',
screens: './screens',
utils: './utils',
},
},
],
],
};
};

React Native Typescript babel-plugin-module-resolver error: Cannot find module or its corresponding type declerations

I can use the module resolver with Javascript without any problem. Actually I can use it with Typescript without problem on runtime but on developing part I could not find the solution of Cannot find module or its corresponding type declerations problem.
I'm looking for an answer which part am I doing it wrong?
Here are the files:
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"alias": [
{ "#shared-components": "./shared/components" },
{ "#shared-constants": "./shared/constants" },
{ "#shared-theme": "./shared/theme" },
{ "#font-size": "./shared/theme/font-size" },
{ "#api": "./services/api/index" },
{ "#fonts": "./shared/theme/fonts/index" },
{ "#colors": "./shared/theme/colors" },
{ "#theme": "./shared/theme/index" },
{ "#services": "./services" },
{ "#screens": "./screens" },
{ "#utils": "./utils/" },
{ "#assets": "./assets/" }
],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
]
]
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["esnext"],
"allowJs": true,
"jsx": "react-native",
"noEmit": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
// ? Custom ones
"skipLibCheck": true,
"resolveJsonModule": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true,
// ? Babel Plugin Module Resolver
"baseUrl": "./src",
"paths": {
"#shared-components": ["./shared/components"],
"#shared-constants": ["./shared/constants"],
"#shared-theme": ["./shared/theme"],
"#font-size": ["./shared/theme/font-size"],
"#api": ["./services/api/index"],
"#fonts": ["./shared/theme/fonts/index"],
"#colors": ["./shared/theme/colors"],
"#theme": ["./shared/theme/index"],
"#services": ["./services"],
"#screens": ["./screens"],
"#utils": ["./utils/"],
"#assets": ["./assets/"]
}
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
Usage in .tsx file
import HomeScreen from "#screens/home/HomeScreen";
import SearchScreen from "#screens/search/SearchScreen";
import DetailScreen from "#screens/detail/DetailScreen";
The error
Thank you for the helping :)

The way of mapping paths in your configuration doesn't look right. The right one is supposed to be:
paths": {
"#screens/*": ["./screens/*"], // You need to specify prefix `/*` as well
// others ...
}

"export 'default' (imported as 'core_1') was not found in '#angular/core'

I'm building an Angular library with ng-packagr.
When serving my app with the packed library used, I get this warning:
. Furthermore, when serving the app, I get this errormessage:
core_1 is imported alongside other modules in the top:
import core_1, { Component, Inject, Injectable, InjectionToken, NgModule } from '#angular/core';
UPDATE!!
The configuration is as follows:
ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"src": "lib",
"dest": "dist/auth",
"workingDirectory": ".ng_build",
"lib": {
"entryFile": "public_api.ts",
"externals": {
"oidc-client": "./node_modules/oidc-client/dist/oidc-client.min.js",
"rxjs/add/operator/let": "Rx.Observable.prototype"
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": [
"es6",
"dom"
],
"moduleResolution": "node",
"declaration": true,
"experimentalDecorators": true,
"baseUrl": ".",
"stripInternal": true,
"outDir": "./dist",
"sourceMap": true,
"inlineSources": true,
"skipLibCheck": true
},
"exclude": [
"node_modules",
"dist",
"demo",
"config",
"coverage",
"src/**/*.spec.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"trace": true
}
}

EUREKA
Fixed by playing with the tsconfig in both the library, and the angular project :
tsconfig.lib.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
// 👍 these two lines
"target": "es2015",
"module": "esnext",
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
and in the target project :
tsconfig.json
{
"compilerOptions": {
"module": "esnext"
}
}
tsconfig.app.json
{
"compilerOptions": {
"module": "esnext"
}
}