Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rollupTypes: true results in `Error: Internal Error: getResolvedModule() could not resolve module name "./myMainComponent" #126

Closed
jnachtigall opened this issue Oct 12, 2022 · 11 comments
Labels
pending Need further confirmation

Comments

@jnachtigall
Copy link

Setting rollupTypes: true results in Error: Internal Error: getResolvedModule() could not resolve module name ...

image

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
      rollupTypes: true,
    }),
  ],
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, "src/mainWebComponent.ts"),
      formats: ["es"],
    },
    outDir: "dist-lib",
  },
});

Without or commenting out // rollupTypes: true, it works.

@jnachtigall
Copy link
Author

@qmhc Same error still with version 1.6.6

My d.ts file is "types": "./dist-lib/ozgerde-vorgangsportal.d.ts", and includes:

export * from './mainWebComponent'

But there is no such file in dist-lib

image

@qmhc
Copy link
Owner

qmhc commented Oct 13, 2022

I think the cause maybe incorrect root config, would your tsconfig.json and project struct?

@jnachtigall
Copy link
Author

jnachtigall commented Oct 13, 2022

That's my tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

and tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite-app.config.ts", "vite-lib.config.ts"]
}

Not sure, what you mean by "project struct"? It is a vite 3 structure under modules/vgp-frontend/vite-app and build.outDir: "dist-lib",

EDIT:
This is the package.json:

{
  "name": "ozgerde-vorgangsportal",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "files": [
    "dist-lib"
  ],
  "module": "./dist-lib/ozgerde-vorgangsportal.js",
  "exports": {
    ".": {
      "import": "./dist-lib/ozgerde-vorgangsportal.js"
    }
  },
  "types": "./dist-lib/ozgerde-vorgangsportal.d.ts",
  "scripts": {
    "dev": "vite --config vite-app.config.ts",
    "build": "npm run buildApp && npm run buildLib",
    "buildApp": "tsc && vite --config vite-app.config.ts build",
    "buildLib": "tsc && vite --config vite-lib.config.ts build",
    "preview": "vite --config vite-app.config.ts preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/material": "^5.10.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swr": "^1.3.0",
    "unfetch": "^4.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.8.1",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vite-plugin-dts": "^1.6.6"
  }
}

Error happens when calling npm run buildLib

@jnachtigall
Copy link
Author

jnachtigall commented Oct 13, 2022

Changing in package.json from

  "types": "./dist-lib/ozgerde-vorgangsportal.d.ts",

to

  "types": "./dist-lib/mainWebComponent.d.ts",

makes it work.

Though now I have 2 files in the outputDir like this:
image

That is, now there is a ozgerde-vorgangsportal.js and the d.ts file for it is not named after the package but is mainWebComponent.ts But should start like the package name ozgerde-vorgangsportal

@qmhc qmhc reopened this Oct 13, 2022
@qmhc qmhc added the pending Need further confirmation label Oct 13, 2022
@qmhc
Copy link
Owner

qmhc commented Oct 13, 2022

You add skipDiagnostics: false and logDiagnostics: true to plugin options and run build again, it there any type errors?

@jnachtigall
Copy link
Author

Added these options, but I do not see any type errors in the output:

$ npm run buildLib

> ozgerde-vorgangsportal@1.0.0 buildLib
> tsc && vite --config vite-lib.config.ts build

vite v3.1.0 building for production...
✓ 410 modules transformed.
dist-lib/ozgerde-vorgangsportal.js   126.24 KiB / gzip: 35.05 KiB

[vite:dts] Start generate declaration files...
[vite:dts] Start rollup declaration files...
error during build:
Error: Internal Error: getResolvedModule() could not resolve module name "./mainWebComponent"
/home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/dist-lib/ozgerde-vorgangsportal.d.ts:1:1

You have encountered a software defect. Please consider reporting the issue to the maintainers of this application.
    at ExportAnalyzer._fetchSpecifierAstModule (/home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/@microsoft/api-extractor/lib/analyzer/ExportAnalyzer.js:676:19)
    at ExportAnalyzer.fetchAstModuleFromSourceFile (/home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/@microsoft/api-extractor/lib/analyzer/ExportAnalyzer.js:112:65)
    at AstSymbolTable.fetchAstModuleFromWorkingPackage (/home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/@microsoft/api-extractor/lib/analyzer/AstSymbolTable.js:83:37)
    at Collector.analyze (/home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/@microsoft/api-extractor/lib/collector/Collector.js:155:51)
    at rollupDeclarationFiles (file:///home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/vite-plugin-dts/dist/index.mjs:176858:13)
    at Object.closeBundle (file:///home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/vite-plugin-dts/dist/index.mjs:177171:11)
    at async Promise.all (index 0)
    at async PluginDriver.hookParallel (file:///home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/rollup/dist/es/shared/rollup.js:22638:9)
    at async Object.close (file:///home/jnachtigall/dev/erd/ozg-erde-formcycle/modules/vgp-frontend/vite-app/node_modules/rollup/dist/es/shared/rollup.js:23709:13)
    at async Promise.all (index 0)

I think the build error is because within dist-lib there is ozgerde-vorgangsportal.d.ts whose content is:

export * from './mainWebComponent'

But in dist-lib there is no mainWebComponent.ts file. Hence it cannot be resolved. Only in src/ this file exists

@qmhc
Copy link
Owner

qmhc commented Oct 13, 2022

Just strange, Would you mind sharing your project or provide a reproduction?

@jnachtigall
Copy link
Author

jnachtigall commented Oct 13, 2022

I've set up a repo at https://github.com/jnachtigall/vite-plugin-dts-126-bug and sent you an invitation. You can toggle rollupTypes: true to make it work / not work. Do npm install then npm run buildLib to get the error. See package.json for the used scripts.

@qmhc
Copy link
Owner

qmhc commented Oct 13, 2022

I see there is not any export in mainWebComponent.ts, so it will not be a module in typescript.

@jnachtigall
Copy link
Author

yes, the plan is that the lib is used in the consuming app with import "ozgerde-vorgangsportal" (which works) and then you can use the web component as <ozgerde-vorgangsportal></ozgerde-vorgangsportal> (also works, if one ignores the JSX declaration typescript error). So to avoid the JSX error the src/webcomponent-custom-element.d.ts needs to be exported. But this rather concerns #127

Even there's no export, the process should not error.

@qmhc
Copy link
Owner

qmhc commented Oct 13, 2022

You need to export something to make it as a moudle, such as export default WebComponent.

@qmhc qmhc closed this as completed Nov 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending Need further confirmation
Projects
None yet
Development

No branches or pull requests

2 participants