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

Cannot run a newly created project #2001

Closed
chrisolsen opened this issue Jul 23, 2021 · 38 comments
Closed

Cannot run a newly created project #2001

chrisolsen opened this issue Jul 23, 2021 · 38 comments
Labels
bug Something isn't working vite

Comments

@chrisolsen
Copy link

Describe the bug

After creating a new project and attempting to start it up with npm run dev, I get the following

ENOENT: no such file or directory, open '/home/chris/Projects/community-sveltekit/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'

Note the duplicate portion of the path .svelte-kit/dev/components

SvelteKit v1.0.0-next.137

Reproduction

https://github.com/chrisolsen/bug-sveltekit

➜ Projects npm init svelte@next community-sveltekit
npx: installed 5 in 1.004s

create-svelte version 2.0.0-next.76

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

If you encounter a problem, open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … No / Yes
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Copied project files
✔ Added TypeScript support. To use it inside Svelte components, add lang="ts" to the attributes of a script tag.
✔ Added ESLint.
Readme for ESLint and Svelte: https://github.com/sveltejs/eslint-plugin-svelte3
✔ Added Prettier.
General formatting options: https://prettier.io/docs/en/options.html
Svelte-specific formatting options: https://github.com/sveltejs/prettier-plugin-svelte#options

Want to add other parts to your code base? Visit https://github.com/svelte-add/svelte-adders, a community project of commands to add particular functionality to Svelte projects

Next steps:
1: cd community-sveltekit
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional step)
4: npm run dev -- --open

============
➜ community-sveltekit git:(master) npm run dev

TODO@0.0.1 dev /home/chris/Projects/community-sveltekit
svelte-kit dev

SvelteKit v1.0.0-next.137

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

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

ENOENT: no such file or directory, open '/home/chris/Projects/community-sveltekit/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
Error: ENOENT: no such file or directory, open '/home/chris/Projects/community-sveltekit/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
ENOENT: no such file or directory, open '/home/chris/Projects/community-sveltekit/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
Error: ENOENT: no such file or directory, open '/home/chris/Projects/community-sveltekit/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'

Logs

No response

System Info

➜  community-sveltekit git:(master) npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
npx: installed 1 in 0.753s

  System:
    OS: Linux 4.19 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 16.92 GB / 25.02 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.20.2 - ~/.nvm/versions/node/v12.20.2/bin/node
    npm: 6.14.11 - ~/.nvm/versions/node/v12.20.2/bin/npm
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.137 
    svelte: ^3.34.0 => 3.40.2

Severity

blocking all usage of SvelteKit

Additional Information

No response

@chrisolsen
Copy link
Author

I noticed after pasting my system info that the project was running on node 12.x. After switching to the LTS with nvm and recreating the project everything then worked.

@itseMeCode
Copy link

itseMeCode commented Jul 23, 2021

Got the same problem also with node 14.17.3.
Demo app is working.

@s0kil
Copy link

s0kil commented Jul 23, 2021

Have the same issue, was just installing node 14.17.3 LTS to test

@s0kil
Copy link

s0kil commented Jul 23, 2021

Here is the error

ENOENT: no such file or directory, open '/home/danielsokil/Lab/s0kil/ECM/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
Error: ENOENT: no such file or directory, open '/home/danielsokil/Lab/s0kil/ECM/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
ENOENT: no such file or directory, open '/home/danielsokil/Lab/s0kil/ECM/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'
Error: ENOENT: no such file or directory, open '/home/danielsokil/Lab/s0kil/ECM/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'

@s0kil
Copy link

s0kil commented Jul 23, 2021

Work around is to explicitly use svelte version 3.40.1, "svelte": "3.40.1" in package.json

@s0kil
Copy link

s0kil commented Jul 23, 2021

Turns out that sveltejs/svelte#6089 is the root cause of this issue, checking out that commit triggers the error mentioned above "svelte": "github:sveltejs/svelte#4ca2af41df436ef97cd1953eb67c2c4922a8257b"

@Conduitry
Copy link
Member

@itseMeCode @s0kil I can't reproduce this with a fresh SvelteKit project, although I haven't tried every permutation of options in the starter script. What are you doing that's leading you to this issue, what package manager are you using, etc?

@s0kil
Copy link

s0kil commented Jul 24, 2021

@Conduitry I'm using pnpm, node 14.17.3, a starter svelte kit project with the static adapter. Created the project with npm init svelte@next my-app

@Conduitry
Copy link
Member

I can't reproduce this with pnpm dev or pnpm build when using the static adapter, for either the JS- or TS-based demo app.

@s0kil
Copy link

s0kil commented Jul 24, 2021

I've created a new, typescript, eslint, prettier project, added adapter static, updated the packages to latest versions and the error is the same:

Error: ENOENT: no such file or directory, open '/home/danielsokil/Extra/svelte-kit-issue-2001/.svelte-kit/dev/components/.svelte-kit/dev/components/layout.svelte'

