如何解决如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？

[已解决]

问题

按照他们的 documentation 中的规定，将 Tailwind CSS 与 CRA (create-react-app) 一起使用需要将 react-scripts 替换为 craco。

现在，我正在尝试使用 React Styleguidist 构建一个组件库。通过在 styleguidist server 中指定在 craco 的 API 中使用 craco webpack 配置文件，我能够让 Tailwind CSS 在运行 styleguide.config.js 时在 localhost 中正确显示

/* styleguide.config.js */
const path = require('path')

const { createWebpackDevConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig,require: [
    path.join(__dirname,'./src/styles/tailwind.css')
  ]
}

但是，当我尝试使用 styleguidist build 构建生产 HTML 时，它会引发这些错误

 Building style guide...
 FAIL  Failed to compile

./src/components/atoms/Button/index.js
Error: [BABEL] /Users/vivz753/react-components/src/components/atoms/Button/index.js: React Refresh Babel transform should only be enabled in development environment. Instead,the environment is: "production". If you want to override this check,pass {skipEnvCheck: true} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js) 35:30-132
 @ ./node_modules/react-styleguidist/lib/client/index.js
 @ multi ./src/styles/tailwind.css ./node_modules/react-styleguidist/lib/client/index
./src/components/molecules/HelloWorld/HelloWorld.js
Error: [BABEL] /Users/vivz753/react-components/src/components/molecules/HelloWorld/HelloWorld.js: React Refresh Babel transform should only be enabled in development environment. Instead,pass {skipEnvCheck: true} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js) 44:30-145
 @ ./node_modules/react-styleguidist/lib/client/index.js
 @ multi ./src/styles/tailwind.css ./node_modules/react-styleguidist/lib/client/index
./src/components/molecules/PlaylistGeneratorButton/PlaylistGeneratorButton.js
Error: [BABEL] /Users/vivz753/react-components/src/components/molecules/PlaylistGeneratorButton/PlaylistGeneratorButton.js: React Refresh Babel transform should only be enabled in development environment. Instead,pass {skipEnvCheck: true} as plugin options. (While processing: "/Users/vivz753/react-components/node_modules/react-refresh/babel.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadpluginDescriptor.next (<anonymous>)
 @ ./node_modules/react-styleguidist/lib/client/index.js (./node_modules/react-styleguidist/lib/loaders/styleguide-loader.js!./node_modules/react-styleguidist/lib/client/index.js) 53:30-171
 @ ./node_modules/react-styleguidist/lib/client/index.js
 @ multi ./src/styles/tailwind.css ./node_modules/react-styleguidist/lib/client/index
npm ERR! code 1
npm ERR! path /Users/vivz753/react-components
npm ERR! command Failed
npm ERR! command sh -c styleguidist "build"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/vivz753/.npm/_logs/2021-03-15T05_03_20_188Z-debug.log

通过像这样使用 react-scripts 中的配置运行命令，我能够无错误地构建 npx styleguidist build --config ./node_modules/react-scripts/config/webpack.config.js

我在此处成功将其部署到 Vercel https://react-components-fho7l1ov3-discover-pom.vercel.app/ 但是我的样式都没有正确显示并且没有应用 tailwindcss

我尝试查看 ./node_modules/@craco/craco/lib/features/webpack/babel.js 中的文件，但我不明白问题可能出在哪里...

Inside ./node_modules/react-refresh/cjs/react-refresh-babel 显示了抛出的错误，但老实说我不知道它为什么会抱怨

if (process.env.NODE_ENV !== "production") {
  (function() {
'use strict';

function ReactFreshBabelPlugin (babel) {
  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  if (typeof babel.getEnv === 'function') {
    // Only available in Babel 7.
    var env = babel.getEnv();

    if (env !== 'development' && !opts.skipEnvCheck) {
      throw new Error('React Refresh Babel transform should only be enabled in development environment. ' + 'Instead,the environment is: "' + env + '". If you want to override this check,pass {skipEnvCheck: true} as plugin options.');
    }
  }
...

解决方案

我想通了。发布以防其他人遇到此问题。我不得不像这样使用 craco 的 webpack 配置的 prod 版本

/* styleguide.config.js */
const path = require('path')

const { createWebpackDevConfig,createWebpackProdConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.js");
const webpackConfig = process.env.NODE_ENV === 'production' ? createWebpackProdConfig(cracoConfig) : createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig,'./src/styles/tailwind.css')
  ]
}

styleguidist build 现在完美运行。