How can I import jQuery and other js files to main.js?

[dash-hyphen]

I'm trying to organize my js files on main.js. As of now, this is how my main.js looks like:

// Webpack Imports
import * as bootstrap from 'bootstrap';

import Search from  "./Search";
import MyNotes from "./MyNotes";
import Default from "./Default";

const search = new Search();
const mynotes = new MyNotes();
const default = new Default();

In MyNotes.js is where I import jquery and it looks like this

import $ from 'jquery';

class MyNotes{
	constructor(){
		alert("delete");
		this.events();
	}

	events(){
		$(".delete-note").on("click", this.deleteNote);
	}

	// Methods will go here
	deleteNote(){
		alert("delete");
	}
}

export default MyNotes; 

But every time I run npm, I'm having this problem:

(node:10120) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument needs to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(node:10120) UnhandledPromiseRejectionWarning
(node:10120) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10120) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

If I put my other js files inside main.js (for example the Search.js and Defaul.js which is the default js files from the install), it works properly but I'm still having trouble importing jquery inside main.js. I tried import $ from 'jQuery' also but also doesn't work. I can see that jquery is installed under node_modules folder but after failed attempts in importing it, I ran npm install jquery but was still the same error.

What am I doing wrong?

[Malasuerte94]

Did you fixed the issue?

[dash-hyphen]

Did you fixed the issue?

No, I'm still looking for an answer. Right now, I'm putting my js scripts in the footer. Do you know any other solutions to this?

[them-es]

Javascripts should be enqueued via functions.php (wp_enqueue_script) only.

And since jQuery has been dropped in the latest version of the Starter Theme it needs to be activated via the array( 'jquery' ) parameter. It's strongly advised to import the jQuery version that comes with WordPress:
https://them.es/support/2019/07/06/goodbye-jquery/
https://them.es/support/2021/05/10/them-es-starter-v3-released/

Hope this helps?

[dash-hyphen]

Javascripts should be enqueued via functions.php (wp_enqueue_script) only.

It means that every additional js will not be bundled in main.js right? So I will have additional js loaded on my site.

As for the jQuery, it's ok, I can convert my script to vanilla JS but I still can't import. After I have enqueued my extra js script, inside that file I need to import axios but it's giving me an error:

Uncaught SyntaxError: Cannot use import statement outside a module

in my functions.php file
wp_enqueue_script( 'extras', get_template_directory_uri() . '/assets/Extras.js', array('jquery'), $theme_version, true );

in my Extras.js under /assets

import axios from "../axios"

class Search {
	constructor(){
		alert("I am a search.");
	}
}
const mysearch = new Search();

[them-es]

Did you reference "Extras.js" in the Webpack config? https://github.com/them-es/themes-starter-bootstrap/blob/main/webpack.config.js#L7

i.e. main: [ './main.js', './Extras.js' ],

This will incorporate the "Extras" code in main.js and is documented here https://webpack.js.org/concepts/entry-points

[them-es]

Axios doesn't seem to be ready for ESM yet (axios/axios#4209) but for now you can try an alternative package (unofficial):
axios/axios#1879 (comment)

...or import the JS source directly:
import '[DIRECTORY_WHERE_AXIOS_IS_LOCATED]/dist/axios.min.js';

But since this issue is not related to the code in this repo it will be closed. Good luck!