Here is the repo: https://github.com/s0kil/svelte-kit-issue-2001

@molebox
Copy link

molebox commented Jul 24, 2021

Im also getting this error. Clean install (JS, eslint and prettier), skeleton project. Tried switching to node v12 with nvm, still getting error.

@basaran
Copy link
Contributor

basaran commented Jul 24, 2021

it seems only the skeleton project is affected. I have been working on creating a lint based carbon skeleton since yesterday, and had made a commit with the last working skeleton:

https://github.com/basaran/sveltekit-carbon

It seems the new one being created is different too. Don't have the layout file.

@jessevermeulen
Copy link

jessevermeulen commented Jul 24, 2021

Same problem here after bumping svelte/kit to 1.0.0-next.137.

@basaran
Copy link
Contributor

basaran commented Jul 24, 2021

my yarn.lock from last night is still working with the new skeleton if you copy it prior to yarn install.

https://github.com/basaran/sveltekit-carbon/blob/master/yarn.lock

image

@jessevermeulen
Copy link

As @s0kil suggested, downgrading to svelte: 3.40.1 did the trick.

@vibhanshu909
Copy link

Hey Guys,
I am facing the same problem, I found a workaround:
So, for some reason, SvelteKit is expecting a script tag with at least one valid expression for __layout/page to work.

Example:

Let's create a new skeleton project.
Install the dependencies.
Since there is no __layout.svelte file, let's create one.
Add the following contents to the __layout.svelte file:

<script>
	0;
</script>
<slot />

Add the following content to index.svelte file:

<script>
	0;
</script>

<p>
	Try editing <strong>src/routes/index.svelte</strong>
</p>

And this seems to fix this issue somehow. Maybe one of SvelteKit's maintainers/contributors can throw some light on it.

I am using node 14.17.0.

@simmo
Copy link

simmo commented Jul 24, 2021

I'm running NPM @ 7.20.1, Node @ 14.7.3, with Svelte kit @ 1.0.0-next.137.

When running with Svelte @ 3.40.1 there is no issue but updating to 3.40.2 throws the following:

ENOENT: no such file or directory, open '/Users/Mike/Sites/personal/src/lib/icons/src/lib/icons/GitHub.svelte'

The file in question should be '/Users/Mike/Sites/personal/src/lib/icons/GitHub.svelte' so it appears that part of the path is being duplicated.

The file is referenced as import GitHub from '$lib/icons/GitHub.svelte';. Inside a Footer Svelte component. The footer Svelte component is imported by __layout. Refreshing the app seems to loop through several files throwing a duplicated path.

One thing I've noticed is that direct child imports inside of __layout seem to be ok, but anything deeper throws.

As mentioned by others rolling back to 3.40.1 resolves.

@simmo
Copy link

simmo commented Jul 24, 2021

Also worth saying that this throws in dev but on Vercel I'm not seeing this issue.

@firewave-remo
Copy link

Same Problem here. Updated an existing Project from SvelteKit v1.0.0-next.131 to 137 und svelte version to 3.40.2.

Can confirm that with svelte 3.40.1 the problem does not exist.

node: v14.17.2

@molebox
Copy link

molebox commented Jul 24, 2021

So coming back around to this. Ive tried all the above solutions:

  • use node 12
  • svelte 3.40.1
  • added a __layout.svelte component

FWIW ive delete node_modules and lock file too.

None of the above worked.

EDIT: I didnt explicitly do 3.40.1, i had ^3.40.1. Can confirm this works

EDIT 2: I still needed the __layout.svelte file

@nstuyvesant
Copy link
Contributor

nstuyvesant commented Jul 24, 2021

I am seeing this issue with:
Node 16.5.0
SvelteKit 1.0.0-next-137
Svelte 3.40.2

Worked around it with

<script>
let workaround = true
</script>

@kampsy
Copy link

kampsy commented Jul 25, 2021

Same problem when i create a new skeleton project

Node v14.17.3
SvelteKit v1.0.0-next.137
Svelte v3.34.0

What works for me

  1. npm init svelte@next my-app
  2. cd my-app
  3. replace "svelte": "^3.34.0" with "svelte": "3.40.1" in package.json
  4. create __layout.svelte file in src/routes and add <slot></slot>
  5. npm install
  6. npm run dev -- --open

@antony antony added the bug Something isn't working label Jul 25, 2021
@antony
Copy link
Member

antony commented Jul 25, 2021

@kampsy you don't need to create the __layout.svelte file. Just upgrading Svelte fixes it.

@molebox
Copy link

molebox commented Jul 25, 2021

@kampsy you don't need to create the __layout.svelte file. Just upgrading Svelte fixes it.

This wasnt true for me. I had to create the __layout.svelte file too. Also, its a downgrade 3.34.0 > 3.40.1. But, tomato, tomato and all that jazz

@kampsy
Copy link

