CODEWITHSUNDEEP
javascriptreactjstypescript
TJBlackman
TJBlackman

Reputation: 2343

TS Lint Error; Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

I'm working on a React and TypeScript app, using webpack, and I'm getting the exact same error for every one of my React components. The error is always this:

Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

I've been searching for a solution for 2 days now. I think there might be something off in my tsconfig.json or my webpack - both are available in the GitHub demo repo at the bottom.

Example 1:

Say I have this component:

export const Container = ({children}) => {
  return (
    <Container>
      {children}
    </Container>
  );
}

The error for the above component will complain about the children prop: TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.

Example 2

Say I have this component:

export const Title = ({text, color}) => {
  return (
    <h1 style={{color: color}}>{text}</h1>
  );
}

Then the error complains about those two props: TS2322: Type '{ text: string; color: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Github Example Repo: Wannna run the code yourself?

  1. git clone https://github.com/TJBlackman/demo-tslint-error.git
  2. cd demo-tslint-error
  3. npm install
  4. npm run dev

How can I avoid these errors? When I use the Create React App TS bundler, I don't get these errors. I just want to pass some simple props!!

Upvotes: 2

Views: 2045

Answers (2)

yeerk
yeerk

Reputation: 2697

In your tsconfig.json use:

"moduleResolution": "node"

The issue is that the use of "module": "es6" appears to cause the module resolution strategy to change to classic. This is quite annoying, as this is not uniformly mentioned in the documentation (they specify this happens for AMD | System | ES2015, but not es6).

In order to avoid problems in I recommend manually specifying the module resolution strategy:

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    // Explicitly force module resolution strategy to be node,
    //  to prevent "module": "es6" from changing it to classic.
    "moduleResolution": "node"
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

I also created a pull request to apply this change: https://github.com/TJBlackman/demo-tslint-error/pull/1/commits/634ec9889096baca0676ddf3076c66e82addfdd8 (I'm sliftist on github).

Upvotes: 2

pavan kumar
pavan kumar

Reputation: 823

for more info read these docs

Doc on what Module does

Doc on Module options and values allowed

Doc on webpack react basic config

use module:"commonJS"

To compile, we must specify a module target on the command line. For Node.js, use --module commonjs; for require.js, use --module amd

Upvotes: 1

Related Questions