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 https://github.com/cookpete/react-player/issues/1721#issuecomment-1862803107

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'