3

As specified in their documentation, using Tailwind CSS with CRA (create-react-app) requires replacing react-scripts with craco.

Now, I'm trying to build a component library using React Styleguidist. I was able to get Tailwind CSS to display correctly in localhost when running styleguidist server by specifying in the styleguide.config.js to use the craco webpack config file in with craco's API like so

/* 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')
  ]
}

However, when I try to build the production HTML using styleguidist build, it throws these errors

 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

I was able to build without errors by running the command with the config from react-scripts like so npx styleguidist build --config ./node_modules/react-scripts/config/webpack.config.js

I successfully deployed it onto Vercel here https://react-components-fho7l1ov3-discover-pom.vercel.app/ but none of my styles are displaying correctly and tailwindcss doesn't get applied

I've tried looking inside at the files in ./node_modules/@craco/craco/lib/features/webpack/babel.js but I don't understand what the issue could be...

Inside ./node_modules/react-refresh/cjs/react-refresh-babel shows the error that gets thrown, but I honestly have no idea why it's complaining

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.');
    }
  }
...
Andreas
  • 430
  • 5
  • 21
carrotjuicelol
  • 31
  • 2
  • 2
    Please add your solution as an answer to your own question. This better indicates the question already has an answer. – juliomalves Mar 15 '21 at 22:28

1 Answers1

0

@carrotjuicelol figured it out. He had to use the prod version of craco's webpack config like so

/* 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 now works perfectly.

Andreas
  • 430
  • 5
  • 21