'Use of eval is strongly discouraged' warning in rollup

[neilgd]

When using rollup to package a component that references react-paginate, it spits out the following warning:

(!) Use of eval is strongly discouraged https://rollupjs.org/guide/en/#avoiding-eval node_modules/react-paginate/dist/react-paginate.js

I am using version 8.1.3.

Any ideas? Thank you!

[MonsieurV]

Hi @neilgd,

This is certainly due to the Babel dist of react-paginate. (Cf babel.config.js

You can try to transpile yourself from the React-Paginate source code, importing from:

import ReactPaginate from './node_modules/react-paginate/react_components/index.js

(Then you are responsible for the right Babel/transpiling settings, if any is required on your target)

Anyway there is no eval directly in the library code, but only on the Babel output.

[silverwind]

The problem comes from react-hot-loader. With it removed, there is no more eval in the compiled file.

[MonsieurV]

I removed it (trying to replace it by react-refresh in dev). No more eval in the build indeed. Thanks @silverwind.

@AdeleD can you release https://github.com/AdeleD/react-paginate/releases/tag/v8.1.4? Thx

[silverwind]

Another nice thing about this change is that bundle size goes down from 23kB to 15kB.

[AdeleD]

Is the replacement of react-hot-loader by react-refresh mandatory? I guess the issue was "just" that react-hot-loader was not correctly removed from the production build, or do I miss something?

[MonsieurV]

Is the replacement of react-hot-loader by react-refresh mandatory? I guess the issue was "just" that react-hot-loader was not correctly removed from the production build, or do I miss something?

Well, I thought the same, then I read the CHANGELOG on 7.1.3 and related commit, then this comment and quote and finally looked at this (like @silverwind pointed): the issue is that the Babel config does include the react-hot-loader plugin. And that this config is not really meant to

The Babel plugin for the react-hot-loader is (considered) production safe, and is really minimal. But it does includes an eval and some minimal unnecessary code for production. It seems just better for me to do without.

And for the dev experience, react-hot-loader is deprecated, so I tried react-refresh (but my webpack-dev-middleware setup must be wrong atm).

[AdeleD]

Ok, I understand. Thanks for the explanation.