Webpack 3 和 .cjs/.mjs 文件 package.json

如何解决Webpack 3 和 .cjs/.mjs 文件 package.json

背景

我们的产品（遗憾的是）仍在 Webpack 3 上。希望升级，但与此同时，我正在尝试使用捆绑 cjs、mjs 和 iffe 的 npm 库文件。 （请参阅下面的 package.json 摘录）。

问题是当我从这些文件导入时 Webpack 会报错。

import { styled } from '@stitches/react';

这会引发以下错误：

ERROR in ./node_modules/@stitches/react/dist/index.cjs
Module parse Failed: Unexpected token (1:9356)
You may need an appropriate loader to handle this file type.

意外标记是随机的，例如 n 或变量名称。源代码在社区中被广泛使用，因此它可能不是代码中的错误。

将代码复制粘贴到 src 时有效

在我们的 Babel 设置中，我们不会触及 node_modules 中的任何内容，但是当我将 dist/index.cjs 或 dist/index.mjs 的内容复制到我们的 src 目录并将其导入时在那里，一切正常。

在我看来，源代码存在以下问题：a) 如何将其作为模块导入，或 b) 需要某种转换才能与我们的设置一起使用。

问题

这与 Webpack 3 有什么关系吗？ mjs 和 cjs 文件有问题吗？

package.json

{
  "name": "@stitches/react","version": "0.2.3","description": "The modern css-in-JS library","type": "module","main": "dist/index.cjs","module": "dist/index.mjs","types": "types/index.d.ts","typesversions": {
    ">= 4.1": {
      "*": [
        "types/index.d.ts"
      ]
    }
  },"jsdelivr": "dist/index.iife.js","unpkg": "dist/index.iife.js","exports": {
    ".": {
      "require": "./dist/index.cjs","import": "./dist/index.mjs","types": "./types/index.d.ts"
    }
  },