Vite+Core framework 7 project is producing error while running app

Questions
1

I created framework7 app with Vite as bundler with framework7 core. When i started the server, it produces following error:-

 ERROR  failed to load config from /home/lubuntu/Projects/hybrid/pdf4/vite.config.js                                          21:00:50


 ERROR  error when starting dev server:                                                                                        21:00:50
TypeError: (0 , import_vite_plugin_html.injectHtml) is not a function
    at Object.<anonymous> (/home/lubuntu/Projects/hybrid/pdf4/vite.config.js:40:44)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.require.extensions.<computed> [as .js] (/home/lubuntu/Projects/hybrid/pdf4/node_modules/vite/dist/node/chunks/dep-f5552faa.js:75170:20)                                                                                                                           
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (/home/lubuntu/Projects/hybrid/pdf4/node_modules/vite/dist/node/chunks/dep-f5552faa.js:75178:17)
    at loadConfigFromFile (/home/lubuntu/Projects/hybrid/pdf4/node_modules/vite/dist/node/chunks/dep-f5552faa.js:75097:32)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

vite.config.js contains following:-

import path from 'path';
import framework7 from 'rollup-plugin-framework7';

import { injectHtml } from 'vite-plugin-html';

process.env.TARGET = process.env.TARGET || 'web';
const isCordova = process.env.TARGET === 'cordova';

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

export default {
  plugins: [
    framework7({ emitCss: false }),
    injectHtml({
      injectData: {
        TARGET: process.env.TARGET,
      },
    }),
  ],
 root: SRC_DIR,
 base: '',
 publicDir: PUBLIC_DIR,
 build: {
   outDir: BUILD_DIR,
   assetsInlineLimit: 0,
   emptyOutDir: true,
 },
 resolve: {
   alias: {
   '@': SRC_DIR,
 },
},
server: {
   host: true,
},
esbuild: {
   jsxFactory: '$jsx',
  jsxFragment: '"Fragment"',
},
};

Also current version of my NPM is 8.1.2 and that of node is 16.13.1 which are greater than the requirements.
What is the cause of this error?

2

I had the same problem, have you solved it now?

3

├── [email protected]
I tried downgrading vite-plugin-html with version 2.1.2
it solved my problem for now

4

It is beacuse of vite-html-plugin vesrion 3

Run Follwing Command
npm install --save-dev [email protected]

1 Like
5

Fixed in Framework7 CLI 5.1.5

1 Like
6

Thank you so much Vladimir… :ok_hand: :+1:

7

@nolimits4web if i update to latest version of vite html did the same problem 3.2.0 it’s possible upgrade from a v6 without problem?
I did that for update all:

npm install -g npm-check-updates

then

ncu -u

final step:

npm update

Update i copied fresh vite config from new project and work but now i have another problem:

Internal server error: Missing "./components/typography/typography.less" export in "framework7" package

I don’t understand why update don’t update all

For now i resolve all with new fresh project and copy old files.