Error: JIT compiler unavailable after Angular upgrade from 6 to 13 - jit

I upgraded my angular application from v6 to v13.2.0
I was able to get all the dependencies correct and was able to do ng build successfully.
When I run the application, I get the 'JIT compiler unavailable' error.
As per different blogs, I tried to change tsconfig.json and tsconfig.app.json by adding enableIvy: true, still not able to get the error out.
Any other clues?
Error:
main.js:1 Error: JIT compiler unavailable
at Ii (main.js:1:2173559)
at Function.get (main.js:1:2230291)
at Xa (main.js:1:2159118)
at zm (main.js:1:2218492)
at vM (main.js:1:2216984)
at s.value (main.js:1:2216994)
at main.js:1:2216773
at main.js:1:2173877
at Array.forEach ()
at xi (main.js:1:2173825)
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
},
"angularCompilerOptions": {
"enableIvy" : true,
"strictTemplates" : true,
"strictInjectionParameters": true
}
}
tsconfig.app.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
],
"angularCompilerOptions": {
"enableIvy" : true,
"strictTemplates" : false,
}
}

Related

vscode typescript import intellisense css not working

The tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"noImplicitAny": false, //不需要显示地声明变量的类型为any
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
},
"include": [
"src"
]
}
Currently my working environment supports style tips. If I import the css file manually:
If I want to import css files intelligently. Not work:
And there ara a style file in the folder named ProductCollection.module.css
How to fix it?
Think you!

How to enable SWC Aliased imports in Next JS?

Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc
.swrc
{
"jsc": {
"target": "ES2017",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"]
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES2017",
"lib": ["es6", "dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "ESNEXT",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#components/*": ["./components/*"],
}
},
"exclude": ["node_modules", "**/*.stories.tsx"],
"include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}
14:24 Error: Unable to resolve path to module '#components/NavBar'
.eslintrc.json
{
"root": true,
"parser": "#typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"#typescript-eslint", "react", "prettier"
],
"rules": {
"prefer-const": "off",
"import/extensions": "off",
"jsx-a11y/anchor-is-valid": "off",
"import/no-cycle": [0, { "ignoreExternal": true }],
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/prop-types": "off",
"react-hooks/exhaustive-deps": "off",
"react/no-unescaped-entities": "off",
"react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
"react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],
// needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
"no-use-before-define": "off",
"#typescript-eslint/no-use-before-define": [
"error",
{ "functions": false, "classes": false, "variables": true }
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/no-explicit-any": "off"
},
"settings": {
"import/resolver": {
"babel-module": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
old .babelrc
{
"presets": ["next/babel"],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"#components": "./components",
"#api": "./api",
"#models": "./models",
"#screens": "./screens",
"#hooks": "./hooks",
"#services": "./services",
"#constants": "./constants",
"#context": "./context",
"#queries": "./queries",
"#data": "./data",
"#typeDefs": "./types",
"#generated": "./generated",
"#utils": "./utils",
"#pages": "./pages",
"#public": "./public"
}
}
]
]
}
Was able to solve this with a few tweaks.
Remove the import/resolver section of .eslintrc.json
Extend next in eslint.

Rollup'd react component css styles aren't being added to SSR document in NextJS

