search

sveltejs / kit

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

unexpected behavior when run `npm run dev` after set config.paths.base in svelte.config.js #2465

Closed xcao38 closed 2 years ago

xcao38 commented 2 years ago

Describe the bug

After set config as following in svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
import node from '@sveltejs/adapter-node';

const config = {
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: node({
            // default options are shown
            out: 'build',
            precompress: false,
            env: {
                host: 'HOST',
                port: 'PORT'
            }
        }),
        paths: {
            assets: '',
            base: '/testdir'
        }
    }
};

export default config;
  1. Run npm run dev: In http://localhost:3000/testdir, I got the following: 
    Error: Not found: 
at resolve (file:///Users/xiaofengcao/projects/svelte/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1728:13)
at async Object.handle (//Users/xiaofengcao/projects/svelte/my-app/src/hooks:13:19)
at async respond (file:///Users/xiaofengcao/projects/svelte/my-app/node_modules/@sveltejs/kit/dist/ssr.js:1675:10)
at async svelteKitMiddleware (file:///Users/xiaofengcao/projects/svelte/my-app/node_modules/@sveltejs/kit/dist/chunks/index.js:4531:22)
  2. Run npm run build & npm run preview:
    • app was successfully built
    • after npm run preview, a lot of js and css file did not picked up, please see the errors in the web console. image

Reproduction

Step 1: start a sveltekit app: https://kit.svelte.dev/

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

Step 2: change svelte.config.js to following:

/** @type {import('@sveltejs/kit').Config} */
import node from '@sveltejs/adapter-node';

const config = {
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        adapter: node({
            // default options are shown
            out: 'build',
            precompress: false,
            env: {
                host: 'HOST',
                port: 'PORT'
            }
        }),
        paths: {
            assets: '',
            base: '/testdir'
        }
    }
};

export default config;

Step 3: install @sveltejs/adapter-node

npm i -D @sveltejs/adapter-node@next

Then run npm run dev or npm run build and npm run preview.

Logs

No response

System Info

npx: installed 1 in 1.189s

  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 11.10 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 90.0.2
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.49 => 1.0.0-next.49 
    @sveltejs/kit: next => 1.0.0-next.170 
    svelte: ^3.34.0 => 3.42.6

Severity

blocking all usage of SvelteKit

Additional Information

We are trying to release a sveltekit app under a sub url. This is seriously blocking our deployment.

benmccann commented 2 years ago

We just released a change affecting kit.paths.base (changelog. CC @Karlinator). Do you get the same error with version 1.0.0-next.169?

Karlinator commented 2 years ago

This is only an issue in preview, right? I think this is just #2409 showing up?

Does it run correctly with npm run dev and when using the node adapter (node build after npm run build)? If it does, then this should be fixed by #2409

xcao38 commented 2 years ago

This is only an issue in preview, right? I think this is just #2409 showing up?

Does it run correctly with npm run dev and when using the node adapter (node build after npm run build)? If it does, then this should be fixed by #2409

@benmccann @Karlinator thanks. Do you mind show me the command to upgrade to the latest version?

Karlinator commented 2 years ago

@xcao38 #2409 isn't merged yet, so you won't get it even with upgrading. It'll probably be live soon-ish though. If your package.json has explicit version names (say, 1.0.0-next.169) you can just change that and run npm i. Also npm i -D @sveltejs/kit@1.0.0-next.170 will do the trick. If you have the version just specified as next then a simple npm update (or npm update @sveltejs/kit I think) will update.

benmccann commented 2 years ago

This is only an issue in preview, right?

Not according to the issue report which says its an issue in dev and preview:

Then run npm run dev or npm run build and npm run preview.

Karlinator commented 2 years ago

Ugh, my eyes betray me.

There might be a similar issue in the dev server, I haven't looked. I'm not as familiar with Vite and all that, but that would be my guess.

There is this line: https://github.com/sveltejs/kit/blob/7dec53ecc66793841cf7702cb8d7453bb5cb5bad/packages/kit/src/core/dev/index.js#L296

Maybe assets are rejected at that point?

Karlinator commented 2 years ago

@xcao38 do you have the full path of the files the browser is requesting? Is it requesting all assets in the correct locations (/testdir/_app/whatever) in both dev and preview (and are the paths the same in dev and preview)?

If those paths are all correct then I think we have one bug in preview (already known) and a separate but similar bug in dev (manifests the same, but caused differently since dev and preview servers are quite different internally, what with Vite etc).

xcao38 commented 2 years ago

@xcao38 do you have the full path of the files the browser is requesting? Is it requesting all assets in the correct locations (/testdir/_app/whatever) in both dev and preview (and are the paths the same in dev and preview)?

If those paths are all correct then I think we have one bug in preview (already known) and a separate but similar bug in dev (manifests the same, but caused differently since dev and preview servers are quite different internally, what with Vite etc).

I could show you my file structure. Not sure where to find the files... Let me know if you need anything :)

image

Karlinator commented 2 years ago

I meant the network log from the browser 😅 I want to see if the links and source urls embedded into the page are correct. In your devtools 'Network' tab you can click on the requests and just see if the Request URLs all have '/testdir/' in them. They should look like localhost:3000/testdir/_app/pages/whatever. If tehy look like localhost:3000/_app/pages/whatever (without 'testdir' in tehm) then we have a different problem.

xcao38 commented 2 years ago

I meant the network log from the browser 😅 I want to see if the links and source urls embedded into the page are correct. In your devtools 'Network' tab you can click on the requests and just see if the Request URLs all have '/testdir/' in them. They should look like localhost:3000/testdir/_app/pages/whatever. If tehy look like localhost:3000/_app/pages/whatever (without 'testdir' in tehm) then we have a different problem.

Here you go: image

xcao38 commented 2 years ago

Hi @Karlinator thanks for the quick turnaround! Just curious, is there a timeline on releasing the new updates on paths.base?

benmccann commented 2 years ago

The pretender change is in 170 and the preview mode change is in 171: https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md

Karlinator commented 2 years ago

I don't think 170 or 171 actually fixes the dev mode issue here. 170 fixed an issue in pre-rendering, 171 fixed an issue in the preview server. I haven't had time to reproduce and go digging, but it looks like there's a separate issue in the dev server.

xcao38 commented 2 years ago

@benmccann @Karlinator Thanks both for your time! FWIW, I upgraded my sveltekit to 171 with following: npm add -D @sveltejs/kit@1.0.0-next.171.

Then I run npm run build and npm run preview, the problem with assets not found is gone. What I can see on my screen and console is as following:

Broswer:

image

Console:

image image

Terminal:

(base) Xiaofengs-MacBook-Pro:my-app xiaofengcao$ npm run preview

> my-app@0.0.1 preview /Users/xiaofengcao/projects/svelte/my-app
> svelte-kit preview

  SvelteKit v1.0.0-next.171

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network

My package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
  },
  "devDependencies": {
    "@sveltejs/adapter-node": "^1.0.0-next.49",
    "@sveltejs/kit": "^1.0.0-next.171",
    "svelte": "^3.34.0"
  },
  "type": "module",
  "dependencies": {
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "cookie": "^0.4.1"
  }
}
Karlinator commented 2 years ago

I believe you need the trailing slash, so localhost:3000/testdir/.

xcao38 commented 2 years ago

I believe you need the trailing slash, so localhost:3000/testdir/.

Thank you! very helpful. Yeah it did the trick:)

maiertech commented 2 years ago

This is still an issue in 177. Once you revert to Vite for previewing, will this fix the issue when there is no trailing /?

benmccann commented 2 years ago

I don't think we'll use Vite for preview mode actually. What they do for their preview mode is too different (e.g. it doesn't do SSR at all)

benmccann commented 2 years ago

Closing this as a duplicate of https://github.com/sveltejs/kit/issues/2958