Почему ошибка в next.js ReferenceError: require is not defined?

Question

[luxurypluxury]

Сделал свою ui библиотеку. Подключаю ее к next.js приложению и выскакивает ошибка:


Вот код бандлера библиотеки (rollup):

const typescript = require("@rollup/plugin-typescript");
const postcss = require("rollup-plugin-postcss");
const url = require("@rollup/plugin-url");
const svgr = require("@svgr/rollup");
const terser = require("@rollup/plugin-terser");
const dts = require("rollup-plugin-dts");

module.exports = [
    {
        input: 'src/index.ts',
        output: [
            {
                file: "dist/cjs/index.js",
                format: 'cjs'
            },
            {
                file: "dist/esm/index.js",
                format: 'esm'
            }
        ],
        external: ['react'],
        plugins: [
            typescript({
                tsconfig: './tsconfig.json',
            }),
            postcss({
                extract: 'index.css',
                modules: true,
                use: ['sass'],
                minimize: true
            }),
            url(),
            svgr({ icon: true }),
            terser(),
        ]
    },
    {
        input: 'dist/esm/index.d.ts',
        output: [{ file: "dist/index.d.ts", format: 'esm' }],
        external: [/\.(css|scss)$/],
        plugins: [dts.default()]
    }
]

Answer 1

[Taulan Khatuaev]

Ошибка "ReferenceError: require is not defined" может возникать в Next.js при использовании модулей.
Чтобы исправить ошибку место использования require вам нужно будет использовать import в вашем коде Rollup.

import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import url from "@rollup/plugin-url";
import svgr from "@svgr/rollup";
import { terser } from "rollup-plugin-terser";
import dts from "rollup-plugin-dts";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: "dist/cjs/index.js",
        format: "cjs",
      },
      {
        file: "dist/esm/index.js",
        format: "esm",
      },
    ],
    external: ["react"],
    plugins: [
      typescript({
        tsconfig: "./tsconfig.json",
      }),
      postcss({
        extract: "index.css",
        modules: true,
        use: ["sass"],
        minimize: true,
      }),
      url(),
      svgr({ icon: true }),
      terser(),
    ],
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    external: [/\.(css|scss)$/],
    plugins: [dts()],
  },
];

Comments

[Taulan Khatuaev]

luxurypluxury, Ошибка "Cannot find package 'rollup-plugin-terser' imported from..." возникает, когда Rollup не может найти установленный пакет 'rollup-plugin-terser'.
npm install rollup-plugin-terser --save-dev

[luxurypluxury]

Taulan Khatuaev, ошибка require все равно осталась(

[Taulan Khatuaev]

Если ошибка осталась, то можете попробовать еще несколько вариантов:

Удалите папку node_modules и файл package-lock.json, а затем выполните команду npm install снова, чтобы переустановить все зависимости.

Попробуйте установить зависимость rollup-plugin-terser локально, а не глобально. Для этого нужно выполнить команду npm install rollup-plugin-terser --save-dev в папке с проектом.

Убедитесь, что у вас установлена последняя версия rollup, rollup-plugin-terser и других зависимостей. Для этого можно выполнить команду npm outdated, чтобы проверить, есть ли у вас устаревшие зависимости, и затем обновить их командой npm update.

Проверьте, есть ли у вас файл rollup-plugin-terser.js в папке node_modules/rollup-plugin-terser. Если его нет, то можете попробовать удалить папку node_modules/rollup-plugin-terser и выполнить команду npm install rollup-plugin-terser --save-dev заново.

Если ни один из этих вариантов не помог, то можно попробовать использовать другой плагин для минификации, например rollup-plugin-uglify.

[luxurypluxury]

Taulan Khatuaev, я про ReferenceError: require is not defined