Storybook starts with NODE_ENV='production'

[pitops]

Current Behavior

I am wondering why storybook starts with a NODE_ENV of production instead of development? Also of note that just happened to realise, is that the nx report command is not listing the @nrwl/storybook package

  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 10.3.1
  @nrwl/cypress : 10.4.0
  @nrwl/eslint-plugin-nx : 10.4.0
  @nrwl/express : Not Found
  @nrwl/jest : 10.4.0
  @nrwl/linter : 10.4.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 10.4.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 10.3.1
  @nrwl/web : 10.4.0
  @nrwl/workspace : 10.4.0
  typescript : 4.1.2

[juristr]

@pitops where exactly do you see that?

[pitops]

@juristr just console logging process.env gives me NODE_ENV production in storybook stories (not building storybook - running locally)

[parksj10]

I can confirm this is the case for me as well...

Node : 15.6.0
  OS   : darwin x64
  npm  : 6.14.11
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 11.3.0
  @nrwl/cypress : 11.3.0
  @nrwl/devkit : 11.3.0
  @nrwl/eslint-plugin-nx : 11.3.0
  @nrwl/express : Not Found
  @nrwl/jest : 11.3.0
  @nrwl/linter : 11.3.0
  @nrwl/nest : 11.3.0
  @nrwl/next : Not Found
  @nrwl/node : 11.3.0
  @nrwl/react : 11.3.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.3.0
  @nrwl/web : 11.3.0
  @nrwl/workspace : 11.3.0
  typescript : 4.1.5

I tried overriding in the webpack.config.js with the following:

config.mode = 'development';
config.devtool = 'source-map';
config.optimization.minimize = false;
config.optimization.minimizer = [];

and none of it works... Seems like the base config doesn't even use the mode

/**
 * Export a function. Accept the base config as the only param.
 * @param {Object} options
 * @param {Required<import('webpack').Configuration>} options.config
 * @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
 */
module.exports = async ({ config, mode }) => {
  // Make whatever fine-grained changes you need

  // Return the altered config
  return config;
};

Also, not sure if it's the issue, but storybook only accepts development or production, not the DEVELOPMENT or PRODUCTION noted in the parameters

Any ideas on how to bypass/force development mode? I'm currently getting minified react errors that are impossible to debug:

Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=null&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

[pitops]

@parksj10 as a workaround I did the following in webpack.config.js

config.plugins.forEach((plugin) => {
    if (plugin.constructor.name === 'DefinePlugin') {
      plugin.definitions['process.env'] = {
        NODE_ENV: JSON.stringify('development'),
        NODE_PATH: JSON.stringify(''),
        PUBLIC_URL: JSON.stringify('.'),
      }
    }
  })

[parksj10]

@pitops Thanks! I'll add that for now as well... seems the source is still getting bundled, you know if there's a way to turn that off?

[pitops]

@parksj10 what do you refer to as source ?

[parksj10]

@pitops the error stacktrace I'm gettting is still referencing bundle (sorry for my faulty nomenclature), perhaps sourceMapping is necessary? I'm still a relative n00b to webpack and the obfuscation of Nx isn't making the process any easier 😄 :

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
    at createFiberFromTypeAndProps (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:204846:21)
    at createFiberFromElement (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:204874:15)
    at reconcileSingleElement (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:193845:23)
    at reconcileChildFibers (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:193905:35)
    at reconcileChildren (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:196783:28)
    at mountIndeterminateComponent (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:197683:5)
    at beginWork (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:198842:16)
    at HTMLUnknownElement.callCallback (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:183738:14)
    at Object.invokeGuardedCallbackDev (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:183787:16)
    at invokeGuardedCallback (http://localhost:4400/vendors~main.f222bc07ab398a42ec88.bundle.js:183849:31)

[pitops]

ah, probably you mean source maps yes.

That's up to you, if you wish to debug in production then yes you need source maps.

The error is telling you that probably when you exported a component you imported it using this syntax import Component from './XYZ' instead of import {Component} from './XYZ' (or the other way around)

[parksj10]

The above error occurred after I implemented your workaround (I.e. forcing to development), which I thought would start yielding the source mapped error output (like I see when I actually run the app in development mode, instead of storybook)

[pitops]

Well the good news is, it is development mode because the production error you got translates to that in development mode.

However, source mapping is not working properly and probably has to do with your webpack config. However, this github issue is not for that, so I suggest you open another issue if you believe it is related to NX.

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[pitops]

This is issue shouldn't be closed. Please remove these bots. They do more harm than good.

[puku0x]

Same here. In this case, I use Emotion and Storybook reads the wrong runtime.

{
  "presets": [["@nrwl/react/babel", { "importSource": "@emotion/react" }]],
  "plugins": ["@emotion/babel-plugin"]
}

if (process.env.NODE_ENV === "production") {
  module.exports = require("./emotion-react.cjs.prod.js");
} else {
  module.exports = require("./emotion-react.cjs.dev.js");
}

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.