SPA build fails with some packages

[Abbbdab]

Currently testing out the SPA mode with Remix. I have react-icons installed, and by the looks of it the build process for client SPA fails because Vite throws error about CommonJs.

import { BiCog, BiHide, BiShowAlt, BiSearchAlt, BiCommentDetail, BiDotsVerticalRounded, BiSolidEditAlt, BiSearch, BiNetworkChart, BiBarChartSquare, BiUserPlus } from "react-icons/bi/index.esm.js"; ^^^^^^^^^^^^^^^^ SyntaxError: Named export 'BiBarChartSquare' not found. The requested module 'react-icons/bi/index.esm.js' is a CommonJS module

[aarjithn]

Running into same issue with our component library

import { Button } from 'component-library';

gives below error

[vite] Named export 'Button' not found. The requested module 'component-library' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'component-library';
const {Button} = pkg;

Trying the suggestion, throws below Application Error in browser

SyntaxError: The requested module '/node_modules/.vite/deps/component-library.js?v=dd538741' does not provide an export named 'default'

Managed to get it working doing this

import * as pkg from '@envestnet/envreact-component-library';
const { Button } = pkg;

Note: Vite SPA works fine with named imports. It's only remix vite that has the issue.

[Abbbdab]

Unfortunately I couldn’t do that because importing icons in dozens of components would have been a headache. Although I can confirm Vite SPA works fine, only Remix SPA throws the error.

[brophdawg11]

Do these imports fail in npm run dev or npm run build or both? And do they work if you turn off SPA mode and build a normal SSR app?

[Abbbdab]

Happens on npm run build only, and doesn’t throw any error on build with normal SSR app.

[brophdawg11]

Going to close this since we're tracking in #8507 but this is usually an issue with the dependency, not Remix. See https://remix.run/docs/en/main/future/vite#esm--cjs for more information.