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

Dev server fails to run on unmodified svelte-ts template #3834

Closed
6 tasks done
callumlocke opened this issue Jun 16, 2021 · 7 comments · Fixed by #3835
Closed
6 tasks done

Dev server fails to run on unmodified svelte-ts template #3834

callumlocke opened this issue Jun 16, 2021 · 7 comments · Fixed by #3835
Labels
p2-edge-case Bug, but has workaround or limited in scope (priority)

Comments

@callumlocke
Copy link

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
Copy link
Contributor

dominikg commented Jun 16, 2021

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

@patak-dev patak-dev added bug p2-edge-case Bug, but has workaround or limited in scope (priority) and removed pending triage labels Jun 16, 2021
@lukasmwerner
Copy link

lukasmwerner commented Jun 16, 2021

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
Copy link
Member

bluwy commented Jun 17, 2021

Related: sveltejs/vite-plugin-svelte#61

@chaosprint
Copy link

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
Copy link
Contributor

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)

@chaosprint
Copy link

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)

Thanks!

@github-actions
Copy link

This issue gets locked because it has been closed for more than 14 days.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 13, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants