После обновления до webpack 5 в консоли браузера возникает следующая ошибка: <br/> <code>Uncaught ReferenceError: exports is not defined</code> <br/> Ошибка связана с экспортом модуля, который реализован следующим образом: <br/> <pre><code class="javascript">let sliders = {
....
}
module.exports = sliders</code></pre> <br/> Импорт данного модуля выполняется так: <br/> <code class="javascript">import sliders from './js/sliders/sliders'</code> <br/> В дальнейшем происходит экспорт этого модуля в глобальный объект приложения, и именно на этом этапе появляется ошибка: <br/> <code class="javascript">exports.sliders = sliders</code> <br/>
Ошибка "Uncaught ReferenceError: exports is not defined" возникает, потому что в Webpack 5 по умолчанию используется синтаксис модулей ES (ESM), тогда как `module.exports` и `exports` являются частью синтаксиса CommonJS, который обычно используется в Node.js.
Когда вы переходите с Webpack 4 на Webpack 5, Webpack стал более строгим в отношении использования модуля. В результате, если вы используете `import` для импорта модуля, Webpack ожидает, что модуль будет экспортирован в формате ES модуля, а не CommonJS.
Чтобы исправить ошибку, вам нужно изменить способ экспорта вашего модуля с CommonJS на ES модули. Попробуйте следующий подход:
1. Измените экспорт вашего модуля на `export default`:
```javascript
let sliders = {
// ваша логика
}
export default sliders;
```
2. При импорте будет использоваться стандартный синтаксис:
```javascript
import sliders from './js/sliders/sliders';
```
3. Если вам нужно добавить `sliders` к глобальному объекту, вы можете сделать это следующим образом:
```javascript
window.sliders = sliders; // или globalThis.sliders для большей совместимости
```
Теперь, когда вы используете `export default`, вы убрали зависимость от `module.exports` и `exports`, что избавит от указанной ошибки при сборке проекта через Webpack 5.
Если по каким-то причинам вы не можете перейти на ESM, вам нужно будет изменить способ, которым вы обрабатываете экспорты и импорты, чтобы согласовать их с CommonJS и поддержать правильный контекст, но это не рекомендуется, если у вас уже применяется система модулей ES.
https://github.com/webpack/webpack/issues/12040
https://github.com/webpack/webpack/issues/4039#iss...
Now that Babel 7.x is out, I'll just say that this should essentially be resolved. The only time you should see this, with Babel 7.x, is if you're doing one of:
You've actually using import and module.exports in the same file, which is not allowed by Webpack. You can sidestep this by setting "modules": "commonjs", which will make Babel compile the import to a require. This breaks tree shaking, as mentioned above though, so fixing your code would be a better idea.
You're using useBultins: 'entry'/'usage, or @babel/plugin-transform-runtime, and you are running Babel on CommonJS files (either your own, or in random node_modules, if you're trying to compile that). Babel assumes files are ES modules by default, meaning those transforms would insert import statements into your file, triggering case 1. above. You can avoid this issue by setting sourceType: "unambiguous" in your Babel configuration, which will tell it to guess the type, like Webpack does, instead of assuming all files are modules.