search

undecaf / vue-barcode-scanner

A barcode/QR code scanner for Vue 2
MIT License
8 stars 3 forks source link

Getting Error in barcode-detector-polyfill/dist/main.js #3

Closed Bijit-Mondal closed 1 year ago

Bijit-Mondal commented 1 year ago

ERROR Failed to compile with 1 error 1:22:51 am

This dependency was not found:

To install it, you can run: npm install --save https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.12/dist/main.js

undecaf commented 1 year ago

@Bijit-Mondal If you want me to look into this issue then I am kindly asking you to provide more than just an error message, such as:

Taking a look at issues 1, 3 and 4 of barcode-detector-polyfill might also be helpful.

Bijit-Mondal commented 1 year ago

my package.json { "name": "rkmvcc", "version": "0.1.1", "private": true, "description": "This is a official departmental library management system for iLib", "author": "https://github.com/Bijit-Mondal", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps" }, "main": "background.js", "dependencies": { "@undecaf/barcode-detector-polyfill": "^0.9.15", "@undecaf/vue-barcode-scanner": "^0.9.3", "@undecaf/zbar-wasm": "^0.9.12", "@vue/component-compiler-utils": "^3.3.0", "algoliasearch": "^4.15.0", "axios": "^0.24.0", "core-js": "^3.29.0", "dotenv": "^16.0.3", "firebase": "^9.17.2", "material-icons": "^1.13.2", "register-service-worker": "^1.7.2", "vue": "^2.7.14", "vue-router": "^3.6.5", "vuefire": "^2.2.5", "vuesax": "^4.0.1-alpha.25" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-pwa": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "electron": "^13.6.9", "electron-devtools-installer": "^3.2.0", "eslint": "^6.8.0", "eslint-plugin-vue": "^6.2.2", "vue-cli-plugin-electron-builder": "~2.1.1", "vue-template-compiler": "^2.7.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ], "electron-builder": { "productName": "iLib RKMVCC", "appId": "website.ilib.coms", "linux": { "icon": "public/img/android-chrome-maskable-512x512.png", "target": "snap" }, "win": { "icon": "public/img/android-chrome-maskable-512x512.png", "target": "nsis" }, "mac": { "icon": "public/img/android-chrome-maskable-512x512.png", "target": "dmg" } } }

node -v v18.15.0 npm -v 9.5.0

and here is my vue.config.js // vue.config.js module.exports = { // options... devServer: { disableHostCheck: true } }

Bijit-Mondal commented 1 year ago

trying to add this in vue.config.js , but it isn't working module.exports = { devServer: { disableHostCheck: true }, configureWebpack: { externals: /^("https:\/\/cdn\.jsdelivr\.net\/npm\/@undecaf\/zbar-wasm@0\.9\.10\/dist\/main\.js")/i, }, }

undecaf commented 1 year ago

I added a Webpack/Vue CLI build script to the online example, see here.

This demonstrates how to avoid those unresolved dependencies on @undecaf/zbar-wasm that you have encountered.

Bijit-Mondal commented 1 year ago

I have add ` const { ZBAR_WASM_REPOSITORY } = require('@undecaf/barcode-detector-polyfill/zbar-wasm')

// Uncomment this to load module @undecaf/zbar-wasm from an alternate repository, e.g. from https://unpkg.com/ const { ZBAR_WASM_PKG_NAME, ZBAR_WASM_VERSION } = require('@undecaf/barcode-detector-polyfill/zbar-wasm') const ALTERNATE_ZBAR_WASM_REPOSITORY = https://unpkg.com/${ZBAR_WASM_PKG_NAME}@${ZBAR_WASM_VERSION}

process.env.VUE_APP_ZBAR_WASM_REPOSITORY = (typeof ALTERNATE_ZBAR_WASM_REPOSITORY !== 'undefined') ? ALTERNATE_ZBAR_WASM_REPOSITORY : ZBAR_WASM_REPOSITORY

const outputDir = '../src'

const config = { outputDir,

publicPath: './',

configureWebpack: {
    externals: {
        [`${ZBAR_WASM_REPOSITORY}/dist/main.js`]: 'zbarWasm',
    },

    optimization: {
        splitChunks: {
            maxSize: 250000,
        },
    },
},

}

module.exports = config ` as you have mention. Now I am getting new error

Uncaught (in promise) ReferenceError: zbarWasm is not defined

external "zbarWasm":1 npm app~._e.js:1986 __webpack_require__ app~._e.js:854 fn app~._e.js:151 main.js:1 node_modules 0.js:11 __webpack_require__ app~._e.js:854 fn app~._e.js:151 BarcodeReader.vue:15 ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/BarcodeReader.vue?vue&type=script&lang=js& 0.js:35 __webpack_require__ app~._e.js:854 fn
undecaf commented 1 year ago
  1. Most likely, @undecaf/zbar-wasm has not been loaded in your index.html as is shown in this line of the example. In your case, that line expands to something like <script src="https://unpkg.com/@undecaf/zbar-wasm@0.9.12/dist/index.js"></script>, and it defines variable zbarWasm.
  2. I noticed const outputDir = '../src' in your Vue configuration. Are you sure that you want the build artifacts to be placed in your source directory?
Bijit-Mondal commented 1 year ago

Yeah <script src="<%= VUE_APP_ZBAR_WASM_REPOSITORY %>/dist/index.js"></script> adding this done the work for me. This is a very good project. Thank You