Uncaught Error: "version" is a required argument.

[marcelfalliere]

Hi all,

I've been working all day trying to integrate this into an "old-school" react-js. With a Makefile.

So it has been a wild ride I admit. After a lot of tweaks and googling around I'm now stuck to a wall. Don't know what I do wrong.

The npm start says webpack: bundle is now VALID. without any warning.

Naviguating to localhost:3001 the console says :

[HMR] Waiting for update signal from WDS...
Deprecation warning: use moment.updateLocale(localeName, config) to chan ...
Uncaught Error: "version" is a required argument.
      getArg    @   util.js:28
      BasicSourceMapConsumer    @   source-map-consumer.js:292
      SourceMapConsumer @   source-map-consumer.js:26
      module.exports    @   index.js:88
      ReactCompositeComponentMixin.mountComponent   @   ReactCompositeComponent.js:148
WebSocket connection to 'ws://localhost:3001/sockjs-node/679/agc34szt/websocket' failed: Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was received
[WDS] Hot Module Replacement enabled.

Oh maybe the problem is with the websocket connection ? Hum. Some more files 👍

webpack.config.js

var path = require("path"),
  webpack = require("webpack"),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: "source-map",
  entry: [
    "webpack-dev-server/client?http://localhost:3001",
    "webpack/hot/only-dev-server",
    "./src/index.jsx"
  ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "build.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "TESTAPP",
      template: "src/index-template.html"
    }),
    new ExtractTextPlugin("build.css"),
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ["", ".jsx", ".js", ".json", ".svg", ".woff", ".ttf", ".eot"],
    root: [
      path.resolve('./src')
    ]
  },

    // moduleDirectories: [
    //   "./node_modules",
    //   "./node_modules/font-awesome",
    //   "./node_modules/font-awesome/css",
    //   "./src/img"
    // ]

  module: {

    // liste de nos loaders
    // ! \\ à noter que les loaders sont exécutés en ordre inverse
    // les premiers en dernier, en utilisant la sortie du suivant

    loaders: [

      {
        test: /\.jsx$/,
        loader: "babel",
        exclude: /(node_modules|bower_components)/,
        include: path.join(__dirname, "src"),
        query: {
          presets: ["es2015", "react"]
        }
      },

      {
        test: /\.json$/,
        loader: "json"
      },

      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
        // include: [
        //   path.join(__dirname, "src"),
        //   path.join(__dirname, "node_modules/font-awesome/css/font-awesome.css")
        // ]
      },

      {
        test: /\.svg$/,
        loader: 'svg-loader'
      },

      // {
      //   test: /\.svg$/,
      //   include: path.join(__dirname, "src/img"),
      //   loader: "svg"
      // },

      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: "file"
      }

      // {
      //   test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      //   loader: 'url-loader?limit=100000'
      // }

    ]

  }
};

index.jsx

if (!window.TESTAPP_ROOT_URL) {
  window.TESTAPP_ROOT_URL = "http://localhost:3000";
}

if (!window.TESTAPP_APP_VERSION) {
  window.TESTAPP_APP_VERSION = "development";
}

var AppContainer = require('react-hot-loader');
var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./app');

var locales = require("./locales");
var intlData = locales.getReactIntlData();

const rootEl = document.getElementById('app-container');

ReactDOM.render(
  <AppContainer>
   <App {...intlData} />
  </AppContainer>
,rootEl);

if (module.hot) {
  module.hot.accept('./app', function(){
    debugger
    ReactDOM.render(
      <AppContainer>
       <App {...intlData} />
      </AppContainer>
    ,rootEl);
  });
}

Do you see anything wrong with this ?

[calesce]

@marcelfalliere It looks like you're not importing AppContainer correctly, should be:

var AppContainer = require('react-hot-loader').AppContainer;

If that doesn't fix your issue, can you please share a minimal project reproducing the problem? Thanks.