I've made a small npm package that exports a single component. The component is styled using SCSS modules, and bundled together using Rollup. It all seemed to work fine, but once I imported it into a NextJS project I noticed that the styles aren't being applied to the SSR'd document sent down from NextJS (they do eventually get applied, but there is a blip where the component is un-styled).
This is my first time creating an npm package and my first time using Rollup, and I'm having a tough time figuring out how to fix this issue. Maybe I need to not bundle the CSS into the .js files and instruct users to import the css files themselves? I was trying to avoid having that extra step, though. Perhaps using CSS-in-JS could solve the issue, but I'd rather not add a dependency for that if I can avoid it.
Any pointers would be much appreciated!
My Rollup config looks like this:
const config = [
{
input: "src/lib/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
url(),
svgr(),
typescript({ tsconfig: "./tsconfig.json", rootDir: "src/lib" }),
postcss({
modules: true,
}),
terser(),
bundleSize(),
visualizer(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [
dts(),
del({ hook: "buildEnd", targets: ["dist/cjs/types", "dist/esm/types"] }),
],
},
];
And I'm not sure if it's relevant, but my tsconfig looks like this:
{
"compilerOptions": {
"target": "es5",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
"module": "ESNext",
"declaration": true,
"declarationDir": "types",
"sourceMap": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"removeComments": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/lib/customModules.d.ts", "src/**/*"]
}

Stylelint not linting component.module.scss in Next.js

I two projects, one with React (v17.0.2) and the other with Next.js (v11.1.0) In both I
have implemented ESlint with Prettier and Stylelint.
My problem is that in React project everything is working smoothly and fine, however in Next.js project, stylelint is not linting component.modules.scss files (but other.css files are).
In React, scss files are in ./src/assets/scss/*
in Next.js scss files are in ./styles/*
These are the config files content:
.eslintrc.json
{
"settings": {
"react": {
"version": "detect"
}
},
"plugins": [
"react",
"react-hooks",
"jsx-a11y",
"only-warn",
"prettier"
],
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2021,
"ecmaFeature": {
"jsx": true,
"modules": true
}
},
"env": {
"browser": true,
"jest": true,
"es2021": true,
"node": true
},
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:prettier/recommended",
"next"
],
"rules": {
"camelcase": "off",
"react/prop-types": "off",
"react/jsx-curly-newline": ["off", "consistent"],
"react/jsx-handler-names": "off",
"react/display-name": ["off"],
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
.prettierrc
{
"singleQuote": true,
"trailingComma": "all",
"parser": "flow",
"semi": false,
"useTabs": false,
"editor.formatOnSave": true,
"stylelintIntegration": true
}
.stylelintrc.json
{
"extends": "stylelint-config-sass-guidelines",
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"indentation": 2,
"number-leading-zero": null,
"max-nesting-depth": 10
}
}
Any help please? Thanks
I found what was wrong;
Need to add this in .vscode/settings.json
"stylelint.validate": ["css", "scss", ".module.scss"]
.module.scss was not considered as .scss, so adding it to the config made everything works

How to fix Error parsing triggers: Cannot find module '../../ when deploying Firebase Functions on Gitlab CI

I have a Firebase project with Typescript functions
When I install, build and deploy from my console using firebase deploy all works fine.
But, when I try to do the same using my .gitlab-ci.yml script I get an error that it can't find my relative import.
Error: Error parsing triggers: Cannot find module '../../config/version'
Require stack:
The Typescript code is:
// utilsController.ts
import { serverVersion } from '../../config/version'
And that is converted to
// utilsController.js
const version_1 = require("../../config/version");
And apparently firebase deploy does not like this when running on Gitlab CI, but it works without a problem from my machine.
My tsconfig.json looks like this:
{
"compilerOptions": {
/* Basic Options */
"incremental": true,
"module": "commonjs",
"outDir": "lib",
"target": "es2015",
/* Strict Type-Checking Options */
"alwaysStrict": true,
"noImplicitAny": true,
"noImplicitThis": true,
"strict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
/* Additional Checks */
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
/* Module Resolution Options */
"esModuleInterop": true,
"moduleResolution": "node",
"resolveJsonModule": true,
/* Experimental Options */
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
/* Advanced Options */
"forceConsistentCasingInFileNames": true,
"sourceMap": true
},
"compileOnSave": true,
"include": [
"src"
]
}
I made this error go away and I am pretty sure is was an update of tsconfig.json, that did the trick. Probably the "target" should be "es2017" for my setup to work.
I simply created a new Firebase Functions Typescript project using firebase-tools CLI and departed in the tsconfig from that.
New, working tsconfig is:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
/* Module Resolution Options */
"resolveJsonModule": true,
/* Experimental Options */
"esModuleInterop": true,
"experimentalDecorators": true,
},
"compileOnSave": true,
"include": [
"src"
]
}

Resources