Typescript 'any' type issue for non-existent variable

I have been working on learning Typescript and have come across an issue I can't seem to resolve. When trying to render a memoized component (I am using React), I get the following error message:

TS7006: Parameter '_ref' implicitly has an 'any' type.

The reason this is stumping me, is that for the life of me I can't see where this _ref property is coming from.

Here is the code for both the component, and the page that is trying to render it:

// Dependencies
import React, { memo } from 'react';

// Styles

// Props
interface BuildingBlockProps {
  id: number,
  top: number,
  left: number
}

const BuildingBlock: React.FC<BuildingBlockProps> = ({id, top, left}: BuildingBlockProps) => {
  return (
    <React.Fragment>
      <div
        id={`building-block-${id + 1}`}
        className="absolute w-12 h-12 bg-red-500 rounded-full"
        style=
      />
    </React.Fragment>
  );
}; 

// Export memoized component
const _BuildingBlock = memo(BuildingBlock);
export default _BuildingBlock;

import React from 'react';

import _BuildingBlock from '../components/atoms/BuildingBlock';

const TestPage = () => {
  return (
    <div>
      <_BuildingBlock id={1} top={2} left={3}/>
    </div>
  );
};

export default TestPage;

I tried checking through my webpack, babel configuration and even things like my Tailwind and postcss config files, but I just can't see what is wrong. If anyone has a suggestion I would greatly appreciate it!

Also, I can provide my package.json dependencies if that would help isolate the potential fix.

Edit: The full error message I receive is:

./src/components/atoms/BuildingBlock.tsx 8:43-47 [tsl] ERROR in C:\Users\liam_\Desktop\Business\Nixon-Digital\Website\nixon-digital\client\src\components\atoms\BuildingBlock.tsx(8,44) TS7006: Parameter '_ref' implicitly has an 'any' type. ts-loader-default_e3b0c44298fc1c14 @ ./src/pages/TestPage.tsx 2:0-63 4:92-106 @ ./src/index.tsx 11:0-40 29:47-55 webpack 5.75.0 compiled with 1 error in 6817 ms

Which so far as I can tell is pointing to the end of the line: id: number, Which makes no sense to me.

Update: After gutting and rebuilding the project incrementally, I think I have worked out that the culprit is adding the following line to my webpack.config.js file:

{ test: /\.tsx?$/, loader: "babel-loader" },

So it seems the problem is to do with using Babel for some reason. I will continue to look for ways to fix this, as I feel Babel is important for transpiling the Typescript.



Comments

Popular posts from this blog

Today Walkin 14th-Sept

Spring Elasticsearch Operations

Hibernate Search - Elasticsearch with JSON manipulation