react-visibility-sensor: Module not found: Error: Can't resolve 'React' in '/home/capaj/project/node_modules/react-visibility-sensor/dist'

Actually on second thought, it is better to configure webpack to skip transpilation for react-visibility-sensor instead of importing what is essentially a private file. If this package changed its file structure that could cause your code to crash. So instead configure babel-loader as follows and leave your imports and jest config alone!

{
  test: /\.js?$/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
  },
  exclude: /node_modules\/react-visibility-sensor\/.*/
}

import VisibilitySensor from 'react-visibility-sensor/visibility-sensor'

saving my life!

+1, getting a similar error with ReactDOM:

ERROR in ../node_modules/react-visibility-sensor/dist/visibility-sensor.js
Module not found: Error: Can't resolve 'ReactDOM' in '/Users/USER_NAME/Sites/PROJECT_NAME/node_modules/react-visibility-sensor/dist'
resolve 'ReactDOM' in '/Users/USER_NAME/Sites/PROJECT_NAME/node_modules/react-visibility-sensor/dist'
  Parsed request is a module
  using description file: /Users/USER_NAME/Sites/PROJECT_NAME/node_modules/react-visibility-sensor/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/USER_NAME/Sites/PROJECT_NAME/node_modules/react-visibility-sensor/dist/node_modules doesn't exist or is not a directory

A similiar issue with react Dom not resolved ? Any activity here at all ?

Until this get’s resolved I published https://github.com/joshwnj/react-visibility-sensor/pull/151 bundling fix under https://www.npmjs.com/package/@k.sh/react-visibility-sensor if anyone needs a drop-in-fix.

This issue seems to stem from the webpack configuration. I’m not sure why it is written as React and ReactDOM instead of react and react-dom. This can be seen on lines 12 and 18 of webpack.config.js.

// webpack.config.js
let externals = {
    react: {
        commonjs: "react",
        commonjs2: "react",
        amd: "React",
        root: "React"
    },
    "react-dom": {
        commonjs: "react-dom",
        commonjs2: "react-dom",
        amd: "ReactDOM",
        root: "ReactDOM"
    }
};

This causes a webpack output in /dist/visibility-sensor.js of:

if (typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("react"), require("react-dom"));
else if (typeof define === 'function' && define.amd)
    define(["React", "ReactDOM"], factory);  // <---------- My Problem
else if (typeof exports === 'object')
    exports["react-visibility-sensor"] = factory(require("react"), require("react-dom"));
else
    root["react-visibility-sensor"] = factory(root["React"], root["ReactDOM"]);

Of course these modules don’t exist because they are named incorrectly. Perhaps I’m missing something, but it seems if this were changed in the webpack configuration, this would be resolved. If someone can confirm this, I’m happy to submit a PR.

Working Fix (Works for me at least…) For me the issue only occurs when running locally with Storybook. As such, I simply modified the bundled instance. If it’s breaking in production though, you need to fork and modify the webpack configuration. For working locally only, in /dist/visibility-sensor.js, you can just modify line 5 as follows:

// Incorrect Syntax
define(["React", "ReactDOM"], factory);

// Correct Casing
define(["react", "react-dom"], factory);