Use storybook for electron app #1435

brandonmp · 2017-07-08T19:48:37Z

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

The text was updated successfully, but these errors were encountered:

arolson101 · 2017-07-21T16:32:19Z

the problem is the iframe that displays the content doesn't inherit require, globals, et al.

Fulla · 2017-10-25T21:22:41Z

some insight on how to deal with this?
I need to use both storybook and the module that I require from the component

0nn0 · 2018-01-22T09:50:10Z

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

dperetti · 2018-09-12T10:51:38Z

Just a thought. If Storybook – when used in Electron – could use the special webview tags (with node integration) instead of iframes, I think it would work.

dperetti · 2018-11-23T19:10:50Z

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' }]
  },
}

shafua · 2018-12-03T17:54:17Z

Hi, I may have solution to this issue. As @dperetti mentioned, it would be useful to have stories that running inside webview tag.
So, I've created small library that start separate electron instance just to show stories which it are served on 9002 port.
Check it out, maybe you'll find it useful: https://github.com/web-pal/electronic-stories

delewis13 · 2020-02-13T02:14:50Z

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' }]
  },
}

Attempting to get Storybook working with electron v7.1.7 & electron-renderer components as per your comment. Am currently running:

Uncaught ReferenceError: global is not defined

Any ideas would be much appreciated!

Cheers :)

dperetti · 2020-02-13T12:02:11Z

Try to add this before the module section!

  plugins: [
    new webpack.DefinePlugin({
      // Workaround for has-symbol failing to find global in iframe.
      global: '(typeof(global) == "undefined" ? top.global : global)',
      process: '(typeof(process) == "undefined" ? top.process : process)',
      'window.require': 'top.window.require', 
    }),
  ],

dperetti · 2020-02-13T14:08:47Z

Also, as for the externals, there is a new nodeIntegrationInSubFrames option for BrowserWindow that I haven't tried but that's probably the solution. I don't think it would fix the "globals" issue though.

delewis13 · 2020-02-15T01:19:10Z

Try to add this before the module section!

  plugins: [
    new webpack.DefinePlugin({
      // Workaround for has-symbol failing to find global in iframe.
      global: '(typeof(global) == "undefined" ? top.global : global)',
      process: '(typeof(process) == "undefined" ? top.process : process)',
      'window.require': 'top.window.require', 
    }),
  ],

Thanks for your help!

I gave it a try, but ended up with Cannot read property 'Symbol' of undefined, where global was again just returning as undefined.

Regardless, I think my knowledge of webpack / storybook is not currently sufficient to fix this issue, so I'll leave this for now and return when i've done enough study to properly troubleshoot rather than bandaid.

Also had a brief look at nodeIntegrationInSubFrames, but that looks to be something i'd do in the main process when instantiating my BrowserWindow? Unsure as to how that would help in Storybook, as as far as I understand Storybook simply renders my component and has no knowledge of BrowserWindows or the like? Unless there is a way to supply that config option to the 'electron-renderer' target?

dperetti · 2020-02-15T11:57:57Z

Are you sure the plugins are applied?

My webpack.config.js looks like this:

const options = {
  target: 'electron-renderer', // https://github.com/webpack/webpack/pull/1467

  externals: {
    'fs': 'top.require(\'fs\')',
    'os': 'top.require(\'os\')',
    'stream': 'top.require(\'stream\')',
    'assert': 'top.require(\'assert\')',
    'constants': 'top.require(\'constants\')',
    'process': 'top.require(\'process\')',
    'crypto': 'top.require(\'crypto\')',
    'path': 'top.require(\'path\')',
    'events': 'top.require(\'events\')',
    'electron': 'top.require(\'electron\')',
    'util': 'top.require(\'util\')',
    'querystring': 'top.require(\'querystring\')',

    'worker_threads': {}, // shut up annoying warning triggered by node_modules/write-file-atomic/index.js
  },

  resolve: { // http://webpack.github.io/docs/configuration.html#resolve
    alias: {
    },
    extensions: ['.mjs', ".ts", ".tsx", ".js"]
  },
  plugins: [

    new webpack.DefinePlugin({
      // Workaround for has-symbol failing to find global in iframe.
      global: '(typeof(global) == "undefined" ? top.global : global)',
      process: '(typeof(process) == "undefined" ? top.process : process)',
      'window.require': 'top.window.require',
    }),
  ],
  module: {
    rules: [...] 
  },
}

