Import error in production using Vite.js

[rileyjshaw]

Hi, thanks for the great library! I’m seeing some weird behaviour when trying to bundle it with Vite using their react-ts template.

To get a minimal reproduction, input the following into your terminal:

yarn create vite repro-demo --template react-ts
cd repro-demo
yarn
yarn add react-compare-image

To get react-compare-image into the app, swap the existing src/App.tsx with the following:

import { Fragment, useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import ReactCompareImage from 'react-compare-image'

function App() {
  return (
    <div className="App">
      <ReactCompareImage
          leftImage={reactLogo}
          rightImage={reactLogo}
          handle={<Fragment />}
        />
    </div>
  )
}

export default App

At this point, you should be able to reproduce the error. Build and serve the app in your terminal:

yarn build --minify false --mode development && yarn preview # Development flags added for easier debugging.

When you open the app on http://localhost:4173/, you’ll see the following error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at App.tsx:10.

Logging ReactCompareImage yields the following:

Object {
  __esModule: true
  default: function s(e2)
  Symbol(Symbol.toStringTag): "Module"
  <prototype>: Object { … }
}

---

It looks to me like the export type of react-compare-image is inconsistent between the dev and build workflows. Happy to provide more information if helpful.

[rileyjshaw]

This isn't an issue in Vite 4.0, so I'm going to close it :)

[rileyjshaw]

I spoke too soon! This is still happening in Vite 4.0.

[wnow20]

I just encountered the same issue in native esbuild.

error snapshots:

[eds123]

Getting the same using Vite. Did anyone manage to resolve this?

[wnow20]

@eds123 In my case, I just imported react-compare-image by commonjs function require() in place of the keyword import. Then the problem is gone.

// import  ReactCompareImage from 'react-compare-image'
// replace by
const ReactCompareImage = require('react-compare-image')