加载browersify隐藏的npm软件包并在script标记中使用它时遇到错误?

贾玛娜·塔伦(Jamana Tarun)

我正在使用一个名为lottie-web的npm模块,它基本上为您提供了一个svg动画,如果您给它一个json数据文件,则该文件是我从adobe中获得的效果(为了简短起见,它所做的只是通过其id提取一个html元素)并在路径中获取json数据文件并在给定元素中加载svg。)我正在使用带有express的节点应用程序,并使用handlebars(hbs)将前端呈现给浏览器,因此在这种情况下,我们需要附加lottie-web cdn链接的脚本标签,或者另一种方法是,我们可以使用browserify转换下面的给定文件,然后运行browserify myfilename -o bundle.js命令,然后在script标签中使用bundle.js加载js。在客户端

const bodymovin = require('bodymovin')

var animation = bodymovin.loadAnimation({
  container: document.getElementById('loader'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '../../public/js/loader.json'
})

如果我采用第一种方法(即使用CDN链接),则会收到以下错误lottie.js:4406 Uncaught DOMException:无法从“ XMLHttpRequest”读取“ responseText”属性:仅当对象的'responseType'是'或'text'(是'json')。在formatResponse(https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.js:4406:17)在XMLHttpRequest.xhr.onreadystatechange(https://cdnjs.cloudflare.com/ajax/ libs / bodymovin / 5.6.10 / lottie.js:4424:26

如果我采用第二种方法(即使用browserify捆绑的js文件),则会收到以下错误VM2609:1 Uncaught SyntaxError:XMLHttpRequest.xhr.onreadystatechange(在JSON位置0处JSON中的意外令牌<) bundle.js:8583)

但是,如果我尝试使用普通html文件中的cdn链接并添加js文件来运行上面给出的代码(即,在普通html css js结构中的文件夹结构之外,则可以正常工作)。有人可以提前指出我要去哪里了。

p1100i

当基础资产(../../public/js/loader.json)加载XMLHttpRequest时,这些错误使我认为您的Web服务器答案不正确

尝试打开浏览器控制台并检查Network选项卡,查看该请求的情况。Response应该是一个正确的JSON。同时检查该Headers请求的,您可能还会注意到那里的内容。

在检查完git repo之后,我注意到,您有一条明确的路线:app.get('*' ,(req,res) => {,它会回答带有生成的HTM文本404.hbs

我认为,当您要加载JSON该规则时该规则将被执行,然后为调用者呈现HTML,这会引起您看到的错误。

另一个奇怪的事情是我bodymovin.loadAnimation在您的git repo中看不到这些行...

更新1:

这行应该是path: './js/loader.json'因为您要提供的public目录w / express作为资产根目录,并且json文件位于下public/js/loader.json

另外,在解决了另一个问题之后,可能是您JSON的配置错误,但是我也不会为您解决该问题。照顾自己。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

尝试在C#中使用ODBC调用Oracle软件包时出现语法错误

来自分类Dev

使用NPM软件包时,“流星代码必须始终在光纤中运行”错误

来自分类Dev

在Meteor.js中使用NPM软件包时,必须在Fiber错误中运行

来自分类Dev

为什么在安装npm now软件包时出现此错误?

来自分类Dev

无法在npm中使用已安装的软件包

来自分类Dev

安装npm软件包时出错

来自分类Dev

在Julia中安装软件包时遇到错误

来自分类Dev

使用nvm时管理全局npm软件包

来自分类Dev

加载软件包时Rsamtools错误

来自分类Dev

在R中加载软件包时使用引号

来自分类Dev

在CentOS中安装软件包时遇到麻烦:无法加载Internet例程

来自分类Dev

使用sqldf软件包(R)读取表时遇到问题

来自分类Dev

在VS2015 Update 2中使用npm安装angular 2软件包时出现问题

来自分类Dev

尝试在R Studio中加载MASS软件包时遇到错误,但在基本R中加载正常

来自分类Dev

在新软件包中使用Python软件包“ click”时,导致“错误:出现意外的额外参数(sdist bdist_wheel)”

来自分类Dev

在安装/更新r软件包时,我遇到名称空间错误,权限被拒绝错误等

来自分类Dev

从spdep软件包中使用函数autocov_dist时出现错误消息

来自分类Dev

无法在npm中使用已安装的软件包

来自分类Dev

在klaR软件包中使用Woe过程时出错

来自分类Dev

在Julia中安装软件包时遇到错误

来自分类Dev

尝试使用dpkg安装软件包时出现错误

来自分类Dev

使用npm软件包

来自分类Dev

R标记加载多个软件包

来自分类Dev

安装espeakup软件包后,apt-get升级“处理时遇到错误”

来自分类Dev

通过cosmos在Meteor中使用npm软件包:browserify

来自分类Dev

在Ubuntu中使用APT安装软件包时如何解决错误

来自分类Dev

如何在React中使用Bootstrap npm软件包

来自分类Dev

使用PIP安装python软件包时出现错误

来自分类Dev

处理linux-image- *软件包时遇到的错误(由APT / dpkg引起)

Related 相关文章

  1. 1

    尝试在C#中使用ODBC调用Oracle软件包时出现语法错误

  2. 2

    使用NPM软件包时,“流星代码必须始终在光纤中运行”错误

  3. 3

    在Meteor.js中使用NPM软件包时,必须在Fiber错误中运行

  4. 4

    为什么在安装npm now软件包时出现此错误?

  5. 5

    无法在npm中使用已安装的软件包

  6. 6

    安装npm软件包时出错

  7. 7

    在Julia中安装软件包时遇到错误

  8. 8

    使用nvm时管理全局npm软件包

  9. 9

    加载软件包时Rsamtools错误

  10. 10

    在R中加载软件包时使用引号

  11. 11

    在CentOS中安装软件包时遇到麻烦:无法加载Internet例程

  12. 12

    使用sqldf软件包(R)读取表时遇到问题

  13. 13

    在VS2015 Update 2中使用npm安装angular 2软件包时出现问题

  14. 14

    尝试在R Studio中加载MASS软件包时遇到错误,但在基本R中加载正常

  15. 15

    在新软件包中使用Python软件包“ click”时,导致“错误:出现意外的额外参数(sdist bdist_wheel)”

  16. 16

    在安装/更新r软件包时,我遇到名称空间错误,权限被拒绝错误等

  17. 17

    从spdep软件包中使用函数autocov_dist时出现错误消息

  18. 18

    无法在npm中使用已安装的软件包

  19. 19

    在klaR软件包中使用Woe过程时出错

  20. 20

    在Julia中安装软件包时遇到错误

  21. 21

    尝试使用dpkg安装软件包时出现错误

  22. 22

    使用npm软件包

  23. 23

    R标记加载多个软件包

  24. 24

    安装espeakup软件包后,apt-get升级“处理时遇到错误”

  25. 25

    通过cosmos在Meteor中使用npm软件包:browserify

  26. 26

    在Ubuntu中使用APT安装软件包时如何解决错误

  27. 27

    如何在React中使用Bootstrap npm软件包

  28. 28

    使用PIP安装python软件包时出现错误

  29. 29

    处理linux-image- *软件包时遇到的错误(由APT / dpkg引起)

热门标签

归档