Сбой сборки с ошибками разрешения

Question

Я пытаюсь установить socket.io-client внутри стройного компонента.

Документы говорят, что я могу.

Но когда я пытаюсь запустить приложение, используя цель, команда не работает со следующими журналами:

      Bundle complete. Watching for file changes...
Bundling...
'bufferutil' is imported by bufferutil?commonjs-external, but could not be resolved – treating it as an external dependency
'utf-8-validate' is imported by utf-8-validate?commonjs-external, but could not be resolved – treating it as an external dependency
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> node_modules\util\util.js
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> C:\Users\munda\Documents\upwork\upwork-gameshow\node_modules\util\util.js?commonjs-proxy -> node_modules\util\util.js
@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
No name was provided for external module 'tty' in output.globals – guessing 'tty'
No name was provided for external module 'os' in output.globals – guessing 'os'
No name was provided for external module 'fs' in output.globals – guessing 'fs'
No name was provided for external module 'child_process' in output.globals – guessing 'require$$0'
No name was provided for external module 'http' in output.globals – guessing 'require$$1'
No name was provided for external module 'https' in output.globals – guessing 'require$$2'
No name was provided for external module 'net' in output.globals – guessing 'net'
No name was provided for external module 'tls' in output.globals – guessing 'tls'
No name was provided for external module 'crypto' in output.globals – guessing 'require$$0$3'
No name was provided for external module 'zlib' in output.globals – guessing 'zlib'
No name was provided for external module 'bufferutil' in output.globals – guessing 'require$$1$1'
No name was provided for external module 'stream' in output.globals – guessing 'require$$0$2'
No name was provided for external module 'utf-8-validate' in output.globals – guessing 'require$$0$1'
Creating a browser bundle that depends on Node.js built-in modules ("tty", "os", "http", "https", "zlib" and "stream"). You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node

Шаги, которые я предпринял для создания приложения:

1. Инициируйте nx-workspace с помощью yarn create nx-workspace
2. Установите генераторы Svelte, используя yarn add @nxext/svelte, ссылка: https://nx.dev/community#:~:text=the%20Nx%20workflow-,%40nxext/svelte,-Nx%20plugin%20to
3. Создать svelte приложение с использованием установленного генератора.
4. Добавить socket.io код на стороне клиента в компоненте (базовая инициализация сокета, как указано в документации).
5. Поскольку мой сервер и клиент не будут размещаться в одном домене, добавьте import { io } from 'socket.io-client' и инициализировать сокет, используя const socket = io(SERVER_URL)(в моем случае это был http: // localhost: 3000)
6. Установите клиент socket.io, используя yarn socket.io-client.
7. Запустить serve цель с помощью nx run-many --target=serve --all --parallel, скрещенные пальцы.

Результат: вышеупомянутый журнал.

Что мне не хватает?

Answer 1

Мне нужно было установить следующие недостающие зависимости:

• bufferutil
• utf-8-validate

Просто yarn add bufferutil utf-8-validateисправил это для меня. Об этом следует упомянуть в документации для socket.io-client пакет или socket.io официальный сайт документации.

Это исправило сборки на моем ПК (Windows), но я не мог запустить то же самое на Mac. Я пытался удалить node_modules а также yarn.lock, перезапуск yarn.

Наконец мне пришлось пройти по маршруту CDN.

Вот как я это сделал:

1. Переместите логику инициализации сокета в функцию.

      <script>
  ...
  const initialiseSocket = () => {
    socket = io('http://localhost:3000');

    socket.on('messages', (data) => {
      //...
    });
  }
</script>

2. Добавьте тег svelte:head для загрузки socket-io.client из CDN и передайте функцию этому скрипту. on:load.

      <svelte:head>
  <script
    src="https://cdn.socket.io/4.2.0/socket.io.min.js"
    integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
    crossorigin="anonymous"
    on:load={initialiseSocket}></script>
</svelte:head>