Windows环境下rollup-plugin-postcss构建报错求助

报错栈追踪 #

[!] (plugin postcss) TypeError: Cannot read properties of undefined (reading 'modules')
at getExtracted (C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:931:49)
at C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:975:29
at Generator.next ()
at asyncGeneratorStep (C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:29:24)
at _next (C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:51:9)
at C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:58:7
at new Promise ()
at C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:47:12
at Object.generateBundle (C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup-plugin-postcss\dist\index.js:1018:9)
at C:\Work\Solutions\RFC\react-frost-components\node_modules\rollup\dist\shared\rollup.js:989:40

make: *** [Makefile:43: build] Error 1

Rollup配置文件 #

import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import jsonPlugin from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import {createRequire} from 'module'
import path from 'node:path'
// import eslint from '@rollup/plugin-eslint';
import {fileURLToPath} from 'node:url'
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import svgSprites from 'rollup-plugin-svg-sprites'
const require = createRequire(import.meta.url)

const packageJson = require('./package.json')
const glob = require('glob')
const plugins = [
  postcss({
    extract: 'styles.css',
    minimize: true,
    inject: false,
    sourceMap: true,
    extension: ['.scss', '.css'],
    use: ['sass']
  }),
  external(),
  resolve({browser: true, extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss', '.sass']}),
  babel({
    exclude: 'node_modules/**',
    presets: ['@babel/env', '@babel/preset-react'],
    babelHelpers: 'runtime'
  }),
  commonjs(),
  typescript({tsconfig: './tsconfig.json'}),
  svgSprites({
    symbolId: (path, query) => {
      return `frost-${path.split('/').pop().replace('.svg', '')}`
    }
  }),
  jsonPlugin()
  // eslint({
  //     exclude: ['*.svg', '*.json', '*.scss']
  // })
]

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
        name: 'react-frost-components'
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
        name: 'react-frost-components'
      }
    ],
    plugins,
    external: ['lodash', 'immer', 'tslib', /node_modules/]
  },
  {
    input: Object.fromEntries(
      glob.sync('src/**/!(*.d).[jt]s*').map(file => [
        path.relative(
          'src',
          file.slice(0, file.length - path.extname(file).length)
        ),
        fileURLToPath(new URL(file, import.meta.url))
      ])
    ),
    output: {
      format: 'es',
      dir: 'lib'
    },
    plugins,
    external: ['lodash', 'immer', 'tslib', /node_modules/]
  }
]

问题背景 #

该配置在Mac设备上可正常构建，但Windows机器触发上述报错，需实现跨平台正常构建。

解决办法 #

• 修复路径分隔符兼容问题：Windows使用\作为路径分隔符，svgSprites插件的路径处理逻辑未兼容该差异，修改symbolId函数：

  svgSprites({
    symbolId: (filePath, query) => {
      // 统一将路径分隔符转为/后处理
      const normalizedPath = filePath.replace(/\\/g, '/');
      return `frost-${normalizedPath.split('/').pop().replace('.svg', '')}`
    }
  }),
  

• 拆分插件实例避免状态冲突：当前两个Rollup输出共享同一plugins数组，postcss插件的状态可能在两次构建间冲突，封装插件创建函数为每个输出生成独立实例：

  // 封装插件创建函数
  const createPlugins = () => [
    postcss({
      extract: 'styles.css',
      minimize: true,
      inject: false,
      sourceMap: true,
      extension: ['.scss', '.css'],
      use: ['sass']
    }),
    external(),
    resolve({browser: true, extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss', '.sass']}),
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/env', '@babel/preset-react'],
      babelHelpers: 'runtime'
    }),
    commonjs(),
    typescript({tsconfig: './tsconfig.json'}),
    svgSprites({
      symbolId: (filePath, query) => {
        const normalizedPath = filePath.replace(/\\/g, '/');
        return `frost-${normalizedPath.split('/').pop().replace('.svg', '')}`
      }
    }),
    jsonPlugin()
  ]
  
  // 在输出配置中调用函数生成独立插件
  export default [
    {
      input: 'src/index.ts',
      output: [...],
      plugins: createPlugins(),
      external: [...]
    },
    {
      input: Object.fromEntries(...),
      output: {...},
      plugins: createPlugins(),
      external: [...]
    }
  ]
  

• 清除依赖重新安装：Windows下node_modules可能存在缓存或权限问题，执行以下命令：

  rm -rf node_modules package-lock.json
  npm install
  

• 锁定兼容版本：可能是rollup-plugin-postcss与postcss版本不兼容，在package.json中添加版本锁定：

  "resolutions": {
    "postcss": "8.4.24"
  }
  

  之后重新安装依赖。

内容的提问来源于stack exchange，提问作者PankyD