3

[解决了]

问题

如其文档中所述，将 Tailwind CSS 与 CRA (create-react-app) 一起使用需要替换react-scripts为craco.

现在，我正在尝试使用 React Styleguidist 构建一个组件库。styleguidist server通过在 craco 的 API 中指定styleguide.config.js使用 craco webpack 配置文件，我能够让 Tailwind CSS 在运行时在 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')
  ]
}

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

 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, 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) 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, 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) 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但我不明白问题可能是什么......

里面./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,
  require: [
    path.join(__dirname, './src/styles/tailwind.css')
  ]
}

styleguidist build现在完美运行。

4

0 回答 0