TypeError: Недействительный плагин PostCSS найден по адресу: plugins [0]

Я клонировал это репо https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs, затем я обновил tailwind.config.js

  theme: {
    extend: {
      color: {
        primary: "#730000",
        secondry: "#efefef",
      },
    },
  },
  variants: {},
  plugins: [],
};

затем запустите команду postcss css/tailwind.css -o generated.css терминал выдает ошибку TypeError: Invalid PostCSS Plugin found at: plugins[0] может ли кто-нибудь помочь мне исправить это. Спасибо.


next.js tailwind-css postcss
person Sodhi saab    schedule 08.04.2020    source источник
comment
ты нашел какое-нибудь решение?   -  person Secret Keeper    schedule 16.04.2020
comment
Нет, тогда я переключился на другое решение, если хотите, я могу создать быстрое репо для вас. Тем не менее, есть проблема: компилятор не следит за изменениями.   -  person Sodhi saab    schedule 16.04.2020
comment
эй, я думаю, я нашел решение, не могли бы вы обновить вопрос, а также предоставить содержимое вашего postcss.config.js файла?   -  person Secret Keeper    schedule 16.04.2020
comment
не могли бы вы поделиться своим решением?   -  person Sodhi saab    schedule 18.04.2020
comment
конечно, я напишу это как ответ   -  person Secret Keeper    schedule 18.04.2020

Ответы (3)


arrow_upward
10
arrow_downward

изменил это

module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
  ]
};

to

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ]
};

решил

TypeError: Недействительный плагин PostCSS найден по адресу: plugins [0]

person Secret Keeper    schedule 18.04.2020
comment
это работает для меня, но тогда производственная сборка имеет все CSS примерно 60000 строк - person Sodhi saab; 19.04.2020
comment
да, чтобы решить эту проблему, вы должны использовать purge css, он хорошо задокументирован здесь Tailwind-Nextjs-PurgeCSS - person Secret Keeper; 19.04.2020

arrow_upward
5
arrow_downward

Та же ошибка, возможно, другая проблема, как у OP

У меня возникла эта проблема при попытке установить Storybook вместе с Tailwind и Nextjs. Я смог исправить ошибку после добавления "tailwindcss": {}, в свой postcss.config.js.

Чтобы быть ясным, у меня не было и не было этой проблемы, как у вас, без попытки добавить сборник рассказов в рабочий процесс.

Рабочие файлы конфигурации моего решения

Ниже приведены рабочие конфигурации для postcss, попутного ветра, сборника рассказов с использованием значений по умолчанию для Nextjs. Я использую стандартный create-next-app рабочий процесс на основе --example with-storybook.

В частности, все файлы ниже помещены в корневой каталог моего проекта, и я использовал сборник рассказов ›= 6.0.0.

⚠️ См. документацию по Next.js, внизу в раздел примечаний, в котором подчеркивается необходимость синтаксиса объекта в файлах конфигурации при добавлении инструментов, отличных от Next.js, таких как сборник рассказов.

postcss.config.js

module.exports = {
  plugins: {
    "tailwindcss": {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
}

.storybook/main.js

module.exports = {
  stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
}

.storybook/preview.js

import '../styles/index.css';

где index.css указано в документации Tailwindcss.

person Jason R Stevens CFA    schedule 19.09.2020

arrow_upward
4
arrow_downward

Проверьте версию установленного вами автопрефикса. Мне потребовался час или два, чтобы понять, что autoprefixer версии 10 действительно вызывает критические изменения при использовании с nextjs + tailwindcss (в частности, css-loader next на моей стороне). Откатитесь на [email protected], пока эти ошибки не будут исправлены. Также убедитесь, что вы не используете [email protected], если используете пряжу. Используйте [email protected] или [email protected]. Причина, по которой я упоминаю об этом, заключается в том, что [email protected] автоматически устанавливается, если не нацелена явная версия, которая конфликтует с yarn. К счастью, [email protected] скоро должен быть выпущен как @ 9.5.4, и они начнут работу над @ 9.5.5-canary.x

Autoprefixer опубликовал версию 10 примерно 5 дней назад. Они переместили postcss в peerDependencies и переместили в PostCSS 8. Они также удалили поддержку Node версий 6.x, 8.x и 11.x. Тем не менее, [email protected] должен помочь.

Я оставил комментарий к открытой проблеме в postcss / autoprefixer, в котором описал ошибку, которую я получал с моей стороны в отношении использования версии 10 с nextjs https://github.com/postcss/autoprefixer/issues/1359#issuecomment-695752807

person Andrew Ross    schedule 20.09.2020