Skip to content

fix: resolve a type declaration file in exports field#63

Open
nokazn wants to merge 1 commit intokraklin:masterfrom
nokazn:fix/explicit-exports-type
Open

fix: resolve a type declaration file in exports field#63
nokazn wants to merge 1 commit intokraklin:masterfrom
nokazn:fix/explicit-exports-type

Conversation

@nokazn
Copy link
Copy Markdown

@nokazn nokazn commented Mar 10, 2024 •
edited
Loading

Firstly, thank you for your work of this project!

I was trying several things and ran into the situation that elm-debug-transformer cannot be imported in a TypeScript module file. (I'm new in Elm, so I'm sorry if this usage is incorrect)

My project files are like belows.

tsconfig.json 
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "skipLibCheck": true,
    "allowJs": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,

    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "noEmit": true,

    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
package.json 
{
  "type": "module",
  "scripts": {
    "postinstall": "elm-tooling install",
    "dev": "vite",
    "prebuild": "elm-tooling install",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "@types/node": "^20.11.25",
    "elm-debug-transformer": "^1.2.1",
    "elm-tooling": "^1.15.0",
    "typescript": "^5.4.2",
    "vite": "^5.1.5",
    "vite-plugin-elm": "^3.0.0"
  }
}
vite.config.ts 
import { defineConfig } from "vite";
import elmPlugin from "vite-plugin-elm";

export default defineConfig({
  plugins: [elmPlugin()],
});
index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>nokazn</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script type="module" src="/src/main.ts"></script>
</html>
src/main.ts 
import { Elm } from "./Main.elm";

if (import.meta.env.NODE_ENV === "development") {
  const ElmDebugTransform = await import("elm-debug-transformer");
  ElmDebugTransform.register({
    simple_mode: true,
  });
}

const node = document.querySelector("#app");
if (node == null) {
  throw new Error("No #app element");
}
Elm.Main.init({ node });

And, this results in the following error.

image

$ npx tsc --noEmit
src/main.ts:4:42 - error TS7016: Could not find a declaration file for module 'elm-debug-transformer'. '/Users/nokazn/app/me/node_modules/elm-debug-transformer/dist/index.mjs' implicitly has an 'any' type.
  There are types at '/Users/nokazn/app/me/node_modules/elm-debug-transformer/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'elm-debug-transformer' library may need to update its package.json or typings.

4   const ElmDebugTransform = await import("elm-debug-transformer");
                                           ~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/main.ts:4

With exports.*.types" field in package.json, tsc can see a type declaration file correctly I think.
Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@nokazn