Busted import with react-rails/webpacker

[Jeremy-coding]

This looks like a great library, but unfortunately it appears I can't use it.

I'm using react-rails (with webpacker) to run React components in the frontend of a Rails app.

yarn add bottleneck works fine, but then adding import Bottleneck from 'bottleneck' to the top of my component immediately breaks everything.

Console output looks like this:

Hello World from Webpacker application.js:18
Download the React DevTools for a better development experience: https://fb.me/react-devtools react-dom.development.js:22333
TypeError: ""exports" is read-only"
    js Events.js:243
    js Events.js:1
    Webpack 19
    
    __webpack_require__
    
    js
    
    __webpack_require__
    
    js
    
    js
    
    __webpack_require__
    
    js
    
    __webpack_require__
    
    js
    
    __webpack_require__
    
    js
    
    __webpack_require__
    
    js
    
    __webpack_require__
    
    webpackContext
    
    exports
    
    exports
    
    mountComponents
    
    handleMount
fromRequireContextWithGlobalFallback.js:21
EvalError: "call to eval() blocked by CSP"
    React 4
    
    exports
    
    exports
    
    mountComponents
    
    handleMount
fromRequireContextWithGlobalFallback.js:22
[react-rails] Cannot find component: 
... etc.

I tried playing around with the suggested solutions here and here but to no avail.

Obviously some kind of conflict with Webpack and how this particular package is exported. If this is a problem with Webpack I can move the issue over there, but this has uniquely happened with importing bottleneck.

[SGrondin]

Hi, thanks for opening the issue. It appears to be an issue in Webpack and/or Babel but since most other modules work just fine I'll see if I can find a workaround that won't break any existing code that relies on Bottleneck.

[SGrondin]

This looks like a great library, but unfortunately it appears I can't use it.

In the mean time I suggest you try replacing

import Bottleneck from 'bottleneck'

with

const Bottleneck = require('bottleneck')

That should work everywhere.

[Jeremy-coding]

Changes in the feature spec meant I ended up not needing rate limiting at all, so definitely don't pour time into fixing this on my behalf but hopefully the issue is still useful to you.