module.exports = async ({ config, mode }) => {
  // console.log(config)
  const c = {
    ...config,
    plugins: [...config.plugins, ...options.plugins],
    externals: options.externals,
    resolve: options.resolve,
    module: { ...config.module, ...options.module }
  }
  return c
}

Also I launch Storybook like this:

start-storybook -p 9001 -c storybook --ci

And I launch electron separately:

electron stories/electron_index.js

electron_index.js

const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer')
const app = require('electron').app
const BrowserWindow = require('electron').BrowserWindow
app.commandLine.appendSwitch('disable-web-security')
app.commandLine.appendSwitch('remote-debugging-port', '5858')

app.on('ready', function() {

  mainWindow = new BrowserWindow({
    width: 1100,
    height: 800,
    allowRunningInsecureContent: true,
    webPreferences: {
      nodeIntegration: true,
      webviewTag: false,
      sandbox: false,
      allowRunningInsecureContent: true,
      offscreen: false,
      webSecurity: false,
      contextIsolation: false,
    },
  })

  mainWindow.loadURL('http://localhost:9001')

  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
})

So it's totally possible to tweak the BrowserWindow.

f-o-w-l · 2021-08-23T21:52:16Z

After completely copying the webpack.config.js graciously provided by @dperetti, I am still receiving the same error Uncaught ReferenceError: require is not defined.

The only thing I needed to change was adding @storybook/addon-postcss in Storybook's main.js addons, and in webpack.config.js using module.exports = options instead of dperetti's async function (was receiving error using it).

ndelangen · 2023-01-17T23:06:49Z

We do not support electron, and don't have any plans to add support right now.

danielduan added the compatibility with other tools label Aug 27, 2017

stale bot added the inactive label Dec 9, 2017

stale bot closed this as completed Dec 24, 2017

This was referenced Jan 12, 2018

puppeteer versions available: 1.0.0 #2731

Closed

puppeteer versions available: 1.0.0 #2732

Closed

pksunkara added todo and removed inactive labels Sep 12, 2018

pksunkara reopened this Sep 12, 2018

igor-dv added the feature request label Sep 12, 2018

pksunkara changed the title ~~use with electron app~~ Use storybook for electron app Sep 13, 2018

storybookjs deleted a comment from stale bot Oct 13, 2018

dperetti mentioned this issue Jun 17, 2019

@storybook 5.1.1 is throwing an error on build #6984

Closed

jacobcoughenour mentioned this issue May 1, 2021

Setup Storybook for component library jacobcoughenour/odin#22

Open

distributev mentioned this issue Oct 9, 2021

Integrate https://storybook.js.org/ into angular-electron maximegris/angular-electron#645

Closed

ndelangen closed this as completed Jan 17, 2023

zivnadel mentioned this issue Apr 21, 2023

Integrate Storybook in the project yonatanmgr/mathberet#26

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use storybook for electron app #1435

Use storybook for electron app #1435

brandonmp commented Jul 8, 2017

arolson101 commented Jul 21, 2017

Fulla commented Oct 25, 2017

0nn0 commented Jan 22, 2018

dperetti commented Sep 12, 2018 •

edited

Loading

dperetti commented Nov 23, 2018 •

edited

Loading

shafua commented Dec 3, 2018

delewis13 commented Feb 13, 2020 •

edited

Loading

dperetti commented Feb 13, 2020

dperetti commented Feb 13, 2020

delewis13 commented Feb 15, 2020 •

edited

Loading

dperetti commented Feb 15, 2020

f-o-w-l commented Aug 23, 2021

ndelangen commented Jan 17, 2023

Use storybook for electron app #1435

Use storybook for electron app #1435

Comments

brandonmp commented Jul 8, 2017

arolson101 commented Jul 21, 2017

Fulla commented Oct 25, 2017

0nn0 commented Jan 22, 2018

dperetti commented Sep 12, 2018 • edited Loading

dperetti commented Nov 23, 2018 • edited Loading

shafua commented Dec 3, 2018

delewis13 commented Feb 13, 2020 • edited Loading

dperetti commented Feb 13, 2020

dperetti commented Feb 13, 2020

delewis13 commented Feb 15, 2020 • edited Loading

dperetti commented Feb 15, 2020

f-o-w-l commented Aug 23, 2021

ndelangen commented Jan 17, 2023

dperetti commented Sep 12, 2018 •

edited

Loading

dperetti commented Nov 23, 2018 •

edited

Loading

delewis13 commented Feb 13, 2020 •

edited

Loading

delewis13 commented Feb 15, 2020 •

edited

Loading