kampsy commented Jul 25, 2021

@antony like @molebox points out. It doesn't work without layout for me.

@joeczar
Copy link

joeczar commented Jul 25, 2021

Hi, I've had no success with the same setup as @kampsy. I added the __layout.svelte and upgraded to 3.40.1. The Error has changed to not being able to find the __layout.svelte.

https://github.com/joeczar/sveltekit-portfolia

@kampsy
Copy link

kampsy commented Jul 25, 2021

@joeczar remove "^" from "svelte": "^3.40.1" then run npm install
Screenshot from 2021-07-25 13-29-18

its working for me
Screenshot from 2021-07-25 13-28-15

Screenshot from 2021-07-25 13-32-55

@joeczar
Copy link

joeczar commented Jul 25, 2021

Thanks @kampsy! It's running now.

@joelhickok
Copy link

Still having this problem despite comments immediately above. Didn't take the time to read all the comments above, but all I can say is just ensure that each .svelte template includes a script tag with at least one valid line of JavaScript. I'm using svelte 3.40.2 and @sveltejs/kit 1.0.0-next.137.

Such as:

<script>
    console.log('test')
</script>

@donpark
Copy link

donpark commented Jul 26, 2021

Downgrading to "svelte": "3.40.1" fixed it for me. "@sveltejs/kit" version is "1.0.0-next.137".

In my case, it was import FooBar from "$lib/FooBar.svelte" throwing ENOENT error showing file path with .../src/lib/src/lib/FooBar.svelte when running with svelte-kit dev but not with svelte-kit preview.

@dominikg
Copy link
Member

Just found this PR on vite: vitejs/vite#2904 that looks like it fixes this (and may log a warning for the invalid sourcemap source)

@Conduitry
Copy link
Member

From my local tests with the latest HEAD of Vite, it looks like this issue is already resolved, and so hopefully that PR will be included in tomorrow's Vite release.

I am also getting the warnings about Sourcemap for "/foo/.svelte-kit/dev/components/layout.svelte" points to missing source files.

@dominikg I'm still not entirely sure what sveltejs/svelte#6089 was initially intended to do. Does this warning we'd now be getting from Vite indicate that there is in fact something wrong with our sourcemaps, but it's just that Vite will be able to cope better with that?

@Conduitry Conduitry added the vite label Jul 26, 2021
@dominikg
Copy link
Member

@dummdidumm would know better but it seems like that PR adds a missing source entry to the first map when combining sourcemaps to avoid a potential upstream issue in remapping.

The added source entry caused vite to attempt to read the source but the constructed path to that is wrong (see duplicate .svelte-kit/dev/components/ in description) and errors. The next vite version scheduled to be released tomorrow (27.) prints a warning instead, unblocking the use of svelte 3.40.2.

We still need to figure out why that path is wrong, but the warnings from vite might help with that.

TL;DR For those affected by this issue:
With vite <= 2.4.3 , use svelte <= 3.40.1
Once vite 2.4.4 (or 2.5.0) has been released, you can update vite and svelte to try again.

@jacktho
Copy link

jacktho commented Jul 26, 2021

This is still happening with 3.40.3 (as expected per dominikg's comment I guess).

@dominikg
Copy link
Member

vite 2.4.4 has been released and the skeleton project works again.

Instead of an error, vite just prints a warning now.

dominikg@mb14:~/develop/reproductions/kit-vite-244$ pnpm ls vite --depth=Infinity
Legend: production dependency, optional only, dev only

~TODO~@0.0.1 /home/dominikg/develop/reproductions/kit-vite-244

devDependencies:
@sveltejs/kit 1.0.0-next.137
├─┬ @sveltejs/vite-plugin-svelte 1.0.0-next.14
│ └── vite 2.4.4 peer
└── vite 2.4.4
dominikg@mb14:~/develop/reproductions/kit-vite-244$ pnpm dev

> ~TODO~@0.0.1 dev /home/dominikg/develop/reproductions/kit-vite-244
> svelte-kit dev


  SvelteKit v1.0.0-next.137

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

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


Sourcemap for "/home/dominikg/develop/reproductions/kit-vite-244/.svelte-kit/dev/components/layout.svelte" points to missing source files
Sourcemap for "/home/dominikg/develop/reproductions/kit-vite-244/src/routes/index.svelte" points to missing source files

@alexbruno
Copy link

I think the point is /src/routes/path/index.svelte files.
I have a project made from a Skeleton that was working with no errors or warnings.
But when I create a /src/routes/blog/index.svelte it raises the error.
Update Vite version fix it with this warning above.

@eden-lane
Copy link

I'm not sure why is it closed. What is the solution?

@alexbruno
Copy link

@eden-lane try to uninstall and reinstall @sveltejs/kit.
By doing it you will get it with the latest Vite version. It fixes the error, but shows warnings for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vite
Projects
None yet
Development

No branches or pull requests