importing react-virtuoso throws error "You may need an appropriate loader to handle this file type."

Question

My project works fine but after installing and importing react-virtuoso it throws error.

ERROR in ./~/react-virtuoso/dist/index.mjs
Module parse failed: C:\Users\Rocky\Documents\betterdash\node_modules\react-virtuoso\dist\index.mjs Unexpected token (364:22)   
You may need an appropriate loader to handle this file type.
|   }
|   const Component = forwardRef((propsWithChildren, ref) => {
|     const { children, ...props } = propsWithChildren;
|     const [system2] = useState(() => {
|       return tap(init(systemSpec), (system22) => applyPropsToSystem(system22, props));
 @ ./src/components/order-viewer.jsx 13:21-46
 @ ./src/main.js
 @ multi whatwg-fetch ./src/main.js

Here is my webpack.config.js

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: ["whatwg-fetch", "./src/main.js"],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: "babel-loader",
        include: path.join(__dirname, "src"),
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react", "flow"],
          plugins: ["transform-flow-strip-types"],
        },
      },
      {
        test: /\.s?css$/,
        loaders: ExtractTextPlugin.extract({
          use: ["css-loader", "sass-loader"],
          fallback: "style-loader",
        }),
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextPlugin({
      filename: "style.css",
      allChunks: true,
      disable: process.env.NODE_ENV === "development",
    }),
  ],
  devtool: "source-map",
};

I tried deleting node_modules then run npm install but it doesn't solve the problem. If I remove the part of code that imports the react-virtuoso the error also gone.

import { Virtuoso } from "react-virtuoso";

Answer 1

I updated my react version and webpack version to latest and it solved the problem.

Answer 2

I had the same problem with Jest and I noticed they have renamed the index.js file to index.cjs from version 4.0.0 to version 4.0. I would assume you have to do something similar with Webpack.

transform: {
    '^.+\\.(cjs|js|jsx)$': [
        'babel-jest',
        { configFile: './babel.config.js' }
    ]
},

If you install V4.0.0 it will work if that is the same issue.