search

sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.45k stars 1.89k forks source link

Having issue with svelte-package #9118

Open Ddupasquier opened 1 year ago

Ddupasquier commented 1 year ago

Updates:

index.d.ts now being created/newError

Describe the bug

When running "npm run package", I get this error:

mysvelte-ui lint results:
Errors:
1. pkg.exports["."].types is ./dist/index.d.ts but the file does not exist.
2. pkg.types is ./dist/index.d.ts but the file does not exist.

For some reason the package script isn't generating my ts properly and I'm having an impossible time debugging it.

Here is what my package.json looks like:

"files": [
    "dist/index.js",
    "dist/buttons",
    "dist/inputs"
  ],
  "scripts": {
    "dev": "vite dev",
    "build": "vite build && npm run package",
    "preview": "vite preview",
    "package": "svelte-kit sync && svelte-package && publint",
    "prepublishOnly": "npm run package && publint",
    "test": "playwright test",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "test:unit": "vitest",
    "lint": "prettier --plugin-search-dir . --check . && eslint .",
    "format": "prettier --plugin-search-dir . --write ."
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    }
  },
  "peerDependencies": {
    "svelte": "^3.54.0"
  },
  "svelte": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "devDependencies": {
    "@fontsource/fira-mono": "^4.5.10",
    "@neoconfetti/svelte": "^1.0.0",
    "@sveltejs/adapter-auto": "^2.0.0",
    "@sveltejs/kit": "^1.5.0",
    "@sveltejs/package": "^2.0.1",
    "@types/cookie": "^0.5.1",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "eslint": "^8.28.0",
    "eslint-plugin-svelte3": "^4.0.0",
    "svelte-check": "^3.0.1",
    "svelte-highlight": "^7.2.0",
    "publint": "^0.1.9",
    "svelte": "^3.54.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "mysvelte-ui": "^0.0.11",
    "sass": "^1.58.1"
  },
  "type": "module"
}

Not entirely sure how relevant it is, but I've also included some pictures of my current file structure, as well as my dist content. image image image

Here is the link to my repo. https://github.com/Ddupasquier/mysvelte_ui

This error can easily be reproduced by running the build script.

Reproduction

Unfortunately I cannot think of a way to reproduce this on a smaller scale. You'll see the error at the end of the build script. https://github.com/Ddupasquier/mysvelte_ui/tree/4438db330a094619d33c0d927638eab19572e49c

Logs

> mysvelte-ui@0.0.12 package
> svelte-kit sync && svelte-package && publint

src/lib -> dist
mysvelte-ui lint results:
Errors:
1. pkg.exports["."].types is ./dist/index.d.ts but the file does not exist.
2. pkg.types is ./dist/index.d.ts but the file does not exist.

This is what I get in the logs while running npm publish:

20 verbose title npm publish
21 verbose argv "publish"
22 timing npm:load:setTitle Completed in 1ms
23 timing config:load:flatten Completed in 2ms
24 timing npm:load:display Completed in 2ms
25 verbose logfile logs-max:10 dir:/home/ddupasquier/.npm/_logs/2023-02-18T23_52_11_476Z-
26 verbose logfile /home/ddupasquier/.npm/_logs/2023-02-18T23_52_11_476Z-debug-0.log
27 timing npm:load:logFile Completed in 4ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 22ms
31 verbose publish [ '.' ]
32 silly logfile start cleaning logs, removing 1 files
33 silly logfile done cleaning log files
34 timing command:publish Completed in 3920ms
35 verbose stack Error: command failed
35 verbose stack     at ChildProcess.<anonymous> (/home/ddupasquier/.nvm/versions/node/v18.12.1/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:53:27)
35 verbose stack     at ChildProcess.emit (node:events:513:28)
35 verbose stack     at maybeClose (node:internal/child_process:1091:16)
35 verbose stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
36 verbose pkgid mysvelte-ui@0.0.12
37 verbose cwd /home/ddupasquier/mysvelte_ui
38 verbose Linux 5.10.16.3-microsoft-standard-WSL2
39 verbose node v18.12.1
40 verbose npm  v9.5.0
41 error code 1
42 error path /home/ddupasquier/mysvelte_ui
43 error command failed
44 error command sh -c npm run package && publint
45 verbose exit 1
46 timing npm Completed in 4005ms
47 verbose code 1
48 error A complete log of this run can be found in:
48 error     /home/ddupasquier/.npm/_logs/2023-02-18T23_52_11_476Z-debug-0.log

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 835.16 MB / 3.54 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.12.1/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
    @sveltejs/kit: ^1.5.0 => 1.5.6 
    @sveltejs/package: ^2.0.1 => 2.0.1 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.1

Severity

serious, but I can work around it

Additional Information

Sorry if this is lacking any crucial information. I'll be readily available to provide anything else needed.

seanlail commented 1 year ago

@Ddupasquier I think I found the issue with this - the store in your lib folder is importing from routes. So I think that's confusing the packager. Delete that and it should compile.

https://github.com/Ddupasquier/mysvelte_ui/blob/main/src/lib/stores/componentStore.ts#L3-L5

gtm-nayan commented 1 year ago

