Use storybook for electron app

versions:

"@storybook/addon-actions": "^3.1.8",
    "@storybook/react": "^3.1.8",

I’m trying to use Storybook with an electron app. The components are vanilla JS, but some of them import modules from electron

In my app, I configure webpack to target: 'electron-renderer', and this works fine

However, in storybook, doing so results in the error below.

Has anyone configured storybook to work correctly with electron?

external "crypto"?ef49:1 Uncaught ReferenceError: require is not defined
    at Object.REACT_STATICS.childContextTypes (external "crypto"?ef49:1)
    at __webpack_require__ (bootstrap 25805c1…?42ca:661)
    at fn (bootstrap 25805c1…?42ca:87)
    at Object.byteToHex (rng.js?025f:4)
    at __webpack_require__ (bootstrap 25805c1…?42ca:661)
    at fn (bootstrap 25805c1…?42ca:87)
    at Object.<anonymous> (v1.js?2980:1)
    at __webpack_require__ (bootstrap 25805c1…?42ca:661)
    at fn (bootstrap 25805c1…?42ca:87)
    at Object.<anonymous> (preview.js?2318:26)
  | REACT_STATICS.childContextTypes | @ | external "crypto"?ef49:1
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | byteToHex | @ | rng.js?025f:4
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | (anonymous) | @ | v1.js?2980:1
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | (anonymous) | @ | preview.js?2318:26
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | canDefineProperty | @ | index.js?7950:16
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | (anonymous) | @ | register.js:1
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | (anonymous) | @ | addons.js:3
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | fn | @ | bootstrap 25805c1…?42ca:87
  | (anonymous) | @ | ReactPropTypesSecret.js:14
  | __webpack_require__ | @ | bootstrap 25805c1…?42ca:661
  | validateFormat | @ | bootstrap 25805c1…?42ca:707
  | (anonymous) | @ | manager.bundle.js:711

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:12

Top GitHub Comments

3reactions

dperetticommented, Nov 23, 2018

OK, got it working! 😜 require is not available in the iframe but it is accessible in the parent document, using top.require (provided Electron is running with low security settings, which should be the case when it’s called using the electron binary, using electron http://localhost:9001). The trick is to overwrite default externals for webpack’s electron-renderer target and any node-related require that is called directly or indirectly by your components.

Here is my webpack.config.js:

module.exports = {
  target: 'electron-renderer',
  externals: {
    'fs': 'top.require(\'fs\')',
    'path': 'top.require(\'path\')',
    'events': 'top.require(\'events\')',
    'electron': 'top.require(\'electron\')',
    'util': 'top.require(\'util\')',
    'querystring': 'top.require(\'querystring\')',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          babelrc: false,
          presets: ['@babel/react', '@babel/flow',
            ['@babel/preset-env', {
              'targets': {
                'electron': '3.0.4'
              }
            }]
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties', 
            '@babel/plugin-proposal-object-rest-spread',
            ['@babel/plugin-transform-modules-commonjs', {
              'lazy': (module) => {
                // console.log(module)
                return true
              }
            }]
          ],
        }
      },
      {
        test: /(\.less|\.css)$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }]
  },
}

3reactions

0nn0commented, Jan 22, 2018

Has anyone been able to get this working with Electron? Would love to use Storybook for our Electron based project.