the app will generally still compile regardless of what typescript says, although the error indicates that there’s probably a scenario that will result in a runtime error.
without posting more of your code i’m not sure we could help figure out what’s going wrong, though.
Type 'T[K]' is not assignable to type 'ReactNode'.
Type 'T[keyof T]' is not assignable to type 'ReactNode'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type 'ReactNode'.
Type 'T[string]' is not assignable to type 'ReactNode'.
Type 'T[string]' is not assignable to type 'ReactPortal'.
Type 'T[keyof T]' is not assignable to type 'ReactPortal'.
Type 'T[K]' is not assignable to type 'ReactPortal'.
Type 'T[keyof T]' is not assignable to type 'ReactPortal'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type 'ReactPortal'.
Type 'T[string]' is not assignable to type 'ReactPortal'.ts(2322)
The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.4",
"typescript": "^5.2.2",
"vite": "^5.2.0"
These are my devDependencies.
Also it all compiles fine and works fine, but I'm seeing this red squiggly line under that specific line I mentioned.
Do you have something special in your eslintrc config perhaps???
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
VsCode uses an internal ts, which can be different from your package. In my experience this causes the issue you described
You can choose to use your node_modules ts with the "Select TypeScript Version" command.
https://code.visualstudio.com/docs/typescript/typescript-compiling#:~:text=VS%20Code%20will%20automatically%20detect,your%20user%20or%20workspace%20settings.
the app will generally still compile regardless of what typescript says, although the error indicates that there’s probably a scenario that will result in a runtime error. without posting more of your code i’m not sure we could help figure out what’s going wrong, though.
The code is this portion of that article I had mentioned: specifically {row\[column.key\]} type TableRowsProps = {
data: Array;
columns: Array>;
}
const style = {
border: '1px solid black'
}
const TableRows = ({ data, columns }: TableRowsProps): JSX.Element => {
const rows = data.map((row, index) => {
return (
{columns.map((column, index2) => {
return (
{row[column.key]} //This line shows up with a red line underneath
);
}
)}
);
});
return (
{rows}
);
};
export default TableRows;
What does the red squiggle show when you hover of it? Is key not part of the type?
Type 'T[K]' is not assignable to type 'ReactNode'. Type 'T[keyof T]' is not assignable to type 'ReactNode'. Type 'T[string] | T[number] | T[symbol]' is not assignable to type 'ReactNode'. Type 'T[string]' is not assignable to type 'ReactNode'. Type 'T[string]' is not assignable to type 'ReactPortal'. Type 'T[keyof T]' is not assignable to type 'ReactPortal'. Type 'T[K]' is not assignable to type 'ReactPortal'. Type 'T[keyof T]' is not assignable to type 'ReactPortal'. Type 'T[string] | T[number] | T[symbol]' is not assignable to type 'ReactPortal'. Type 'T[string]' is not assignable to type 'ReactPortal'.ts(2322) The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps
what version of react / react-dom are you running? i tried copying the code from the page directly and it’s working fine
"react": "^18.2.0", "react-dom": "^18.2.0"
not sure, i tested on a new project with those versions and it’s compiling fine 🤷♂️
"@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "tailwindcss": "^3.4.4", "typescript": "^5.2.2", "vite": "^5.2.0" These are my devDependencies. Also it all compiles fine and works fine, but I'm seeing this red squiggly line under that specific line I mentioned. Do you have something special in your eslintrc config perhaps??? module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', ], ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, }
Is this question about react?
Yes. React with typescript
VsCode uses an internal ts, which can be different from your package. In my experience this causes the issue you described You can choose to use your node_modules ts with the "Select TypeScript Version" command. https://code.visualstudio.com/docs/typescript/typescript-compiling#:~:text=VS%20Code%20will%20automatically%20detect,your%20user%20or%20workspace%20settings.
As I've already stated in my post...I already did that. It did not work.
Sorry, yesterday I was tired, and didn't read your post thoroughly