"Reference Error: "openblock" is not defined" when adding vue-upload-component to an existing project.

[simont789]

I was trying to add vue-upload-component to my existing project and experiencing weird errors like "openblock is not defined" and "defineComponent" is not defined. Then I added vue-upload-component to a brand new vite project and it works.

It's probably not a vue-upload-component issue. Just wondering if anyone is experiencing this issue, or could provide a way to debug.

Cheers!

[lian-yue]

You can try to directly import .vue files

import FileUpload from "vue-upload-component/src/FileUpload.vue";

If it still doesn't work, please add the vue-upload-component component to the whitelist so that webpack can compile it

https://lian-yue.github.io/vue-upload-component/#/en/documents#getting-started-ssr-server-isomorphism

webpack.config.js

const nodeExternals = require('webpack-node-externals');
{
  //.....
  externals: [
    nodeExternals({whitelist:[/^vue-upload-component\/src/]})
  ]
  //.....
}

https://github.com/liady/webpack-node-externals

[weiweidou]

可以尝试直接导入.vue文件

进口 文件上传 从 “VUE上传组分/ SRC / FileUpload.vue” ;

如果还是不行，请将vue-upload-component组件加入白名单，以便webpack编译

https://lian-yue.github.io/vue-upload-component/#/en/documents#getting-started-ssr-server-isomorphism

webpack.config.js

const  nodeExternals  =  require ( 'webpack-node-externals' ) ; 
{ 
  //..... 
  externals : [ 
    nodeExternals ( { whitelist : [ / ^ vue-upload-component \/ src / ] } ) 
  ] 
  //..... 
}

https://github.com/liady/webpack-node-externals

能不能给予一个联系方式，有问题请教