Svelte调用context=module导出函数报target必填错误是什么原因？

问题原因 #

这个问题既不是Svelte的bug，也不是不同组件导入模块存在逻辑差异，核心原因是你给组件命名时和浏览器全局原生的Error构造函数重名，导致命名冲突。

具体触发逻辑 #

1. 在App.svelte中，你使用了import Error, {addError} from './Error.svelte'的导入语句，这里把导入的Svelte组件赋值给了局部变量Error，直接覆盖了全局的原生Error错误构造器。
2. 你调用addError(new Error('error message'))时，new Error()实际是在尝试实例化Svelte组件，而Svelte组件手动实例化必须传入包含target属性的配置项，因此抛出了"'target' is a required option"的错误。
3. 而DifferentComp.svelte中只导入了addError方法，没有导入同名的Error组件，局部作用域内的Error仍然指向原生全局构造函数，因此调用正常。

解决方法 #

只要避免自定义组件和全局原生对象重名即可，任选以下一种方案：

• 导入时给组件重命名：

  // App.svelte 调整导入语句
  import ErrorComponent, {addError} from './Error.svelte'
  // 组件使用处对应调整为 <ErrorComponent />
  

• 直接修改组件文件名，比如改为ErrorNotification.svelte，从根源避免命名冲突。

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