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';

// /config/
export default defineConfig({
  // This changes the out put dir from dist to build
  // ment 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

{
  "pilerOptions": {
    "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 , 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!)

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
  // ment 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

{
  "pilerOptions": {
    "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./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!)

• javascript
• reactjs
• typescript
• vite

Share Improve this question Follow edited Apr 11, 2023 at 11:11 Sultan Aslam 6,25822 gold badges4040 silver badges4848 bronze badges asked Jul 20, 2022 at 20:25 Jonathan TuzmanJonathan Tuzman 13.3k2828 gold badges8383 silver badges154154 bronze badges 1

• Did you solve that somehow? I'm struggling with the same issue: reddit./r/sveltejs/ments/17s5y4l/… – Zied Hamdi Commented Nov 10, 2023 at 21:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

tsconfig.json

"allowJs": false,

change it to

"allowJs": true,