Create React App v4中如何不弹出配置即可修复绝对导入失效问题

• CRA v4 对齐了Node.js原生模块解析的优先级规则，Webpack 会优先将无路径前缀的导入，匹配到node_modules下的同名第三方包，而非baseUrl指向的src目录下的同名文件。
• 当前导入使用的store是npm生态中公开存在的第三方包名，升级到v4后，代码中写的import store from 'store'会被Webpack直接解析到node_modules下的第三方store包，而非项目src目录下自定义的store模块，因此触发模块导出不匹配、找不到model方法的运行时报错。
• 相同配置在CRA v3下可正常运行，是因为旧版本的模块解析顺序将baseUrl配置的src目录优先级放在了第三方包解析之前。

• 调整jsconfig.json（TypeScript项目对应调整tsconfig.json）的路径配置，给src下的模块导入增加专属前缀，从根源上避免和第三方包名重名，配置示例：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

• 该配置为CRA原生支持，无需手动修改Webpack配置，也不需要执行eject弹出项目配置。
• 将代码中原先的裸路径绝对导入全部替换为带专属前缀的写法，例如原先的import store from 'store'，修改为import store from '@/store'。此时Webpack会优先按照paths的匹配规则解析到src下的对应模块，不会跳转到node_modules下的同名第三方包。
• 如果项目曾手动安装过npm上的公开store包，需要先执行卸载操作移除对应依赖，避免后续出现解析冲突。

• 日常开发中尽量不要使用和公开npm包完全同名的裸导入写法，这类写法在CRA v4及之后的版本中，会始终存在优先解析到第三方包的风险。
• 不需要调整Webpack的模块解析优先级配置，只要通过paths规则建立专属的导入路径映射，就能稳定解决重名解析问题。

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