Module not found: Can't resolve type.d.ts

[hirasaki1985]

I can't use generate type.d.ts file with react + typescript project.

I try to start with npm command npm run start, but it's not working.

generate log

$ yarn generate
yarn run v1.21.1
$ graphql-codegen
  ✔ Parse configuration
  ✔ Generate outputs
✨  Done in 2.11s.

npm run start log

$ npm run start
Failed to compile.

./src/hooks/actions/EmployeeActionHook.ts
Module not found: Can't resolve '../../@types/type' in '`/work/my-project/src/hooks/actions'

package.json

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.8",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.168",
    "@types/node": "^14.14.24",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "axios": "^0.21.1",
    "formik": "^2.2.6",
    "graphql": "^15.5.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "query-string": "^6.13.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "react-svg-loader": "^3.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "styled-components": "^5.2.1",
    "typescript": "^4.1.3",
    "typescript-fsa": "^3.0.0",
    "typescript-fsa-reducers": "^1.2.2",
    "web-vitals": "^1.0.1",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "generate": "graphql-codegen"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.20.1",
    "@graphql-codegen/typescript": "^1.21.0",
    "@graphql-codegen/typescript-operations": "^1.17.14",
    "@graphql-codegen/typescript-react-apollo": "^2.2.1",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsdoc": "^31.6.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0"
  }
}

codegen.yml

overwrite: true
schema:
  # http://localhost:4000/graphql
  - ./src/graphql/schema.graphql
documents:
  - ./src/graphql/queries/*.graphql
  - ./src/graphql/mutations/*.graphql
generates:
  ./src/@types/type.d.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo

my-project dir

.
├── README.md
├── codegen.yml
├── /node_modules
├── package-lock.json
├── package.json
├── /public
├── /src
│   ├── /@types
│   │   └── type.d.ts
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── ...
│   ├── ...
│   ├── /consts
│   ├── /datas
│   ├── /graphql
│   ├── /hooks/actions/EmployeeActionHook.ts
│   └── utils
├── tsconfig.json
├── yarn-error.log
└── yarn.lock

EmployeeActionHook.ts

import { useAddEmployeeMutation, NewEmployee } from '../../@types/type'
// NOTE: this import is not working...

export function useEmployeeAdd() {
  const addEmployee = useAddEmployeeMutation

  return useCallback(async (employee: EmployeeModel) => {
    const newEmployee: NewEmployee = {
      email: employee.email,
      name: employee.name
    }

    const result = await addEmployee({
      variables: {
        employee: newEmployee,
      }
    })

    return result
  }, [])
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "typeRoots": [
      "./src/@types",
      "./node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

versions

$ node -v
v14.15.4
$ npm -v
6.14.11
$ yarn -v
1.21.1

type.d.ts shoud not include import/export word? How do I solve it?
Please check it.

[ardatan]

.d.ts files can only contain declarations not actual code. So it will work if you remove .d from the extension.

[hirasaki1985]

@ardatan
thank you for replying.

I tried to remove .d from the extension, and regenerated type.ts file.
then I could import type.ts file with EmployeeActionHook.ts.
thank you so much.

I will tell you for the time being.
next, I catched other error in type.ts files.
EmployeesQueryVariables not found.

and I added .graphqlconfig file.

{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:4000/graphql",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  },
  "includes": ["./src/graphql/**/*.graphql", "*.graphql"]
}

I could solve it.

I am glad to inform you that the problem is now solved.