Webpack 3引入含cjs/mjs产物的@stitches/react模块解析失败问题咨询

核心原因：该报错确实与Webpack 3版本的特性缺失直接相关 #

• Webpack 3是2017年发布的历史版本，不支持现代npm包的模块分发规则：包括.mjs后缀识别、package.json的exports字段、module字段的解析逻辑，只会读取最传统的main字段加载产物，所以默认会加载该库指定的dist/index.cjs文件。
• 该库的cjs/mjs产物中包含Webpack 3原生解析器不支持的ES6+语法（比如可选链、空值合并运算符等），而你的项目Babel默认不处理node_modules下的文件，未转译的新语法无法被Webpack 3识别，就会抛出Unexpected token的解析错误。
• 你将产物复制到src目录后可正常运行，恰好验证了这个逻辑：src目录下的文件会走Babel转译，新语法被转换为Webpack 3兼容的ES5语法，自然不会报错。

无需升级Webpack的解决方案 #

• 方案1：调整babel-loader配置，将@stitches/react纳入转译范围。在webpack配置的babel-loader规则中，新增include路径：

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    path.resolve(__dirname, 'src'),
    // 新增这一行
    path.resolve(__dirname, 'node_modules/@stitches/react')
  ]
}

• 方案2：手动指定导入产物路径，直接引入兼容度更高的iife格式产物：

import '@stitches/react/dist/index.iife.js'
const { styled } = window.Stitches

• 方案3：如果要使用mjs格式，先在webpack配置的resolve.extensions中添加.mjs后缀，再将对应的mjs文件路径加入babel-loader的include范围即可。

内容的提问来源于stack exchange，提问作者Lucas Arundell