Ошибка require is not defined в браузере: причины и способы решения

При разработке веб-приложений часто возникает ситуация, когда код, написанный для Node.js, пытаются запустить в браузере. Типичная ошибка - Uncaught ReferenceError: require is not defined. Она появляется, когда вы используете require() в клиентском JavaScript, хотя эта функция предназначена для серверной среды Node.js.

Почему возникает ошибка require is not defined?

Функция require() является частью модульной системы CommonJS, которая используется в Node.js. Браузеры не поддерживают её изначально. Когда вы подключаете скрипт через <script src='script.js'></script> и внутри файла пишете const fetch = require('node-fetch');, браузер пытается выполнить этот код, но не находит функцию require, что и вызывает ошибку.

Как правильно подключить библиотеку в браузере?

1. Используйте CDN-ссылку

Самый простой способ - подключить библиотеку напрямую через CDN (Content Delivery Network). Например, для библиотеки node-fetch в браузере можно использовать whatwg-fetch или axios. Подключите скрипт в HTML:

<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>

После этого библиотека будет доступна глобально, например, как axios.

2. Используйте ES-модули (import/export)

Современные браузеры поддерживают ES-модули. Для этого в HTML укажите атрибут type='module':

<script type='module' src='script.js'></script>

А внутри script.js используйте import вместо require:

import fetch from 'node-fetch';

Однако учтите, что node-fetch не предназначена для браузера. Лучше использовать whatwg-fetch или нативный fetch.

3. Соберите проект с помощью сборщика (Webpack, Vite, Parcel)

Если вы разрабатываете сложное приложение, используйте сборщик модулей. Он преобразует код с require в формат, понятный браузеру. Например, с Webpack вы пишете код как в Node.js, а сборщик создаёт один бандл, который работает в браузере.

Альтернативы для HTTP-запросов в браузере

Вместо node-fetch для клиентской части используйте:

• Нативный fetch() - встроенная функция в современных браузерах.
• Axios - популярная библиотека с удобным API.
• jQuery.ajax() - если используете jQuery.

Пример с нативным fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Что делать, если скрипт уже подключён, но ошибка остаётся?

Проверьте порядок подключения скриптов в HTML. Если вы используете модули, убедитесь, что у тега <script> стоит атрибут type='module'. Также проверьте, не пытаетесь ли вы вызвать require внутри функции, которая выполняется в браузере.