Framework7 Installation with Svelte using CLI

I am using CLI installation on npm 9 and node 16 for svelte
After firing npm install and npm start this error occured:

X [ERROR] [plugin externalize-deps] Failed to resolve entry for package "@sveltejs/vite-plugin-svelte". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "@sveltejs/vite-plugin-svelte" package

    node_modules/esbuild/lib/main.js:1357:27:
      1357 │         let result = await callback({
           ╵                            ^

    at packageEntryFailure (file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21822:11)
    at resolvePackageEntry (file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21817:9)
    at tryNodeResolve (file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21557:20)
    at file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:62013:40
    at requestCallbacks.on-resolve (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1357:28)
    at handleRequest (D:\workspace\f7test\node_modules\esbuild\lib\main.js:723:19)
    at handleIncomingPacket (D:\workspace\f7test\node_modules\esbuild\lib\main.js:745:7)
    at Socket.readFromStdout (D:\workspace\f7test\node_modules\esbuild\lib\main.js:673:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1281:20:
      1281 │       let promise = setup({
           ╵                     ^

    at setup (file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:62002:27)
    at handlePlugins (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1281:21)
    at buildOrServeImpl (D:\workspace\f7test\node_modules\esbuild\lib\main.js:970:5)
    at Object.buildOrServe (D:\workspace\f7test\node_modules\esbuild\lib\main.js:776:5)
    at D:\workspace\f7test\node_modules\esbuild\lib\main.js:2117:17
    at new Promise (<anonymous>)
    at Object.build (D:\workspace\f7test\node_modules\esbuild\lib\main.js:2116:14)
    at build (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1963:51)
    at bundleConfigFile (file:///D:/workspace/f7test/node_modules/vite/dist/node/chunks/dep-0bae2027.js:61966:26)

  The plugin "externalize-deps" was triggered by this import

    vite.config.js:3:23:
      3 │ import { svelte } from '@sveltejs/vite-plugin-svelte';
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from D:\workspace\f7test\vite.config.js
error when starting dev server:
Error: Build failed with 1 error:
node_modules/esbuild/lib/main.js:1357:27: ERROR: [plugin: externalize-deps] Failed to resolve entry for package "@sveltejs/vite-plugin-svelte". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." entry in "@sveltejs/vite-plugin-svelte" package
    at failureErrorWithLog (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1596:15)
    at D:\workspace\f7test\node_modules\esbuild\lib\main.js:1052:28
    at runOnEndCallbacks (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1468:61)
    at buildResponseToResult (D:\workspace\f7test\node_modules\esbuild\lib\main.js:1050:7)
    at D:\workspace\f7test\node_modules\esbuild\lib\main.js:1162:14
    at responseCallbacks.<computed> (D:\workspace\f7test\node_modules\esbuild\lib\main.js:697:9)
    at handleIncomingPacket (D:\workspace\f7test\node_modules\esbuild\lib\main.js:752:9)
    at Socket.readFromStdout (D:\workspace\f7test\node_modules\esbuild\lib\main.js:673:7)
    at Socket.emit (node:events:527:28)
    at addChunk (node:internal/streams/readable:315:12)

the created vite.config.js is as follow:


import path from 'path';
import { svelte } from '@sveltejs/vite-plugin-svelte';



const SRC_DIR = path.resolve(__dirname, './src');
const PUBLIC_DIR = path.resolve(__dirname, './public');
const BUILD_DIR = path.resolve(__dirname, './www',);

export default {
  plugins: [
    svelte(),

  ],
  root: SRC_DIR,
  base: '',
  publicDir: PUBLIC_DIR,
  build: {
    outDir: BUILD_DIR,
    assetsInlineLimit: 0,
    emptyOutDir: true,
    rollupOptions: {
      treeshake: false,
    },
  },
  resolve: {
    alias: {
      '@': SRC_DIR,
    },
  },
  server: {
    host: true,
  },

};

Had same issue with latest version of ‘vite’ and ‘@sveltejs/vite-plugin-svelte’ and quick fix is to downgrade ‘vite’ and ‘@sveltejs/vite-plugin-svelte’ to

@sveltejs/[email protected]
[email protected]

Yes, svelte plugin should be downgraded to v1

npm i @sveltejs/vite-plugin-svelte@1

it is fixed in latest CLI update

Thanks, but on ‘npm install’, I got

Zacks-MBP:test23 zmilosevich$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @sveltejs/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.4" from the root project
npm ERR!   peerOptional vite@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/vitefu
npm ERR!     vitefu@"^0.2.2" from @sveltejs/[email protected]
npm ERR!     node_modules/@sveltejs/vite-plugin-svelte
npm ERR!       dev @sveltejs/vite-plugin-svelte@"^1.4.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/vite-plugin-svelte
npm ERR!   dev @sveltejs/vite-plugin-svelte@"^1.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.0.0" from @sveltejs/[email protected]
npm ERR!   node_modules/@sveltejs/vite-plugin-svelte
npm ERR!     dev @sveltejs/vite-plugin-svelte@"^1.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

…and it works when I run,

npm --force install

The issue remains, and
@sveltejs/[email protected]
[email protected]
is still the only solution I could find (apart from
@sveltejs/[email protected]
[email protected])