使用mode的js文件就会报错MIME type ('text/html') is not executable,

[chen-xiaoxing]

Describe the bug

Refused to execute script from 'http://localhost:8080/js/mode-javascript.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ace.js:804

   GET http://localhost:8080/js/theme-dark.js net::ERR_ABORTED 404 (Not Found)

exports.loadScript @ ace.js:804
load @ ace.js:1218
exports.loadModule @ ace.js:1236
VirtualRenderer.setTheme @ ace.js:19071
Editor.setTheme @ ace.js:13934
eval @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Ace.vue?vue&type=script&setup=true&lang=ts:40
eval @ runtime-core.esm-bundler.js:3015
callWithErrorHandling @ runtime-core.esm-bundler.js:336
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:344
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2995
flushPostFlushCbs @ runtime-core.esm-bundler.js:510
flushJobs @ runtime-core.esm-bundler.js:548
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:451
queuePostFlushCb @ runtime-core.esm-bundler.js:471
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1890
scheduler @ runtime-core.esm-bundler.js:2101
resetScheduling @ reactivity.esm-bundler.js:307
triggerEffects @ reactivity.esm-bundler.js:346
triggerRefValue @ reactivity.esm-bundler.js:1111
set value @ reactivity.esm-bundler.js:1156
finalizeNavigation @ vue-router.mjs:3374
eval @ vue-router.mjs:3239
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3206
push @ vue-router.mjs:3131
eval @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=ts&setup=true:24
eval @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=ts&setup=true:19
eval @ runtime-core.esm-bundler.js:3015
callWithErrorHandling @ runtime-core.esm-bundler.js:336
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:344
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2995
flushPostFlushCbs @ runtime-core.esm-bundler.js:510
render @ runtime-core.esm-bundler.js:6770
mount @ runtime-core.esm-bundler.js:4067
app.mount @ runtime-dom.esm-bundler.js:1658
eval @ main.ts:19
./src/main.ts @ app.js:63
webpack_require @ app.js:198
(anonymous) @ app.js:1392
webpack_require.O @ app.js:250
(anonymous) @ app.js:1393
(anonymous) @ app.js:1395
Show 29 more frames
Show less
:8080/#/home:1 Refused to execute script from 'http://localhost:8080/js/theme-dark.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Expected Behavior

服务器自动处理配置提供正确的MIME类型

Current Behavior

目前使用版本"ace-builds": "^1.32.7"+vue3+ts，代码错误行editorInput.value.session.setMode("ace/mode/javascript");，错误提示：Refused to execute script from 'http://localhost:8080/js/mode-javascript.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Reproduction Steps

目前使用版本"ace-builds": "^1.32.7"+vue3+ts，代码错误行editorInput.value.session.setMode("ace/mode/javascript");，错误提示：Refused to execute script from 'http://localhost:8080/js/mode-javascript.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Possible Solution

服务器自动处理配置提供正确的MIME类型

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

"ace-builds": "^1.32.7"+vue3+ts

[whazor]

What bundler are you using?

For ESM you could use:

import ace from 'ace-builds';
import 'ace-builds/esm-resolver';

Like the ace-builds-vitejs example.

[chen-xiaoxing]

// this is my code,This is the cause of the error
editorInput.value.session.setMode("ace/mode/javascript");
editorInput.value.setTheme("ace/theme/dark");

输入

<br />
<span>输出</span>
<div class="editor" ref="aceOutputRef"></div>
<div style="display: flex;text-align: center;margin-top:10px">
    <button @click="run" style="margin-right:10px">运行</button>
    <button @click="clear">清除</button>
</div>

<script setup lang="ts"> import {ref,reactive,onMounted,onUnmounted} from "vue"; // import * as ace from "../three/ace-builds"; import ace from "ace-builds"; import 'ace-builds/esm-resolver'; import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/ext-spellcheck"; // import "ace-builds/src-noconflict/mode-javascript.js"; // import "ace-builds/src/theme-tomorrow.js"; const aceInputRef = ref(null); const aceOutputRef = ref(null); const editorInput = ref(null); const editorOutput = ref(null); onMounted(()=>{ editorInput.value = ace.edit(aceInputRef.value,{ useWorker: true, maxLines: 10, minLines: 10, value: "var hello = 'world'" + "\n我是输入", tabSize: 2, }); console.log(editorInput.value); editorOutput.value = ace.edit(aceOutputRef.value,{ maxLines: 10, minLines: 10, value: "我是输出", readOnly: true }); // This is the cause of the error editorInput.value.session.setMode("ace/mode/javascript"); editorInput.value.setTheme("ace/theme/dark"); editorInput.value.setOptions({ enableSnippets: true, enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSpellCheck: true, highlightSelectedWord:true, }); }) onUnmounted(()=>{ // editorInput.value.destroy(); // editorInput.value.container.remove(); }) const run = ()=>{ // console.log(editorInput.value.session.getAnnotations(),11); // 获取错误列表 const inputValue = JSON.stringify(editorInput.value.getValue()); editorOutput.value.setValue(JSON.parse(inputValue)) } const clear = ()=>{ editorOutput.value.setValue(''); } </script> <style> .editor{ width: 600px; height: 600px; } </style>