Rails 6 Stimulus控制器导入自定义npm包时提示无法找到node模块

问题定位及解决方案 #

核心问题（最高概率） #

你当前的Webpacker配置错误覆盖了默认的扩展名识别规则，导致Webpack无法识别npm包的JS入口文件：
原配置中resolve.extensions被直接赋值为['.css']，这会清空Webpacker默认预置的.js、.mjs、.jsx等JS相关扩展名，Webpack解析模块时不会自动匹配JS后缀的入口文件，因此抛出找不到模块的错误。

修复步骤 #

1. 修改Webpacker基础配置，改为追加.css扩展名而非覆盖原有配置：

const { webpackConfig, merge } = require('@rails/webpacker');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const plugins = [];

if (process.env.ANALYZE === 'true') {
  plugins.push(new BundleAnalyzerPlugin());
}

const customConfig = {
  resolve: {
    // 追加扩展名，保留原有默认配置
    extensions: ['.css', ...webpackConfig.resolve.extensions],
  },
  plugins: plugins,
};

module.exports = merge(webpackConfig, customConfig);

2. 重启Webpacker开发服务，重新测试导入逻辑。

次优排查方向 #

如果修改配置后仍报错，可核查npm包的package.json配置：
Rails 6配套的Webpacker 5版本对npm包的exports字段支持不完善，如果你的包仅配置了exports字段未配置main字段指向入口JS文件，会出现高版本Webpack/Vite的React项目可正常导入、低版本Webpacker无法识别的问题。
只需在npm包的package.json中补充main字段，指向实际的入口JS文件即可，示例：

{
  "name": "test-release-stuff",
  "main": "./dist/index.js"
}

验证方案 #

可临时使用绝对路径导入测试是否能正常识别：

// 路径对应node_modules中你包的实际入口文件路径
import foo from '../../node_modules/test-release-stuff/dist/index.js'

如果该导入方式可正常运行，即可确认问题出在配置项，而非npm包本身的逻辑问题。

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