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
Post a Comment