How do I add JavaScript files in V5?

Questions
1

Hello,

I’m updating my app from an old version of the framework to v5. Before I could simply add JavaScript files (like jQuery and momentjs) to the bottom of index.html like so:

<!-- Path to custom app scripts -->
  <script src="js/app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="lib/momentjs/moment.js"></script>
  <script src="lib/momentjs/moment-timezone-with-data.js"></script>
  <script>
      moment().format();
  </script>
</body>

but now it’s different. I tried @tiptronic’s solution from the thread How to organise js file? but I couldn’t get it to work. Here’s the part I was trying to edit:

module.exports = {
  mode: env,
  entry: {
    app: './src/js/app.js',
  },
  output: {
    path: resolvePath(isCordova ? 'cordova/www' : 'www'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    publicPath: '',
    hotUpdateChunkFilename: 'hot/hot-update.js',
    hotUpdateMainFilename: 'hot/hot-update.json',
  },

it’s a little different from his example. I’m new to webpack so I have no idea what I’m doing. :confused: Then I tried importing the scripts (again, momentjs) from app.js,

import $$ from 'dom7';
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.scss';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

//Import Moment.js
import '/lib/momentjs/momentjs.js';
import '/lib/momentjs/moment-timezone-with-data.js';

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component

but I got these error messages:

./src/js/app.js
Module not found: Error: Can’t resolve ‘/lib/momentjs/moment-timezone-with-data.js’ in [app folder]
./src/js/app.js
Module not found: Error: Can’t resolve ‘/lib/momentjs/momentjs.js’ in [app folder]

I’m new to v5 so any help is appreciated. Thank you!

2

If you use a bundler, why don’t you simply use npm?

npm install --save jquery

npm install --save moment

3

Hello! Thanks for the response. I tried npm install --save moment and it did get installed, but now it displays moment is not defined. I’m already taking a look into it, but do you have an idea why this is happening?

4

https://momentjs.com/docs/#/use-it/webpack/

5

Hi, I have installed moment:

 npm install --save moment

and to use it I use:

var moment = require('moment');

but I get an error:

require is not defined
6

I use vite and must be declared as such: :sweat_smile: :

import moment from 'moment';

thanks.

1 Like