Issue with dependency react-visibility-sensor

[pcast01]

I am having a problem in my cli with a dependency that is in this library. Please reference to this link https://github.com/joshwnj/react-visibility-sensor/issues/148, where I detail the issue for this other repo called react-visibility-sensor. This error makes your repo not work and I have the fix/hack that I found to have the react-visibility-sensor point to the correct react-dom dependency.

ERROR in ./node_modules/react-visibility-sensor/dist/visibility-sensor.js
Module not found: Error: Can't resolve 'ReactDOM' in 'C:\Software\BTS\Flipl\node_modules\react-visibility-sensor\dist'
 @ ./node_modules/react-visibility-sensor/dist/visibility-sensor.js 4:286-324
 @ ./node_modules/react-vertical-timeline-component/dist-es6/VerticalTimelineElement.js
 @ ./node_modules/react-vertical-timeline-component/dist-es6/index.js
 @ ./app/components/Modules/FliplTimeline.js
 @ ./app/components/App.js
 @ ./public/index.js
 @ multi babel-polyfill whatwg-fetch ./public/index.js

I am on Node version: 12.13.0.

If there is any ideas that will help resolve this I would appreciate it.

Also I might be able to help fix this if you would like a PR. I might be able to replace this dependency with another one or possibly create the scroll to animation.

[stephane-monnot]

I can't reproduce this issue. Which version of React and react dom are you using ? I tried with :

    "react": "^16.4.2",
    "react-dom": "^16.4.2",

[pcast01]

Thanks for the reply!

I am using these versions:

"react": "^16.7.0",
"react-dom": "^16.8.4"

[stephane-monnot]

I tried with the same versions. After installing dependencies, I have react@16.12.0 and react-dom@16.12.0. No problem. Maybe the babel or webpack config ?

For your information, I test with the demo of this package.

git clone https://github.com/stephane-monnot/react-vertical-timeline.git
cd react-vertical-timeline

Change react and react-dom version in package.json. And run

yarn install
yarn start

[pcast01]

I am updating my react and react-dom versions to test that out. Also I am having a friend test out your recommendation.

Here is my webpack.config file in development mode. Let me know if you see anything that might be the issue.

const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const AsyncChunkNames = require("webpack-async-chunk-names-plugin");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: `${__dirname}/public/index.html`,
  excludeChunks: ["base"],
  filename: "index.html",
  minify: {
    collapseWhitespace: true,
    collapseInlineTagWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true
  }
});

module.exports = {
  mode: "development",
  optimization: {
    usedExports: true,
    concatenateModules: true,
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,

        vendor: {
          name: "vendor",
          chunks: "all",
          test: /node_modules/
        },

        common: {
          name: "common",
          minChunks: 2,
          chunks: "async",
          priority: 10,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },
  // devtool: "cheap-eval-source-map", // Remove this line for super small bundle sizes
  entry: ["babel-polyfill", "whatwg-fetch", `${__dirname}/public/index.js`],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader?cacheDirectory",
        include: __dirname,
        query: {
          presets: ["@babel/env", "@babel/react"],
          plugins: [
            "@babel/plugin-syntax-dynamic-import",
            "@babel/plugin-proposal-class-properties"
          ] // https://stackoverflow.com/questions/35517245/error-missing-class-properties-transform
        }
      },
      {
        test: /\$/,
        include: /node_modules/,
        type: "javascript/auto"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader"
        ]
      },
      { test: /\.(woff|woff2|eot|ttf)$/, use: ["url-loader?limit=100000"] },
      {
        test: /\.(png|jpg|gif|mp3|ico|svg)$/,
        loader: "file-loader",
        options: {}
      }
    ]
  },
  output: {
    filename: "transformed.js",
    path: `${__dirname}build`,
    chunkFilename: "[name].js"
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".json"]
  },
  node: {
    console: true,
    fs: "empty",
    net: "empty",
    tls: "empty",
    dns: "empty",
    dgram: "empty"
  },
  plugins: [
    HTMLWebpackPluginConfig,
    new LodashModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development")
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new AsyncChunkNames()
  ],
  devServer: {
    historyApiFallback: true
  }
};

I also have a different webpack.production.config that is not letting me build and comes up with an error:

Unexpected token: operator «=» in uglifyjs

not sure if this is related but could be.

[stephane-monnot]

Do you have source code or GitHub/GitLab repo or CodeSandbox to check out?

[pcast01]

Ah I don't have it anywhere. I can't release it anywhere for privacy concerns. My friend your repo in both npm and yarn and got the same error. Let me get the error message.

[stephane-monnot]

Did you try to remove node_modules and reinstall dependencies ?

[pcast01]

Good idea. I'll try that.

[fpigeonjr]

I tried with the same versions. After installing dependencies, I have react@16.12.0 and react-dom@16.12.0. No problem. Maybe the babel or webpack config ?

For your information, I test with the demo of this package.

git clone https://github.com/stephane-monnot/react-vertical-timeline.git
cd react-vertical-timeline

Change react and react-dom version in package.json. And run

yarn install
yarn start

I am getting errors on yarn start. I have tried on 2 systems linux and mac and getting the same results.

Error is in reference the Catalog.

I am running node-lts, version v12.14.0

[stephane-monnot]

I can reproduce this error. But I don't understand why it's happened.

If you delete node_modules et run again "install" and "start", it will fix the error.

yarn install
yarn start

I can't understand why... I will check it tomorrow if I have time.

[pcast01]

I removed node_modules and I still received the error on my PROD webpack config.

So I have added the hack and it got past that error. Ultimately it is a problem with react-visibility-sensor.

I really appreciate you helping to troubleshoot this issue and taking the time. If you have anymore feedback let me know. I will keep you posted on any changes I see to this issue.

[pcast01]

@stephane-monnot any thoughts/new progress on this issue? Just wanted to check in and see if you have anything.

[stephane-monnot]

@fpigeonjr I tried a fix (on master branch), could you try again ? @pcast01 could you try again to install the demo and run it ?

[fpigeonjr]

@stephane-monnot. I can confirm that I spin up the project. Thanks!

[pcast01]

@stephane-monnot Let me know when you are going to do a new release for this repo. Thanks for the work you do!

[fpigeonjr]

any news on this @stephane-monnot? Thanks!

[stephane-monnot]

I can't reproduce the problem. I tried on many projects, it works. Could you provide a full example ?

[fpigeonjr]

I can't reproduce the problem. I tried on many projects, it works. Could you provide a full example ?

@pcast01 Do you have code examples to provide?

[pcast01]

@stephane-monnot Thanks for all the help. I was able to use a workaround and I know this isn't your issue. I did find out that the origin of this issue is stated here: https://github.com/joshwnj/react-visibility-sensor/issues/148#issuecomment-589248631.