Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline worker build without any output files or error message. #1927

Closed
3 tasks done
meowtec opened this issue Feb 7, 2021 · 10 comments
Closed
3 tasks done

Inline worker build without any output files or error message. #1927

meowtec opened this issue Feb 7, 2021 · 10 comments
Labels
feat: web workers has workaround inconsistency Inconsistency between dev & build p2-edge-case Bug, but has workaround or limited in scope (priority)

Comments

@meowtec
Copy link
Contributor

meowtec commented Feb 7, 2021

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

  • Read the docs.
  • Use Vite >=2.0. (1.x is no longer supported)
  • If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

I am using monaco editor with inline worker, vite build output nothing. (exit at ✓ 739 modules transformed.)
(When I used vite 1, it worked as expected.

Reproduction

https://github.com/meowtec/vite-worker-bug-reproduce

System Info

  • vite version: 2.0.0-beta.65
  • Operating System: macOS Catalina
  • Node version: v12.18.0
  • Package manager (npm/yarn/pnpm) and version: npm 6.14.10

Logs (Optional if provided reproduction)

building for production...
transforming (14) node_modules/monaco-editor/esm/vs/editor/editor.worker.jsThe 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
transforming (105) node_modules/monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.jsThe 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
transforming (297) node_modules/monaco-editor/esm/vs/language/json/_deps/vscode-json-languageservice/seThe 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
✓ 736 modules transformed.
✓ 739 modules transformed.
<----- vite exit here
@meowtec
Copy link
Contributor Author

meowtec commented Feb 7, 2021

Additional:

Using ?worker&inline:

dev: it works
build: output nothing

Using ?worker:

dev: it works too
build: worker throws with Uncaught ReferenceError: window is not defined (anothor issue to fix)

@kena0ki
Copy link

kena0ki commented Mar 24, 2021

build: worker throws with Uncaught ReferenceError: window is not defined (anothor issue to fix)

In my case, the above error is resolved by build.rollupOptions.output.manualChunks.

// vite.config.js
import { defineConfig } from 'vite';
const prefix = `monaco-editor/esm/vs`;
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          jsonWorker: [`${prefix}/language/json/json.worker`],
          cssWorker: [`${prefix}/language/css/css.worker`],
          htmlWorker: [`${prefix}/language/html/html.worker`],
          tsWorker: [`${prefix}/language/typescript/ts.worker`],
          editorWorker: [`${prefix}/editor/editor.worker`],
        },
      },
    },
  },
});

@Shinigami92 Shinigami92 added p2-edge-case Bug, but has workaround or limited in scope (priority) bug has workaround and removed pending triage labels Mar 24, 2021
@modderme123
Copy link
Contributor

modderme123 commented May 18, 2021

I see this has the p2-has-workaround label, is that because someone has managed to get rollup to output files in the inline case with minify:terser? My current resolution involves using manualChunks:{} and minify:esbuild along with a patch to get the bundle to work in firefox or safari. I would love to be able to simplify that and use rollup and terser for minification

@Blakeinstein
Copy link

Is there still a working workaround for this? I added the rollup options, and I added ?worker&inline to my import. Yet I get an error regarding unexpected usage with SyntaxError: import declarations may only appear at top level of a module, on just the dev server.

Here are my deps

"dependencies": {
    "monaco-editor": "^0.26.1",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@types/node": "^16.4.10",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.4.4",
    "vue-tsc": "^0.2.2"
  }

@sodatea sodatea added feat: web workers inconsistency Inconsistency between dev & build labels Aug 4, 2021
@modderme123
Copy link
Contributor

I think the original issue has been resolved in Vite 2.4.

@Blakeinstein Yes, Vite no longer needs almost any workarounds for monaco-editor (last I checked, we still needed to disable the vendor chunking). Is that error in production mode in Firefox? In development, you must be using Chrome for workers. You might try asking here if you are still running into trouble.

@pengxiaotian
Copy link

Is there still a working workaround for this? I added the rollup options, and I added ?worker&inline to my import. Yet I get an error regarding unexpected usage with SyntaxError: import declarations may only appear at top level of a module, on just the dev server.

