Closed WillemJann closed 1 month ago
I already tried to install node-polyfill-webpack-plugin
and configure it in vue.config.js
:
var NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
[...],
chainWebpack: config => {
config.plugin('polyfills').use(NodePolyfillPlugin)
}
}
That will resolve some of the errors, but not all of them. In your source code I see checks for browser environments / Node.js environments, so I'm expecting these polyfills aren't required. For some reason Webpack doesn't follow the logic correctly to skip the Node.js related imports.
I also tried the following way of importing, but that doesn't work either:
import scribe from 'node_modules/scribe.js-ocr/scribe.js'
I will get to responding to this later, however I just deleted a post from a new account claiming you should run a (presumably) malicious binary file. Obviously you should not do that.
I have another issue for my vite/react config. When I do the import I get type Could not find a declaration file for module 'node_modules/scribe.js-ocr/scribe.js' frontend/node_modules/scribe.js-ocr/scribe.js' implicitly has an 'any' type. I am wondering if to over come this I simply need to create a type folder with a ts config as well. But I need this to be a browser ran project not a node.js for privacy concerns. If any one can help that would be great.
I have another issue for my vite/react config. When I do the import I get type Could not find a declaration file for module 'node_modules/scribe.js-ocr/scribe.js' frontend/node_modules/scribe.js-ocr/scribe.js' implicitly has an 'any' type. I am wondering if to over come this I simply need to create a type folder with a ts config as well. But I need this to be a browser ran project not a node.js for privacy concerns. If any one can help that would be great.
I also would like to know if running native in the browser, do you use only tesseract.js's engine or do you have a layer on top that will work for pdf's as well.
I also would like to know if running native in the browser, do you use only tesseract.js's engine or do you have a layer on top that will work for pdf's as well.
All of the features of Scribe.js work in both the browser and Node.js. Scribe.js can be used to read and write to PDFs. If you have further questions about PDFs, please open a separate discussion, as this is outside of the scope of building with Vue.
@WillemJann I was able to replicate this issue. It looks like Scribe.js does not currently work with Webpack (which is used by Vue.js v2) due to (1) issues with Webpack not detecting when code is Node.js or browser specific and (2) issues with path traversal. I do want to support Webpack, and do not believe it will be difficult to do so, so I'll try and have a patch version released by Wednesday or Thursday this week.
Thank you. Great that you want to support Webpack, looking forward to you patch. As soon as it is released I will test it in our environment.
I just released scribe.js v0.2.4, which makes a number of changes to improve support with Webpack. It is now possible to build with Webpack 5 using only a couple of non-default settings. Specifically, you need to explicitly define process
as undefined
to force Webpack to skip the Node.js code, and define DISABLE_DOCX_XLSX
to true
to skip the .docx
/.xlsx
export code, which is still problematic in Webpack.
plugins: [
new webpack.DefinePlugin({
process: JSON.stringify(undefined),
'DISABLE_DOCX_XLSX': JSON.stringify(true),
}),
]
An example repo using scribe.js with Webpack 5 is here, and an example repo using a Vue.js v2 application created with the Vue CLI tool is here. I've added these repos to a new section of the readme here. Everybody is encouraged to add new example repos with different frameworks/build tools, particularly if they require non-trivial setup.
Let me know if this update resolved the issue with installing in your project.
Yes, I can confirm that with the update (v0.2.4) Scribe.js is working in our Vue 2 project, created with the Vue CLI. Our vue.config.js
contains the following custom Webpack settings:
var webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
process: JSON.stringify(undefined),
DISABLE_DOCX_XLSX: JSON.stringify(true)
})
],
output: {
environment: {
asyncFunction: true
}
}
}
}
The last part (explicit environment support for async function and await) is added to resolve this message:
warning in ./node_modules/scribe.js-ocr/js/worker/generalWorker.js
The generated code contains 'async/await' because this module is using "topLevelAwait".
However, your target environment does not appear to support 'async/await'.
As a result, the code may not run as expected or may cause runtime errors.
Thank you for adding support for Webpack! The issue is resolved.
I'm trying to use Scribe.js in an existing Vue 2 application. However, I'm getting Webpack compile errors after including the JS library. Here are the steps to reproduce:
npm install -g @vue/cli
vue create hello-world
Default ([Vue 2] babel, eslint)
cd hello-world
npm i scribe.js-ocr
src/App.vue
and addimport scribe from 'scribe.js-ocr'
to<script>
sectionnpm run serve
Now the following errors are shown:
Similar errors appear in a blank Vue 3 application, using preset
Default ([Vue 3] babel, eslint)
. I think the issue is related to Webpack 5 and its configuration, but until now I'm unable to resolve all errors. It seems Webpack doesn't recognize that it is in browser mode and that some imports can be skipped.Do you have any suggestions to get Scribe.js working in a Vue CLI application?