env is hardcoded to "production" which causes React v17 to fail building properly

[jasonwilliams]

Current behavior

I think there's a mismatch of environment variables being read by babel (JSX config) and Styleguidist, causing some issues deeper down.

(I've noticed this was raised before but was closed)

• build.js sets the env to be production here: https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/build.ts#L9
• This check is redundant because it will always be true, as env is hardcoded from the call above https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/make-webpack-config.ts#L31
• Again, env is hardcoded to production and then passed through here https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/make-webpack-config.ts#L131

So the issue is. My webpack config has mode set to "production" (because mode comes from env) and anything else that uses NODE_ENV will see developement.

I ended up with this error: ReferenceError: _jsx is not defined.

I don't know why its hardcoded to production regardless of what you set, but it seems to be the cause of this bug.

Potential Fix https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/make-webpack-config.ts#L29 should be

env = process.env.NODE_ENV || env

https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/build.ts#L9 should also default to 'development' instead of 'production'

[sapegin]

I guess the idea was to prevent the user environment to affect Styleguidist build. But I guess we shouldn't overwrite the process.env.NODE_ENV because it might lead to a discrepancy with other parts of the project, which is the issue you have.

I guess your solution would be good enough, so feel free to send a pull request.

[Edu93Jer]

Hi @sapegin is anyone still working on the case, I don't know if @jasonwilliams send the PR? If no, could you please explain to me a little more about the project, I'm a newbie and would like to contribute...

[jasonwilliams]

hi @Edu93Jer i have not done a PR for this, feel free to have a go. Please see potential fix at the bottom of my comment https://github.com/styleguidist/react-styleguidist/issues/1721#issue-753531032 for what needs to change

[joelchan24]

Hi Im new in this project, how can I see that error??, Im sorry Im newbie in this

[pbatey]

Just an FYI about another workaround for this (or at least something I think is similar). I'm using [email protected] and [email protected] (IIRC I had to use npm i -f react-styleguidist due to a conflict related to postcss).

Looks like npx styleguidist server works fine, but then npx styleguidist build failed with the following error:

TypeError: Input is not a constructor
    at safeParse (/src/example/node_modules/postcss-safe-parser/lib/safe-parse.js:6:15)
...

I guessed that it was related to the difference between production and development and found that the postcss-safe-parser happens in the minimize section of node_modules/react-scripts/config/webpack.config.js.

I ended up disabling minimize in my styleguide.config.js

const path = require('path')
const pkg = require('./package.json')

const webpackConfig = (env) => {
  const cfg = require('react-scripts/config/webpack.config.js')(env)
  cfg.optimization.minimize = false
  return cfg
}

module.exports = {
  title: 'Example',
  version: pkg.version,
  components: 'src/components/**/[A-Z]*.js',
  webpackConfig
}

I know that I introduced the problem by working around the postcss conflict. But wanted to share my experience in case it helped anyone else.

[rakshithjk]

@jasonwilliams i've raised a PR https://github.com/styleguidist/react-styleguidist/pull/1907 with the fix Please do take a look