Elm 0.18使用elm-storage库时运行报错求助

先说说为啥会报错 #

你碰到的这几个错误，核心问题其实和elm-storage库的Native模块兼容性以及Elm 0.18的启动逻辑有关：

• Uncaught TypeError: runElmProgram is not a function：这个函数是Elm 0.17及更早版本的启动API，Elm 0.18早就换成Elm.<模块名>.embed()或者fullscreen()这类写法了，而elm-storage的部分版本还在依赖旧的启动逻辑。
• Uncaught ReferenceError: Elm is not defined 和 Uncaught TypeError: Cannot read property 'Native' of undefined：这俩说明编译后的代码里，Elm全局对象没生成对，大概率是elm-storage的Native模块没被正确包含，或者你的elm-package.json依赖版本不匹配。

一步步解决问题 #

1. 先把elm-storage版本配对 #

打开你的elm-package.json，检查dependencies里的theseamau5/elm-storage版本，必须用支持Elm 0.18的版本。正确的依赖配置应该是这样：

"dependencies": {
    "elm-lang/core": "5.1.1 <= v < 6.0.0",
    "theseamau5/elm-storage": "2.0.0 <= v < 3.0.0"
}

改完之后在项目根目录跑elm-package install，重新装一遍匹配的依赖。

2. 把程序启动代码改成0.18的写法 #

Elm 0.18已经不用runElmProgram了，你得把启动逻辑换成标准写法：
比如你的主模块是Exercises，HTML里要这么引用：

<script src="elm.js"></script>
<script>
  // 替换掉旧的runElmProgram调用
  Elm.Exercises.fullscreen();
  // 如果要嵌入到指定元素里就用这个：
  // Elm.Exercises.embed(document.getElementById('elm-container'));
</script>

3. 检查编译和加载的细节 #

• 跑elm make src/Exercises.elm --warn --output elm.js之后，确认生成的elm.js没损坏，而且HTML里的引用路径是对的（比如HTML在根目录的话，src="elm.js"就没问题）。
• 别在自己的Elm代码里直接碰Native模块，elm-storage已经把Native代码封装好了，你直接用它提供的Storage.load、Storage.save这些API就行。

4. 清缓存重新来一遍 #

有时候旧缓存会搞事情，按下面步骤清一下：

• 删除项目根目录的elm-stuff文件夹
• 重新跑elm-package install
• 再执行elm make编译代码

验证一下 #

做完上面这些步骤后：

• 启动elm-reactor，打开你的Exercises.elm页面，应该不会再出现runElmProgram的错误了。
• 打开编译后的HTML页面，看看控制台里还有没有Elm未定义或者Native相关的报错。

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