Cannot find module 'tween' when requiring scroll-to server side

[pixelwhip]

I'm using scroll-to-element in a React app that pre-renders on the server. When requiring scroll-to-element, which is dependent on scroll-to, I get Error: Cannot find module 'tween'.

I believe this is because scroll-to requires component-tween via var Tween = require('tween'); which works in browser environments because of the following in package.json.

  "browser": {
    "raf": "component-raf",
    "tween": "component-tween"
  },

everything works fine in the client, but the application errors out when running on the server because node doesn't know what tween is.

[nitruxa]

can someone take an action on this? thanks

[rotatordisk92]

+1

Any help, @TooTallNate?

[oori]

You can bypass this issue using conditional require. instead of import('react-scroll-to-component'), you require('react-scroll-to-component') in your componentDidMount, so it only happens on the client.

see: vercel/next.js#219 (comment)
It's a hack, but works well..

[fritz-c]

On the off chance that anyone using Gatsby finds their way here, putting this snippet into gatsby-node.js solved it for me:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /scroll-to-element/,
      loader: 'null-loader',
    });
  }
};

[johnferrie]

Thanks, @fritz-c this solved it for me but I had to change /scroll-to-element/ to /scroll-to/

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /scroll-to/,
      loader: 'null-loader',
    });
  }
};

[coreyward]

@tj Any chance you'd be willing to drop this tiny shortcut in favor of saving hundreds of people time in awkward workarounds?

[SimonSomlai]

For people running into this with jest testing. Add this to your jest.config.js

moduleNameMapper: { "^react-scroll-to-component$": "identity-obj-proxy", },

[nnattawat]

@SimonSomlai I did what you mention and it works until my jest test actually triggers scrollTo() in the component file. I fix it by using my mock file instead of dentity-obj-proxy.

// In jest.config.js
moduleNameMapper: { "^react-scroll-to-component$": "/__mock__/react-scroll-to-component", },

// in rootDir/__mock__/react-scroll-to-compone.js 
module.exports = jest.fn();

[ealmario]

Anybody have an answer for this? Mine isn't working on Gatsby.