Browse Source

Fix tesseract.js being part of the common chunk (#11571)

* Fix tesseract.js being part of the common chunk

Besides being 620 KB large, it also causes a modules-related runtime
error in production...

* Fix code style issue

* Fix modules error
tags/v3.0.0rc1
Eugen Rochko 1 month ago
parent
commit
dfe6059889
No account linked to committer's email address

+ 14
- 12
app/javascript/mastodon/features/ui/components/focal_point_modal.js View File

@@ -10,11 +10,11 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
10 10
 import IconButton from 'mastodon/components/icon_button';
11 11
 import Button from 'mastodon/components/button';
12 12
 import Video from 'mastodon/features/video';
13
-import { TesseractWorker } from 'tesseract.js';
14 13
 import Textarea from 'react-textarea-autosize';
15 14
 import UploadProgress from 'mastodon/features/compose/components/upload_progress';
16 15
 import CharacterCounter from 'mastodon/features/compose/components/character_counter';
17 16
 import { length } from 'stringz';
17
+import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
18 18
 
19 19
 const messages = defineMessages({
20 20
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -148,19 +148,21 @@ class FocalPointModal extends ImmutablePureComponent {
148 148
   handleTextDetection = () => {
149 149
     const { media } = this.props;
150 150
 
151
-    const worker = new TesseractWorker({
152
-      workerPath: `${assetHost}/packs/ocr/worker.min.js`,
153
-      corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`,
154
-      langPath: `${assetHost}/ocr/lang-data`,
155
-    });
156
-
157 151
     this.setState({ detecting: true });
158 152
 
159
-    worker.recognize(media.get('url'))
160
-      .progress(({ progress }) => this.setState({ progress }))
161
-      .finally(() => worker.terminate())
162
-      .then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false }))
163
-      .catch(() => this.setState({ detecting: false }));
153
+    fetchTesseract().then(({ TesseractWorker }) => {
154
+      const worker = new TesseractWorker({
155
+        workerPath: `${assetHost}/packs/ocr/worker.min.js`,
156
+        corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`,
157
+        langPath: `${assetHost}/ocr/lang-data`,
158
+      });
159
+
160
+      worker.recognize(media.get('url'))
161
+        .progress(({ progress }) => this.setState({ progress }))
162
+        .finally(() => worker.terminate())
163
+        .then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false }))
164
+        .catch(() => this.setState({ detecting: false }));
165
+    }).catch(() => this.setState({ detecting: false }));
164 166
   }
165 167
 
166 168
   render () {

+ 4
- 0
app/javascript/mastodon/features/ui/util/async-components.js View File

@@ -133,3 +133,7 @@ export function ListAdder () {
133 133
 export function Search () {
134 134
   return import(/*webpackChunkName: "features/search" */'../../search');
135 135
 }
136
+
137
+export function Tesseract () {
138
+  return import(/*webpackChunkName: "tesseract" */'tesseract.js');
139
+}

+ 6
- 0
babel.config.js View File

@@ -20,6 +20,12 @@ module.exports = (api) => {
20 20
       ['react-intl', { messagesDir: './build/messages' }],
21 21
       'preval',
22 22
     ],
23
+    overrides: [{
24
+      test: /tesseract\.js/,
25
+      presets: [
26
+        ['@babel/env', { ...envOptions, modules: 'commonjs' }],
27
+      ],
28
+    }],
23 29
   };
24 30
 
25 31
   switch (env) {

Loading…
Cancel
Save