We Keep Coding

Jquery with JavaScript in nextjs

I have React.js project that needs to convert to a Next.js
This project has a file data-pulse-provider.js
import { logMessage, } from './helpers';
import $ from 'jquery';
require('signalr');
window.jQuery = $;
var DataPulseProvider = /** #class */ (function () {
//...
}());
export { DataPulseProvider };
Here I am getting an error
Error: jQuery was not found. Please ensure jQuery is referenced before
the SignalR client JavaScript file.
I think this window object is not available all the time in next.js. The solution I found was use dynamic imports with SSR false and then use useEffect to window object-related code. But this is a pure js file hence I can't use the useEffect or something like that. So how can I fix this issue?
Any help!
Thanks in advance.

Webpack Encore & jQuery plugin : $(...).isotope is not a function

I'm working on a Symfony5 project, with Yarn & jQuery. I have an error when I try to use the jQuery plugin "isotope-layout" with Webpack Encore.
I try to fix it for many hours but I might not be doing it the right way.
Here is my code :
webpack.config.js
// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();
app.js
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';
// start the Stimulus application
import './bootstrap';
custom.js
import jQuery from 'jquery';
import 'isotope-layout';
(function ($) {
// Here is the error :
$(...).isotope({...});
})(jQuery);
Error :
Uncaught TypeError: $(...).isotope is not a function

You don't have to use jQuery when using Isotope. You can use this example from their Webpack documentation:
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid', {
// options...
});
There is also an example if you want to use jQuery. To install it:
npm install jquery
npm install jquery-bridget
And than:
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
// options...
});
If you're using modern Javascript (and you're using Webpack, great!), you might not need jQuery in many cases.

Cannot import Javascript file in other Javascript file

For a project, I'm using Django for my backend, HTML/CSS/JS for frontend.
For one HTML page, I use two JS files: dom_creator.js and console_page.js. I would like to use the functions of dom_creator in console_page, but whatever I try, I cannot find the right statement to import (and many of the ES6 import statements even make my console_page.js to stop working).
I also have a module imported to my HTML (console_module.js). In that file, I have no issue importing dom_creator.js with
import {function1, function2} from "./dom_creator.js"
How would I be able to import functions from dom_creator in console_page.js (which is not a module)? I've tried all suggestions on Stack Overflow, but none of them seem to work.

the problem maybe in html code when you tried to import js files
add TYPE = "MODULE" to script element
script type="module" src="./myscript.js" script
and at js file to import, use
function print(y){
console.log(y);
}
export {print};
to import the x function in another js file do the following:
import {print} from "./main.js" // dont forget .js
// another way to import all functions
import * as main from "./main.js" // dont forget .js
//to use the last one:
let variable = main.print('hello word');

For importing a function into the other file, first, you need to export it,
so if you are using es5 (mostly the case in NodeJs) you need to export it as below:
var myfunction = function () {}
module.exports = { myfunction }
and in newer versions (es6+) you can use export like this:
var myfunction = function () {}
export myfunction;
// then you can import it like: import {myfuntion} from 'file.js';
// or with another name: import {myfuntion as john} from 'file.js';
// or export it as default like:
export default myfunction;
// then you can import it like import myfuntion from 'file.js';
// or any other custom name: import john from 'file.js';
the only thing I couldn't understand from your question is the relation of with question with Django 🤔

Uncaught SyntaxError: Cannot use import statement outside a module. import typescript file into JavaScript file

I am working on angular 10. I need to use typescript angular service in jQuery file.
When I am importing TypeScript service file in jquery it gives me the error:
Uncaught SyntaxError: Cannot use import statement outside a module
I am using below import statment in jQuery file:
import { priceFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/price-filtered-by-service";
priceFilteredByService is Angular typescript file. I need to access its function from a javascript file.
You find below javascript file:
import { laptopsFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/laptops-filtered-by-service";
import { priceFilteredByService } from "../../app/service/category-filtered-by/electronics/laptops/price-filtered-by-service";
!(function ($) {
laptopFilteredByService: laptopsFilteredByService;
priceFilteredByService: priceFilteredByService;
$(document).ready(function () {
"use strict";
$('#price-range-submit').hide();
$("#min_price,#max_price").on('change', function () {
var min_price_range = parseInt($("#min_price").val());
var max_price_range = parseInt($("#max_price").val());
this.priceFilteredByService.getPriceMinMaxFilter()
this.priceFilteredByService.setMinAED(min_price_range);
this.priceFilteredByService.setMaxAED(max_price_range);
this.laptopFilteredByService.getSelectedFilters()
});
});

Looks like your javascript compiler does not consider this file a module.
If you don't have already, you need to add compiler / bundler step to you workflow-

How can import jQuery UI using ES6 syntax and browserify?

I am trying to import JQuery and JQuery into a project using ES6 syntax using Babel and Browserify to package the code. From what I have been able to figure out the problem is that JQuery UI expects jQuery to be defined as a global variable. I tried setting the global variable after importing jQuery and before importing JQuery UI like this:
import { default as $, default as jQuery} from 'jquery';
wiindow.jQuery = jQuery;
window.$ = $;
import 'jquery-ui';
but it seems browserify puts all imports at the top of the file, so the globals are defined too late. I understand that webpack provides a way to define globals but is there a workaround for browserify?

Try this
window.$ = window.jQuery = import $ from "jquery";
or
import { default as $, default as jQuery} from 'jquery';
window.jQuery = windows.$ = jQuery;