CRA with eject doesn`t work (Failed to construct 'WebSocket')

[MishaChverkun]

src

• Button.js
• uibook
  • button.uibook.js
  • uibook-controller.js

Button.js

import React, { Component } from 'react';
class Button extends Component {
  render () {
    return (
      <button
        style={{
          background: '#FF7E79',
          padding: '5px 15px',
          border: 'none'
        }}
      >{ this.props.text }</button>
    );
  }
}
export default Button;

button.uibook.js

import UibookCase from 'uibook/case';
import Button from '../button.js';
import React from 'react';

export default {
  background: 'light',
  component: Button,
  cases: [
    () => <UibookCase props={{ text: 'Button' }}></UibookCase>,
    () => <UibookCase props={{  text: 'Button 2' }}></UibookCase>
  ]
}

uibook-controller.js

import UibookStarter from 'uibook/starter';
import ButtonUibook from './button.uibook.js';

export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

Changes in webpack.config.js in plugins:

new UibookPlugin({
        isFixedHeader: true,
        controller: path.join(__dirname, '../src/uibook/uibook-controller.js'),
        outputPath: '/uibook',
        title: 'Uibook',
        hot: true
      }),
new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            excludeChunks: ['uibook'] // added this line
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      )

Change in output: filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/[name].js'// changed bundle to [name]

Versions: "react": "^16.13.1", "react-dom": "^16.13.1", "uibook": "^0.6.1", "webpack": "4.42.0"

Error in console WebsocketClient.js:39 Uncaught DOMException: Failed to construct 'WebSocket': The URL '/sockjs-node' is invalid. at new WebsocketClient (http://localhost:3000/static/js/1.chunk.js:10180:20) at initSocket (http://localhost:3000/static/js/1.chunk.js:10565:12) at Object. (http://localhost:3000/static/js/1.chunk.js:10402:1) at Object../node_modules/webpack-dev-server/client/index.js?/ (http://localhost:3000/static/js/1.chunk.js:10403:30) at webpack_require (http://localhost:3000/static/js/runtime-uibook.js:785:30) at fn (http://localhost:3000/static/js/runtime-uibook.js:151:20) at Object.2 (http://localhost:3000/static/js/uibook.chunk.js:149:1) at webpack_require (http://localhost:3000/static/js/runtime-uibook.js:785:30) at checkDeferredModules (http://localhost:3000/static/js/runtime-uibook.js:46:23) at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/runtime-uibook.js:33:19)

[vrizo]

Hi, @MishaChverkun !

Thanks for your detailed bug report! I have a day planned for an upgrade of the Uibook on 21th of August and I'll try to check the issue. It would be great if you have a public repository with this configuration.

[MishaChverkun]

Hi, @vrizo! Thank you! Sorry for the delay. Here is a configuration https://github.com/MishaChverkun/CRA-configuration

[vrizo]

Hi, @MishaChverkun !

Thanks for the link, it is very helpful to me. I localized the issue and I'm trying to fix it. I can suggest disabling hot reload as a temporary solution (hot: false in Uibook configuration). Hope to fix it soon.

Thank you!