In my initial CRA TS app (Webpack, default setup, etc), I have a JS file that I import into a TS file with no problem.
When I switch to Vite, with vite-plugin-checker, that same import gives me an error:
TS7016: Could not find a declaration file for module '../../utils/hooks/useStateCallback'. '~/dev/admin_vite_worktree/src/app/utils/hooks/useStateCallback.js' implicitly has an 'any' type.
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'
import svgrPlugin from 'vite-plugin-svgr';
import macrosPlugin from "vite-plugin-babel-macros"
import checker from 'vite-plugin-checker'
import reactRefresh from '@vitejs/plugin-react-refresh';
// https://vitejs.dev/config/
export default defineConfig({
// This changes the out put dir from dist to build
// comment this out if that isn't relevant for your project
build: {
outDir: 'build',
},
define: {
global: {},
},
plugins: [
react(),
reactRefresh(),
svgrPlugin({
svgrOptions: {
icon: true,
},
}),
macrosPlugin(),
checker({
typescript: true,
overlay: {
panelStyle: 'height: 100vh; max-height: unset;'
}
})
],
});
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"],
"types": ["vite/client", "vite-plugin-svgr/client"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"checkJs": false
},
"include": [
"src"
],
"exclude": [
"node_modules",
"**/*.stories.tsx"
]
}
How would I fix this? useStateCallback is actually copied from https://stackoverflow.com/a/61842546/6826164, with no typings, and I'd rather not convert it to TS if I can avoid it.
(Probably the best answer is if the same useStateCallback functionality is available in a properly typed package somewhere and then I'd just take it out of our codebase haha!)
