Использование компонентов в nextjs

[malmo-east]

Проблема:

При импорте библиотеки в проект с NextJs вылезает ошибка

../../node_modules/@alfalab/core-components/button/esm/default.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: ..\..\node_modules\@alfalab\core-components\button\esm\Component.js

Шаги для воспроизведения:

1. Импортировать библиотеку в проект с NextJs
2. Использовать компонент Button
3. Добавить стили import "@alfalab/core-components/vars/index.css"; в глобальный файл _app.tsx

[reme3d2y]

Ага, такая проблема есть.

Есть два решения:

1. https://github.com/bem/next-global-css
2. На одном из проектов немного подшаманивали конфиг — https://pastebin.com/NmMbAcQz (скорее всего пакет из п.1 делает что-то похожее)

[malmo-east]

Ага, такая проблема есть.

Есть два решения:

1. https://github.com/bem/next-global-css
2. На одном из проектов немного подшаманивали конфиг — https://pastebin.com/NmMbAcQz (скорее всего пакет из п.1 делает что-то похожее)

Первый метод рисковано использовать Второй я не совсем понял, можно с примерами?

[reme3d2y]

Ага, такая проблема есть. Есть два решения:

1. https://github.com/bem/next-global-css
2. На одном из проектов немного подшаманивали конфиг — https://pastebin.com/NmMbAcQz (скорее всего пакет из п.1 делает что-то похожее)

Первый метод рисковано использовать Второй я не совсем понял, можно с примерами?

Почему рискованно? Там же можно указать вайт-лист пакетов

[Concide]

next.config.js

const compose = require('ramda/src/compose');

const transpileModules = require('next-transpile-modules')([
    '@alfalab/core-components',
    'arui-private',
    'arui-private/node_modules/@alfalab/core-components'
]);

const nextConfig = {
// ваши настройки
};

// внутри compose другие плагины
module.exports = compose(transpileModules)(nextConfig);

[malmo-east]

Спасибо @Concide и @reme3d2y! Всё работает!