SSR not working with cjs modules

[dmitryshelomanov]

Describe the bug

I try to build ssr project, but cant to build production with cjs modules
And simple demo well works with hack ( ssr: {
noExternal:
mode === "production" ? ["react-copy-to-clipboard", "date-fns"] : [],
},), but crash with any error (filename.js not existed, but it already)

Reproduction

https://stackblitz.com/edit/github-vke2fz-67onp4?file=README.md

Steps to reproduce

yarn dev - failed
yarn run build
yarn run prod - failed (with noExternal its ok, but dev failed)

System Info

*

Used Package Manager

yarn

Logs

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-vke2fz-67onp4 (Open reproduction)

[dmitryshelomanov]

file not found, but exists ?

[benmccann]

This looks to me like it's probably a usage/packaging issue. That library distributes CJS, but doesn't expose named exports with module.exports.CopyToClipboard = ... and just has a single export.

Does it work better if you change import { CopyToClipboard } from 'react-copy-to-clipboard'; to

import * as ReactClipboard from 'react-copy-to-clipboard';
...
<ReactClipboard.CopyToClipboard ...

Or maybe

import ReactClipboard from 'react-copy-to-clipboard';
...
<ReactClipboard.CopyToClipboard ...

I'm not exactly sure how to run your reproduction and test it, but I expect one of those would fix it.

[hai-x]

benmccann

I think you are right. CopyToClipboard expose default exports, instead of named exports.

When yarn dev, ebuild handle the esm & cjs interop problem.

// input
import { CopyToClipboard } from "react-copy-to-clipboard";
console.log(CopyToClipboard);
// output
var import_react_copy_to_clipboard = __toESM(require_lib(), 1);
console.log(import_react_copy_to_clipboard.CopyToClipboard);

When yarn build & prod, CopyToClipboard is imported absolutely from node_modules, instead of bundle

"use strict";
var _require = require('./Component'),
    CopyToClipboard = _require.CopyToClipboard;

CopyToClipboard.CopyToClipboard = CopyToClipboard;
module.exports = CopyToClipboard;

I just try solutions provided by @benmccann , and it works for me.

[benmccann]

Great! I'll go ahead and close this then