Here are my deps

"dependencies": {
    "monaco-editor": "^0.26.1",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@types/node": "^16.4.10",
    "@vitejs/plugin-vue": "^1.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.3.2",
    "vite": "^2.4.4",
    "vue-tsc": "^0.2.2"
  }

I have the same problem:

Upgrade to:

yarn add vite@^2.4.4 @vitejs/plugin-vue@^1.4.0 -D

Error log:

vite v2.4.4 building for production...
transforming (2) node_modules/monaco-editor/esm/vs/editor/editor.worker.jsThe 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
.....
....
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
✓ 3408 modules transformed.
transforming (3419) node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js
<--- Last few GCs --->

[58357:0x104b00000]    78868 ms: Scavenge (reduce) 2032.0 (2050.4) -> 2031.3 (2051.7) MB, 2.5 / 0.0 ms  (average mu = 0.184, current mu = 0.122) allocation failure 
[58357:0x104b00000]    80581 ms: Mark-sweep (reduce) 2032.1 (2050.7) -> 2031.5 (2052.4) MB, 1710.6 / 0.0 ms  (average mu = 0.152, current mu = 0.126) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10130d6e5 node::Abort() (.cold.1) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 2: 0x1000b1c49 node::Abort() [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 3: 0x1000b1daf node::OnFatalError(char const*, char const*) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 4: 0x1001f60f7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 5: 0x1001f6093 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 6: 0x1003a54f5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 7: 0x1003a6fba v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 8: 0x1003a2689 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
 9: 0x10039ff21 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
10: 0x1003ae7da v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
11: 0x1003ae861 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
12: 0x10037bf12 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
13: 0x1006fc158 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
14: 0x100a893d9 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/pengxiaotian/.nvm/versions/node/v14.17.0/bin/node]
15: 0x32eddd14b1e9 
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@Blakeinstein
Copy link

Blakeinstein commented Aug 9, 2021

I have the same problem:

Upgrade to:

yarn add vite@^2.4.4 @vitejs/plugin-vue@^1.4.0 -D

Is that error in production mode in Firefox?

I dont know really, created a new vite vue project, (around the same time as this example).
And with the exact same deps, it fixed itself? Looks like its an error in firefox (dev mode only, didnt try prod)

@pengxiaotian
Copy link

I have the same problem:
Upgrade to:

yarn add vite@^2.4.4 @vitejs/plugin-vue@^1.4.0 -D

Is that error in production mode in Firefox?

I dont know really, created a new vite vue project, (around the same time as this example).
And with the exact same deps, it fixed itself? Looks like its an error in firefox (dev mode only, didnt try prod)

I found a new solution:

If you use CDN, you can ignore this step:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import jsx from '@vitejs/plugin-vue-jsx'
import copy from 'rollup-plugin-copy'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        copy({
          targets: [
            {
              src: 'node_modules/monaco-editor/min/vs/**/*',
              dest: 'dist/assets/monaco-editor/vs',
            },
          ],
          hook: 'writeBundle',
        }),
      ],
    },
  },
  plugins: [vue(), jsx()],
})

Core code:

import { onMounted } from 'vue';
import loader from '@monaco-editor/loader'

loader.config({ paths: { vs: '/assets/monaco-editor/vs' } })
or
loader.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.27.0/min/vs' } })


onMounted(async () => {
  const monaco = await loader.init()
  monaco.editor.create(dom, {})
});

@poyoho
Copy link
Member

poyoho commented Apr 23, 2022

I test in vite@v2.9.5, it can work now. Can I close this issues?

@meowtec
Copy link
Contributor Author

meowtec commented Apr 23, 2022

@poyoho OK

@poyoho poyoho closed this as completed Apr 23, 2022
@github-actions github-actions bot locked and limited conversation to collaborators May 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: web workers has workaround inconsistency Inconsistency between dev & build p2-edge-case Bug, but has workaround or limited in scope (priority)
Projects
None yet
Development

No branches or pull requests

8 participants