require('ts-pattern') not work on react-scripts 5 but work on react-scripts 4.

[ChengOuyang]

Describe the bug

const tsPattern = require('ts-pattern');

The tsPattern is a string but not a module on react-scripts 5, and other library is work.

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1. npx create-react-app ts-pattern-test
2. cd ts-pattern-test
3. pnpm add ts-pattern
4. code in src/index.js:

const tsPattern = require('ts-pattern');

Expected behavior

The tsPattern should be a module be return a string on react-scripts 5, and other library is work.

Actual behavior

(Write what happened. Please add screenshots!)

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[licg9999]

Hi @ChengOuyang, I found this issue interesting so being here to help.

Firstly, I saw you were initializing the project directory ts-pattern-test with npx which is sub command of npm but the package ts-pattern was installed with pnpm add. Would you try another project directory with npm install -S to install ts-pattern so to keep the initialization command and the installation command consistent?

Secondly, I gave a try with the codesandbox: https://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.js It seems that the package ts-pattern just works well. So, I believe the first tip might help you out. Let me know if you got any other problem.

[ChengOuyang]

Hi @ChengOuyang, I found this issue interesting so being here to help.

Firstly, I saw you were initializing the project directory ts-pattern-test with npx which is sub command of npm but the package ts-pattern was installed with pnpm add. Would you try another project directory with npm install -S to install ts-pattern so to keep the initialization command and the installation command consistent?

Secondly, I gave a try with the codesandbox: https://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.js It seems that the package ts-pattern just works well. So, I believe the first tip might help you out. Let me know if you got any other problem.

esm import is work, but cjs require not work

[licg9999]

Emm..., changing import to require, I didn't see any difference though. Looks it still works: https://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.js

[licg9999]

Hmm..., looks I can reproduce in my local. Looking into it...

[ChengOuyang]

Hmm..., looks I can reproduce in my local. Looking into it...

Reproduce the project below:
https://github.com/ChengOuyang/ts-pattern-test

[ChengOuyang]

Emm..., changing import to require, I didn't see any difference though. Looks it still works: https://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.js

I can't reproduce it on sandbox either, but I can reproduce it locally with cra……

[licg9999]

Thanks @ChengOuyang. Let me take a look.

[licg9999]

Looks when using require('ts-pattern'), dist/index.cjs in ts-pattern will get used. And, all .cjs files are treated as assets by CRA for now. So, the result is, you end up with a string.

By far, adding support for the .cjs file extension is getting handled by this PR #12021 but the PR remains not merged for quite a period. I don't know whether it will be merged some day.(Perhaps never, because it might be the expected way how CRA works. 🥲)

My suggestion is, you may stick to import instead of require as the esm format is always preferred today. But if you have to use require, you may import and export ts-pattern in another new file, then require this new file, like this: https://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.js

[ChengOuyang]

Thanks @ChengOuyang. Let me take a look.

Thanks

用的时候看require('ts-pattern')，dist/index.cjs在ts-pattern就会用。而且，目前所有.cjs文件都被 CRA 视为资产。所以，结果是，你最终得到了一个字符串。

到目前为止，此 PR #12021.cjs正在处理添加对文件扩展名的支持，但 PR 在相当长的一段时间内仍未合并。我不知道它是否会在某一天被合并。（也许永远不会，因为这可能是 CRA 工作的预期方式。🥲)

我的建议是，您可以坚持使用 esm 格式，import而不是require因为今天总是首选。但是如果你必须使用，你可以在另一个新文件中require导入和导出，然后这个新文件，像这样：https ://codesandbox.io/s/brave-buck-g0cvb8?file=/src/App.jsts-pattern``require

Thanks, this problem we found in the project is actually two problems:

1. The esm module was expected to be import, but the cjs module was import instead;
2. An error was found when importing the cjs module of ts-pattern;

We have solved problem 1, and the project is running normally, but problem 2 is rather strange, so I went to the official here to mention it...

[licg9999]

For tip 1, the behavior of including which file is actually determined by the exports field in package.json. Here is how it works: https://webpack.js.org/guides/package-exports/.

For tip 2, yep, agree, it could feel a bit strange that .cjs file is not supported. Hoping this PR #12021 will get merged soon. 🙂