next.js TypeError:在以下位置找到了无效的PostCSS插件:插件[0]

pinkon5k  于 2023-10-18  发布在  其他
关注(0)|答案(6)|浏览(130)

我克隆了这个存储库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]任何人都可以请帮助我修复它.谢谢

oxalkeyp

oxalkeyp1#

改变了这一

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

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

解决了
TypeError:在以下位置找到了无效的PostCSS插件:插件[0]

0ejtzxu1

0ejtzxu12#

相同的错误,可能与OP不同的问题

我在尝试将Storybook与Tailwind和Nextjs一起安装时遇到了这个问题。在将"tailwindcss": {},添加到postcss.config.js后,我能够修复此错误。
需要说明的是,我没有也没有像你一样经历过这个问题,没有尝试将故事书添加到工作流程中。

我的解决方案的工作配置文件

下面是postcss,tailwind,storybook的工作配置,使用Nextjs的默认值。我使用的是标准的create-next-app工作流程,并基于--example with-storybook
特别是,下面所有的文件都放在我的项目根目录下,我使用的是storybook >= 6.0.0。
请参阅Next.js documentation,* 靠近注解部分的底部 *,其中强调了在添加非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文档指示的。

r6vfmomb

r6vfmomb3#

检查您安装的autoprefixer版本。我花了一两个小时才意识到,autoprefixer 10版在使用nextjs+tailwindcss(特别是我这边的next css-loader)时确实引起了突破性的变化。暂时回滚到email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),直到这些bug得到解决。如果使用yarn,也要确保你没有使用email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)。使用email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)或email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)。我提到它的原因是,如果没有明确的版本与yarn冲突,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)会自动安装。值得庆幸的是,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)应该很快就会以@9.5.4的版本发布,他们将开始在@9.5.5-canary.x上工作
Autoprefixer大约5天前发布了版本10。他们将postcss迁移到了peerecommendencies,并迁移到了PostCSS 8。他们还删除了对Node 6.x、8.x和11.x版本的支持。也就是说,email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)应该可以做到这一点。
我在postcss/autoprefixer的一个开放问题上留下了评论,概述了我在nextjs https://github.com/postcss/autoprefixer/issues/1359#issuecomment-695752807中使用版本10时遇到的错误。

p5fdfcr1

p5fdfcr14#

请尝试将postcss-css沿着与postcss、tailwindcss和autoprefixer一起更新到它们的最新版本。

npm i postcss-cli@latest

npm i tailwindcss@latest postcss@latest autoprefixer@latest

在ReactJS中工作-“^16.13.1”

postcss.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};
3hvapo4f

3hvapo4f5#

更新postcss-fixer(10.0.0v)和autoprefixer(10.4.8v)到最新,然后在postcss.config.js文件中添加require("postcss-import")解决了我的问题。

  1. npm i postcss-cli@latest autoprefixer@latest
  2. postcss.config.js
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}
qcuzuvrc

qcuzuvrc6#

这对我很有用谢谢
更新了postcss-import(10.0.0v)和autoprefixer(10.4.8v)到最新版本,然后在postcss.js.js文件中添加了require(“postcss-import”),为我解决了这个问题。

  1. NPM i postcss-js @latest autoprefixer@latest 2.postcss.js.js:

相关问题