rails: actioncable npm package seems broken

Steps to reproduce

Goto https://tonicdev.com/npm/actioncable and hit run.

I’ve also tried locally by running npm install actioncable --save and then require('actioncable') which gives action_cable.js:4 Uncaught TypeError: Cannot set property 'ActionCable' of undefined.

Expected behavior

Should run without errors.

Actual behavior

ReferenceError: Cable is not defined and action_cable.js:4 Uncaught TypeError: Cannot set property 'ActionCable' of undefined.

System configuration

Node version: 4.4.6

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 32 (17 by maintainers)

Commits related to this issue

Most upvoted comments

Hi @javan I’m working with ReactJS, but I have had problems with ActionCable package. I ran: npm install actioncable --save => version 5.2.0 in package.json file But when I import ActionCable from ‘actioncable’, that rendered to me this problem. How can I deal with it? My webpack.config.js: module: { loaders: [{ test: /\.jsx?$/, loaders: [ "babel?cacheDirectory", ], }] }, My .jsx file: import ActionCable from "actioncable";

The current npm package works with webpack and other module loaders to create a bundle for the browser. Yes, it also sets window.ActionCable, but there’s no need for a separate <script> tag. The next release will have improved support, and will allow you to load it in a node environment for “because”.

Sorry for the trouble! We have every intention of supporting the npm package. I’m just trying to explain the current situation and why I don’t think there’s a need to rush out a new npm release ahead of the next Rails release.

The 5.0.0 npm package works as expected. It includes module support added in https://github.com/rails/rails/pull/24903, which was later improved but not fundamentally altered in https://github.com/rails/rails/pull/25119.

This issue stems from processing it through babel, which won’t work since action_cable.js is not ES2105+ (I think CoffeeScript compiles to ES3 or 4). If you’re using the webpack babel loader, just exclude actioncable. For example, change this webpack.config.js to:

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,10 +9,11 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        exclude: /actioncable/,
         query: {
           presets: ['es2015', 'react']
         }
       },
     ]
   }