Dev server fails to run on unmodified svelte-ts template

[callumlocke]

Describe the bug

The dev server fails to launch in a brand new Vite project (out of the box, no changes) when using the svelte-ts template.

I've also tried vanilla and vanilla-ts, and these work fine. But svelte-ts doesn't work.

Reproduction

Just run this:

> yarn create @vitejs/app demo --template svelte-ts && cd demo && yarn && yarn dev

For me, the yarn dev fails (see log output further down).

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Memory: 62.39 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.15.1 - ~/.nvm/versions/node/v16.3.0/bin/npm
  Browsers:
    Brave Browser: 70.0.56.12
    Chrome: 91.0.4472.106
    Firefox: 85.0
    Safari: 14.0.3
  npmPackages:
    vite: ^2.3.7 => 2.3.7

Used package manager: yarn

Logs

❯ yarn create @vitejs/app demo --template svelte-ts && cd demo && yarn && yarn dev
yarn create v1.22.10
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "@vitejs/create-app@2.4.3" with binaries:
      - create-app
      - cva

Scaffolding project in /Users/callum/code/demo...

Done. Now run:

  cd demo
  yarn
  yarn dev

✨  Done in 7.37s.
yarn install v1.22.10
warning package.json: No license field
warning ../../package.json: No license field
info No lockfile found.
warning No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@sveltejs/vite-plugin-svelte > @rollup/pluginutils@4.1.0" has unmet peer dependency "rollup@^1.20.0||^2.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 45.34s.
yarn run v1.22.10
warning package.json: No license field
warning ../../package.json: No license field
$ vite
(node:67552) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[vite-plugin-svelte] failed to import config /Users/callum/code/demo/svelte.config.js
/Users/callum/code/demo/svelte.config.js:1
import sveltePreprocess from 'svelte-preprocess'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:201:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:175:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
[vite-plugin-svelte] failed to require config /Users/callum/code/demo/svelte.config.js
/Users/callum/code/demo/svelte.config.js:1
import sveltePreprocess from 'svelte-preprocess'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at loadSvelteConfig (/Users/callum/code/demo/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:416:14)
    at async resolveOptions (/Users/callum/code/demo/node_modules/@sveltejs/vite-plugin-svelte/dist/index.cjs:619:24)
error when starting dev server:
/Users/callum/code/demo/svelte.config.js:1
import sveltePreprocess from 'svelte-preprocess'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:353:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:201:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:175:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[dominikg]

please add "type": "module" to package.json (this is a bug in the template, i'll fix that asap.)

[lukasmwerner]

Hi 👋 I implemented the fix in my own project and it still does not seem to work?

failed to load config from B:\Github Desktop\Prisim\port-hole\vite.config.js
error when starting dev server:
file:///B:/Github%20Desktop/Prisim/port-hole/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:214
import { createMakeHot } from "svelte-hmr";
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'svelte-hmr' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'svelte-hmr';
const { createMakeHot } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:135:5)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async loadConfigFromFile (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:70684:31)
    at async resolveConfig (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:70307:28)
    at async createServer (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68853:20)
    at async CAC.<anonymous> (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\cli.js:13892:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @0.0.0 dev: `vite`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lukas\AppData\Roaming\npm-cache\_logs\2021-06-16T21_58_07_095Z-debug.log

And after trying to patch much more it seems that I am absolutely not qualified to fix this on my own.

> @0.0.0 dev B:\Github Desktop\Prisim\port-hole
> vite

failed to load config from B:\Github Desktop\Prisim\port-hole\vite.config.js
error when starting dev server:
file:///B:/Github%20Desktop/Prisim/port-hole/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:314
import { normalizePath } from "vite";
         ^^^^^^^^^^^^^
SyntaxError: The requested module 'vite' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'vite';
const { normalizePath } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:135:5)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async loadConfigFromFile (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:70684:31)
    at async resolveConfig (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:70307:28)
    at async createServer (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\chunks\dep-bc228bbb.js:68853:20)
    at async CAC.<anonymous> (B:\Github Desktop\Prisim\port-hole\node_modules\vite\dist\node\cli.js:13892:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @0.0.0 dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lukas\AppData\Roaming\npm-cache\_logs\2021-06-16T22_05_00_268Z-debug.log

[bluwy]

Related: sveltejs/vite-plugin-svelte#61

[chaosprint]

please add "type": "module" to package.json (this is a bug in the template, i'll fix that asap.)

perhaps this should be optional or asked in prompt.

As having "type": "module" causes errors for other stuff such as this:
windicss/windicss#368

[dominikg]

see my response there, and also the discussions of this PR #3835 type: module is the default for svelte projects. You can remove it if you don't want to use it but i don't think this should be made optional. (Would require work on create-app and also on other templates)