Thanks for narrowing it down sean. It seems the types gain additional nesting inside the output folder if you have imports from somewhere outside the input folder.

Minimal repro here: https://github.com/gtm-nayan/lib-extrainput-dts-repro and I think this needs to be fixed within svelte2tsx somewhere.

I'm baffled as to why the path just silently changes when adding the imports,

the options passed to ts.createCompilerHost are

{
  "paths": {
    "$lib": [
      "../src/lib"
    ],
    "$lib/*": [
      "../src/lib/*"
    ]
  },
  "rootDirs": [
    "/home/ciri/sveltejs/lib-extrainput-dts-repro",
    "/home/ciri/sveltejs/lib-extrainput-dts-repro/.svelte-kit/types"
  ],
  "importsNotUsedAsValues": 2,
  "isolatedModules": true,
  "preserveValueImports": true,
  "lib": [
    "lib.esnext.d.ts",
    "lib.dom.d.ts",
    "lib.dom.iterable.d.ts"
  ],
  "moduleResolution": 2,
  "module": 99,
  "target": 99,
  "pathsBasePath": "/home/ciri/sveltejs/lib-extrainput-dts-repro/.svelte-kit",
  "allowJs": true,
  "checkJs": true,
  "esModuleInterop": true,
  "forceConsistentCasingInFileNames": true,
  "resolveJsonModule": true,
  "skipLibCheck": true,
  "sourceMap": false,
  "strict": true,
  "configFilePath": "/home/ciri/sveltejs/lib-extrainput-dts-repro/tsconfig.json",
  "noEmit": false,
  "declaration": true,
  "emitDeclarationOnly": true,
  "declarationDir": "dist/__package_types_tmp__",
  "allowNonTsExtensions": true
}

nowhere does it mention the input folder so I'd expect the declarations to end up in dist/__package_types_tmp__/src/lib in either case with this config 🤔

seanlail commented 1 year ago

@gtm-nayan No worries. If it helps, I don't think this is an issue in svelte2tsx specifically. It's how TS compiles. I've seen this in node apps where they import "above" src, the output is always then weirdly nested because of that external import.

Perhaps a solution would be to do a check in the packager / svelte2tsx when it's complete and see if the output folder is in fact the one expected? I imagine it would be difficult to figure out which imports are "external" before running tsc.

gtm-nayan commented 1 year ago

Ahh, turns out this absurdity is documented thankfully, and the way to get the output path consistent is to set rootDir.

Although, I'm trying that out and while the lib files are working as intended, it's now generating adjacent .d.ts files for the files outside of input instead of ignoring/throwing on those imports.

wat 😕

Ddupasquier commented 1 year ago

So if I move 'stores' to be sibling to 'lib' this should ideally fix the issue?

dummdidumm commented 1 year ago

@gtm-nayan we set declarationDir for this in typescript.js

My idea for this:

gtm-nayan commented 1 year ago

pick output that's within /package_types_tmp/src/lib and move it to

that'd work, but cherry picking the output that way feels fragile for a few reasons:

  1. the input/output paths can be customized, so that needs some further bookkeeping
  2. still have to make a change in svelte2tsx to set rootDir so that the output path isn't dependent on the topmost file
  3. ts might end up doing more work than it needs to when it only needs to look at files in lib, emitting for files outside the input means something is configured wrong because in a plain TS project I'd get an error like this 
    src/lib/test.ts:1:21 - error TS6059: File '/home/ciri/sveltejs/huh/src/routes/test2.ts' is not under 'rootDir' '/home/ciri/sveltejs/huh/src/lib'. 'rootDir' is expected to contain all source files.
Ddupasquier commented 1 year ago

@Ddupasquier I think I found the issue with this - the store in your lib folder is importing from routes. So I think that's confusing the packager. Delete that and it should compile.

https://github.com/Ddupasquier/mysvelte_ui/blob/main/src/lib/stores/componentStore.ts#L3-L5

Moving the store to be sibling to lib has not fixed the issue.

Ddupasquier commented 1 year ago

New update:

I've moved everything from lib that does not have to do with the library I intend to publish to a new folder which is sibling to lib and routes. Now the index.d.ts file is being created in the dist directory BUT I'm getting a new error.

Errors:
1. pkg.exports["."].types is ./dist/index.d.ts but the file is not published. Is it specified in pkg.files?
2. pkg.types is ./dist/index.d.ts but the file is not published. Is it specified in pkg.files?

My package.json is the same as in my initial explanation of this issue, so you can refer to that. I will like this reply in the original issue as well.

Ddupasquier commented 1 year ago

New update:

I've moved everything from lib that does not have to do with the library I intend to publish to a new folder which is sibling to lib and routes. Now the index.d.ts file is being created in the dist directory BUT I'm getting a new error.

Errors:
1. pkg.exports["."].types is ./dist/index.d.ts but the file is not published. Is it specified in pkg.files?
2. pkg.types is ./dist/index.d.ts but the file is not published. Is it specified in pkg.files?

My package.json is the same as in my initial explanation of this issue, so you can refer to that. I will like this reply in the original issue as well.

Added, "dist/*" to pkg.files and it fixed the issue! I am now able to publish and I'm getting my types from the published library!