React_on_rails: ERROR in only one instance of babel-polyfill is allowed

[seoyoochan]

When I do server-side rendering and click <a href="/link">link</a>,
I get this ERROR in only one instance of babel-polyfill is allowed.
Instead, as a workaround, we can fix it when you replace anchor tag with <Link to='/link'>link</Link>.
please reproduce this error.
thanks.

[justin808]

@seoyoochan Link is for react-router.

Can you create a small example with this issue?

The easiest is to modify the demo in https://github.com/shakacode/react_on_rails/blob/master/spec%2Fdummy%2FREADME.md

[seoyoochan]

@justin808

[justin808]

@seoyoochan you're probably importing this package twice.

This is a common problem.

This is how ensure only one instance of react.

See https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.base.config.js#L33

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      libs: path.join(process.cwd(), 'app', 'libs'),
      react: path.resolve('./node_modules/react'),
      'react-dom': path.resolve('./node_modules/react-dom'),
    },
  },

[seoyoochan]

@justin808 I did not import the package twice. I fixed it when I removed //=require turbolinks from a js file.

[justin808]

@seoyoochan for some reason, turning off turbolinks is fixing the issue for you. I think that indicates a problem with your turbolinks configuration.

[BrianTatum]

I am having the same error thrown in my console. I added "libs: path.join(process.cwd(), 'app', 'libs')," to my webpack.config.js file from the above post. I am using the React_on_Rails gem v6. Is there an updated version that fixes this problem or another work around? I did add a react component with npm called react-big-calendar. Can that be the problem? Other than this problem, great Gem for adding React.js into Rails!!

[justin808]

@BrianTatum Please try the latest version! We've had some updates!

[dineshPallapa]

@justin808 I am also facing the same issue with babel-polyfill. I tried by adding 'libs: path.join(process.cwd(), 'app', 'libs'),' to my webpack.config.js but It didn't help me to resolve it. I am able to reproduce this issue while navigation from one page to other with rails routes.

[szyablitsky]

I solved this issue by creating app/babel-ployfill.js

if (!global._babelPolyfill) require('babel-polyfill')

And I removed direct link to this module from webpack config

Now it looks like

  entry: {
    // See use of 'vendor' in the CommonsChunkPlugin inclusion below.
    vendor: [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      './app/babel-polyfill',
      'whatwg-fetch',
      'turbolinks',
    ],
    // This will contain the app entry points defined by webpack.hot.config and webpack.rails.config
    app: [
      './app/bundles/client_registration',
      './app/event_handlers/',
    ],
  },

[dineshPallapa]

@szyablitsky Thanks a lot Its works fine Issue was resolved now.

[rteobaldo]

@szyablitsky thanks very much, this worked with me too.