Production build error while using ReactPlayer with vite

[jkv27100]

I attempted to integrate ReactPlayer into my project, and it functioned flawlessly on my local environment without any console errors or warnings. However, when I ran the Vite build and served the resulting build, I encountered a perplexing error message: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." Upon meticulous inspection of the properties, I confirmed they were of the correct type. Interestingly, when I commented out the ReactPlayer component and rebuilt the project, the error disappeared.

I am using React 18 , react-player .2.14.1, vite 3.2.4

Here is my vite config

import fs from 'fs'
import * as path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill'

export default () => {
return defineConfig({
plugins: [react()],
define: {
global: 'globalThis'
},
server: {
port: 3000,
proxy: 'https://pixinvent.com/',
cors: {
origin: ['https://pixinvent.com/', 'http://localhost:3000'],
methods: ['GET', 'PATCH', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With']
}
},
css: {
preprocessorOptions: {
scss: {
includePaths: ['node_modules', './src/assets']
}
},
postcss: {
plugins: [require('postcss-rtl')()]
}
},
resolve: {
alias: [
{
find: /^.+/,
replacement: val => {
return val.replace(/^/, '')
}
},
{ find: 'stream', replacement: 'stream-browserify' },
{ find: 'crypto', replacement: 'crypto-browserify' },
{ find: '@src', replacement: path.resolve(__dirname, 'src') },
{ find: '@store', replacement: path.resolve(__dirname, 'src/redux') },
{ find: '@configs', replacement: path.resolve(__dirname, 'src/configs') },
{ find: 'url', replacement: 'rollup-plugin-node-polyfills/polyfills/url' },
{ find: '@Styles', replacement: path.resolve(__dirname, 'src/@core/scss') },
{ find: 'util', replacement: 'rollup-plugin-node-polyfills/polyfills/util' },
{ find: 'zlib', replacement: 'rollup-plugin-node-polyfills/polyfills/zlib' },
{ find: '@utils', replacement: path.resolve(__dirname, 'src/utility/Utils') },
{ find: '@hooks', replacement: path.resolve(__dirname, 'src/utility/hooks') },
{ find: '@assets', replacement: path.resolve(__dirname, 'src/@core/assets') },
{ find: '@layouts', replacement: path.resolve(__dirname, 'src/@core/layouts') },
{ find: 'assert', replacement: 'rollup-plugin-node-polyfills/polyfills/assert' },
{ find: 'buffer', replacement: 'rollup-plugin-node-polyfills/polyfills/buffer-es6' },
{ find: 'process', replacement: 'rollup-plugin-node-polyfills/polyfills/process-es6' },
{ find: '@components', replacement: path.resolve(__dirname, 'src/@core/components') }
]
},
esbuild: {
loader: 'jsx',
include: /./src/..js?$/,
exclude: [],
jsx: 'automatic'
},
optimizeDeps: {
esbuildOptions: {
loader: {
'.js': 'jsx'
},
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true
}),
{
name: 'load-js-files-as-jsx',
setup(build) {
build.onLoad({ filter: /src\..js$/ }, async args => ({
loader: 'jsx',
contents: await fs.readFileSync(args.path, 'utf8')
}))
}
}
]
}
},
build: {
rollupOptions: {
plugins: [rollupNodePolyFill()]
}
}
})
}

[luwes]

please provide a code sandbox repro, you can fork this one
#1721 (comment)

ty!

[jkv27100]

Just tried downgrading to 2.13.0. It is working fine now Thank you!

[rahulbhanushali]

Facing the same issue with 2.13.0 as well.

Update: Was able to resolve this by upgrading to the latest version of vite.

[tb-b]

Same issue here on "vite": "5.0.12" and "react-player": "2.14.1"
Only fix I've found so far was downgrading to 2.13.0

Cannot find module './YouTube-jt1z_dY7.js'