Почему при подключении ui библиотеки к next.js приложению происходит ошибка?

Question

[luxurypluxury]

Вот подключение библиотеки:

import { Avatar, Badge, Button } from 'recconect-ui'

Вот ошибка:

error - ReferenceError: self is not defined
    at Object.<anonymous> (C:\Users\ADMIN\Desktop\game\node_modules\recconect-ui\dist\index.js:2:299)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.recconect-ui (C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:1173:18)
    at __webpack_require__ (C:\Users\ADMIN\Desktop\game\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/AlertSubscription/index.tsx:9:70)
    at Object../src/components/AlertSubscription/index.tsx (C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:570:1)
    at __webpack_require__ (C:\Users\ADMIN\Desktop\game\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/index.tsx:9:87)
    at Object../src/pages/index.tsx (C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:713:1)
    at __webpack_require__ (C:\Users\ADMIN\Desktop\game\.next\server\webpack-runtime.js:33:42)
    at __webpack_exec__ (C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:1183:39)
    at C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:1184:28
    at Object.<anonymous> (C:\Users\ADMIN\Desktop\game\.next\server\pages\index.js:1187:3)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.requirePage (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\require.js:88:12)
    at C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\load-components.js:48:73
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.loadComponents (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\load-components.js:48:26)
    at async DevServer.findPageComponents (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\next-server.js:563:36)
    at async DevServer.findPageComponents (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\dev\next-dev-server.js:1041:20)
    at async DevServer.renderPageComponent (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\base-server.js:951:24)
    at async DevServer.renderToResponse (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\base-server.js:980:32)
    at async DevServer.pipe (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\base-server.js:407:25)
    at async Object.fn (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\next-server.js:759:21)
    at async Router.execute (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\router.js:253:36)
    at async DevServer.run (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\base-server.js:384:29)
    at async DevServer.run (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\dev\next-dev-server.js:743:20)
    at async DevServer.handleRequest (C:\Users\ADMIN\Desktop\game\node_modules\next\dist\server\base-server.js:322:20) {
  page: '/'

Answer 1

[Tema Smirnov]

Ошибка ReferenceError: self is not defined может возникать, если библиотека использует конструкцию "self" для ссылки на глобальный объект в браузере, а в Next.js приложении используется Node.js серверный код, который не имеет доступа к глобальному объекту self (обычно его делают алиасом для this или window).

Чтобы решить эту проблему, можно попробовать использовать динамический импорт библиотеки в компоненте Next.js, вместо импорта на верхнем уровне модуля. Например:

import React, { useState } from 'react';

function MyComponent() {
  const [library, setLibrary] = useState(null);

  async function loadLibrary() {
    const { Avatar, Badge, Button } = await import('recconect-ui');
    setLibrary({ Avatar, Badge, Button });
  }

  return (
    <div>
      <button onClick={loadLibrary}>Load Library</button>
      {library && (
        <div>
          <library.Avatar />
          <library.Badge />
          <library.Button />
        </div>
      )}
    </div>
  );
}

В этом примере мы используем динамический импорт библиотеки recconect-ui внутри компонента MyComponent и сохраняем его в состоянии компонента. Когда пользователь нажимает на кнопку, мы загружаем библиотеку и сохраняем ее компоненты в другом состоянии, которое затем используется для отображения компонентов библиотеки.

Вижу что вы опубликовали recconect-ui как свой пакет на npm - это было не обязательно делать для ведения локальной разработки. Вам нужно починить свою библиотеку.

Если ответ помог или считаете что может быть полезен другим - не забудьте отметить его как решение вашего вопроса. Успехов!
Пишите комментарии, если нужна доп.помощь.

Comments

[luxurypluxury]

Что вы имеете ввиду под "Вам нужно починить свою библиотеку"?

[Tema Smirnov]

Скорее всего нужно посмотреть в сторону изменения режима сборки и/или типов выходного бандла (EJS, UMD, CJS и тд) при сборке в папку dist.
Если сейчас посмотреть в dist/index.js, то видно что используется self, которого нигде нет в коде, отсюда и ошибка:

[luxurypluxury]

Могу ли я изменить что-то в библиотеке чтобы все работало?

[Tema Smirnov]

luxurypluxury, не видя исходников библиотеки невозможно ответить на этот вопрос. Тут 50 на 50:
Либо меняется что-то в самих исходниках либы.
Либо меняется в параметрах сборщика, который по итогу транспилирует файлы в выходной бандл, который вы затем публикуете на npm.

Попробуйте с исходников. Посмотрите на скриншот выше, попробуйте методом перебора и исключения подобраться максимально близко к похожему месту, и возможно что-то там найдёте что требует фикса.

Если попытки будут тщетны, переключитесь на проработку варианта того, "а правильно ли я собираю выходной бандл библиотеки?" (EJS, UMD, CJS и тд). Возможно в рамках этой задачи стоит посмотреть в сторону babel если его используете - обновите его и смежные либы до последних версий. пересоберите всё и снова опубликуйте.
И не забывайте что при npm install в первую очередь используется кеш с ПК, поэтому очищайте кеш и устанавливайте через npm install --force.

[luxurypluxury]

Tema Smirnov, вот конфиг вебпака:

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: "umd",
        clean: true,
        globalObject: 'this',
        umdNamedDefine: true,
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    },
    externals: {
        react: 'react'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.svg$/,
                use: ['@svgr/webpack'],
            },
            {
                test: /\.(ts|tsx)?$/,
                use: ['ts-loader'],
                exclude: /node_modules/
            }
        ]

    }
}

Вот tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "outDir": "./dist/",
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "src/@types/declaration.d.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "./src/stories"
  ]
}

[Tema Smirnov]

luxurypluxury, надо попробовать закомментировать параметр globalObject и попробовать без него. А если не получается, то попробовать выставить ему такое значение, и снова повторить итерацию с публикацией/установкой/попыткой сборки своего фронта с подключенной либой:

globalObject: "typeof self !== 'undefined' ? self : this",

[luxurypluxury]

Tema Smirnov, ошибка поменялась теперь пишет ReferenceError: document is not defined

[Tema Smirnov]

luxurypluxury, предлагаю рассмотреть этот топик - https://stackoverflow.com/questions/49111086/webpa..., и в целом погуглить свою проблему более детально, именно в сторону настроек вебпака.