Jquery with JavaScript in nextjs

Asked Oct 22 '21 at 05:53

Active Oct 22 '21 at 05:53

Viewed 608 times

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.

asked Oct 22 '21 at 05:53

margherita pizza

6,623
23
84
152

1

Why not importing module in useEffect? – Mario Nikolaus Oct 22 '21 at 07:59
This is just a JS file. Not a jsx file – margherita pizza Oct 22 '21 at 08:22
So? It is file that you are importing to your app as a module, there is no difference what extension it has(as long it is javascript that is) – Mario Nikolaus Oct 22 '21 at 08:32
As suggested, you can dynamically import `data-pulse-provider` in your component's `useEffect`. See [Dynamically import abcjs in Next.js](https://stackoverflow.com/a/67416572/1870780) for an example. – juliomalves Oct 22 '21 at 18:15

Jquery with JavaScript in nextjs

0 Answers0