Как использовать require в js?

Question

[Heinemann]

Пытаясь разобраться с broadcast в Laravel, наткнулся на проблему с require в js. В документации laravel написано, что для подключения socket.io нужно добавить

import Echo from 'laravel-echo';
window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

но при этом браузер мне выдает ошибку:

Uncaught ReferenceError: require is not defined
    at app-9ed8d7fa.js:29:28918

Comments

[WbICHA]

А загуглить что такое рекваер и где он используется никак?

[Heinemann]

WbICHA, в node.js, но что мне это дает?

[Heinemann]

WbICHA, я использовал команду node app.js, но тогда он начинаеn ругаться на import

[Сергей delphinpro]

Вы уж что-то одно выбирайте: либо native modules (import), либо CommonJS modules (require).
Смешивать их нельзя.

[Сергей delphinpro]

В любом случае код следует прогнать через сборщик и использовать на страницах собранный билд.
В ларавел в качестве сборщика по умолчанию используется либо Mix, либо Vite, в зависимости от версии.
https://laravel.com/docs/10.x/vite

[Heinemann]

Сергей delphinpro, Интересно, почему тогда во многих документациях идет смешивание import и reuqire в примерах подключения?

[Сергей delphinpro]

Heinemann, покажите такую документацию.

[Heinemann]

Сергей delphinpro,
Это из примеров на скорую руку. Еще подобное видел в документации ckeditor

[Сергей delphinpro]

Heinemann, картинку я вам любую могу нарисовать. Я просил ссылку на документацию, чтобы я сам мог увидеть.

Даже если такая документация есть, то это вероятно просто невнимательность при переписывании или дополнении документации. Вместе эти конструкцуии работать не могут. node.js работает либо в режиме modules, либо в режиме commonjs. Это задается в настройке файла package.json опцией type=modules.

Специально для вас нагуглил:

В режиме ES-modules все же можно использовать require, если предварительно ее подгрузить

// These lines make "require" available
import { createRequire } from "module";
const require = createRequire(import.meta.url);

В режиме CommonJS использовать импорты никак не выйдет.
По крайней мере на текущий момент (node v18)

[Heinemann]

Сергей delphinpro,
https://laravel.com/docs/5.8/broadcasting

Спасибо за развернутый ответ.

Извините, тогда каким образом переписать window.io = require('socket.io-client'); с использованием import?

[Сергей delphinpro]

Heinemann,

import io from 'socket.io-client';

window.io = io;

Не забыть установить npm i socket.io-client