Failed to import external .js file

Questions
1

Hi all,

I am newbie on Framework7-Core (bundler vite) and I tried to import an external javascript (test.js) into app.f7. When I sync & build the package, it shows as below.

[vite]: Rollup failed to resolve import “/src/js/test.js” from “D:/Project/MobileScreenTest/src/app.f7”.
This is most likely unintended because it can break your application at runtime.

Anybody may help me how to load the external javascript file?

Software version

  1. OpenJDK 17.0.9
  2. Node v21.7.3
  3. Npm 10.8.1
  4. Framework7 8.3.3
  5. Capacitor/android 6.1.0
  6. Capacitor/app 6.0.0
  7. Capacitor/cli 6.1.0
  8. Capacitor/core 6.1.0

Exmaples:
app.f7

<template>
  <div id="app">

    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/"></div>

    <!-- Popup -->
    <div class="popup popup-tablet-fullscreen" id="my-popup">
      <div class="page">
        <div class="page-content" style="width:100%"></div>
      </div>
    </div>

  </div>
</template>
<script>
  import test from '/src/js/test.js';

  export default (props, { $f7, $on, $update }) => {
    $on('pageInit', () => {
      console.log(test.result);
    });
    return $render;
  }
</script>

test.js

const result = 'Hello';
export default result;
2

Hi and welcome to the forum.

In my projects (using framework7 v7), I include external js files in the app.js file and place them in that same folder. So the import looks like:

import test from './test.js';

Hope that helps.

3

Thanks for your replied!

Are you using Framework7-Core without bundler (vite)?

I have tried your suggestion by using Framework7-core without bundler (vite). After add the import statement on app.js, it showed error message “Cannot use import statement outside a module” on console.

4

I use the CLI to create my project and select f7 core with the vite bundler.

5

Thanks bitfiddler. I got it. It’s working now.