# Issues with Theme Components \[JavaScript\] **URL:** https://meta.discourse.org/t/issues-with-theme-components-javascript/312027 **Category:** Development **Created:** [June 14, 2024, 3:10am UTC](https://meta.discourse.org/t/issues-with-theme-components-javascript/312027 "2024-06-14T03:10:35Z") **Posts on this page:** 1 **Page:** 1
### Author: ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas) #### Post date: [June 14, 2024, 3:10am UTC](https://meta.discourse.org/t/issues-with-theme-components-javascript/312027/1 "2024-06-14T03:10:35Z")
I have a problem with JavaScript. When I upload it, it doesn’t work. If I write everything into an HTML file and open it locally, it works fine. But when I put it into a theme component, it doesn’t work. ![image](https://global.discourse-cdn.com/meta/original/4X/f/d/7/fd73dee6a451749f918823ab3cb97f3ba36c9d0f.png) **The button doesn’t work when clicked.** ![image](https://global.discourse-cdn.com/meta/original/4X/6/b/b/6bbc3700a1ed7ee3b91c5457f25a0a8c7cc06bc7.png) **It works fine when opened locally using HTML.** **The close button in the top right corner behaves the same way.** > **Combine CSS and JavaScript in HTML** > > ```plaintext > > > > > > > > > > > > >
>
> | >
>
>
> | >
>
>

> 赞助一下 >

>
>
> >
>
> > > > >
> > >
> > > > > > > ``` > **Error on the website** > > ```plaintext > Ex.js:1333 version: 12 > Ex.js:3847 before all_funcdisable > /?preview_theme_id=212:380 > > > GET https://www.justnainai.com/%E7%AC%92%E9%AC%BC%E9%AC%BCapi_files/qqskm.jpg 404 (Not Found) > /?preview_theme_id=212:387 > > > GET https://www.justnainai.com/%E7%AC%92%E9%AC%BC%E9%AC%BCapi_files/wxskm.jpg 404 (Not Found) > /?preview_theme_id=212:394 > > > GET https://www.justnainai.com/%E7%AC%92%E9%AC%BC%E9%AC%BCapi_files/zfbskm.jpg 404 (Not Found) > Ex.js:3850 undefined > Ex.js:3858 all_funcdisable > FingerPrint.js:19 has get the FIngerPrintSwitch > FingerPrint.js:20 false > /?preview_theme_id=212:437 > > > GET https://www.justnainai.com/%E7%AC%92%E9%AC%BC%E9%AC%BCapi_files/wxskm.jpg 404 (Not Found) > /?preview_theme_id=212:437 > > > GET https://www.justnainai.com/%E7%AC%92%E9%AC%BC%E9%AC%BCapi_files/zfbskm.jpg 404 (Not Found) > i18n-3b40e842fd72b9bcc74ea83e094c823cd9ca535e4ecc5e78722e6f99d3656137.js:1 Uncaught ReferenceError: require is not defined > at i18n-3b40e842fd72b9bcc74ea83e094c823cd9ca535e4ecc5e78722e6f99d3656137.js:1:1 > (匿名) @ i18n-3b40e842fd72b9bcc74ea83e094c823cd9ca535e4ecc5e78722e6f99d3656137.js:1 > tags?v=43de2bf2704ed56ba600b37987a93e19:1 Uncaught ReferenceError: I18n is not defined > at tags?v=43de2bf2704ed56ba600b37987a93e19:1:1 > (匿名) @ tags?v=43de2bf2704ed56ba600b37987a93e19:1 > deprecated.js:54 Deprecation notice: Using 'on' from 'discourse-common/utils/decorators' as a class property decorator is deprecated. You should import it from '@ember-decorators/object' instead. [deprecation id: discourse.utils-decorators-on] > deprecated @ deprecated.js:54 > (匿名) @ decorators.js:85 > (匿名) @ applyDecoratedDescriptor.js:12 > _applyDecoratedDescriptor @ applyDecoratedDescriptor.js:11 > 18034 @ user-posts-stream.js:63 > __webpack_require__ @ bootstrap:19 > 56215 @ user-stream.js:138 > __webpack_require__ @ bootstrap:19 > 61372 @ badge.js:74 > __webpack_require__ @ bootstrap:19 > 36633 @ topic-tracking-state.js:1149 > __webpack_require__ @ bootstrap:19 > 46828 @ category-list.js:116 > __webpack_require__ @ bootstrap:19 > 52623 @ session.js:12 > __webpack_require__ @ bootstrap:19 > 78553 @ ajax-error.js:102 > __webpack_require__ @ bootstrap:19 > 83765 @ group-history.js:10 > __webpack_require__ @ bootstrap:19 > 32274 @ create-invite-bulk.js:3 > __webpack_require__ @ bootstrap:19 > 34190 @ second-factor-edit.js:7 > __webpack_require__ @ bootstrap:19 > 6475 @ post-user-tip-shim.js:8 > __webpack_require__ @ bootstrap:19 > (匿名) @ discourse.js:497 > s.exports @ loader.js:106 > requireModule @ loader.js:27 > 58048 @ post:2 > __webpack_require__ @ bootstrap:19 > 16273 @ watched-words.js:11 > __webpack_require__ @ bootstrap:19 > 43347 @ users.js:122 > __webpack_require__ @ bootstrap:19 > 48948 @ topic.js:12 > __webpack_require__ @ bootstrap:19 > (匿名) @ discourse.js:28 > s.exports @ loader.js:106 > requireModule @ loader.js:27 > (匿名) @ start-app.js:4 > (匿名) @ discourse-boot.js:13 > (匿名) @ discourse-boot.js:1 > app.js:239 ℹ️ Discourse v3.3.0.beta3-dev — https://github.com/discourse/discourse/commits/625c715856 — Ember v5.5.0 > runtime.js:3551 [Intervention]Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113 > deprecated.js:54 [PLUGIN discourse-multilingual-7b09ee8f71769eae6d165b6e9ce8db2649342ec4557f214a04e0add4c7be6211] Deprecation notice: Importing getOwner from `discourse-common/lib/get-owner` is deprecated. See the alternatives on meta. [deprecated since Discourse 3.2] [deprecation id: discourse.get-owner-with-fallback] [info: https://meta.discourse.org/t/292080] > deprecated @ deprecated.js:54 > getOwner @ get-owner.js:23 > r @ multilingual-route.js:19 > c @ multilingual-route.js:33 > d @ multilingual-route.js:38 > e.removeParam @ multilingual-route.js:81 > (匿名) @ multilingual-initializer.js:30 > (匿名) @ plugin-api.js:126 > (匿名) @ plugin-api.js:674 > m @ index.js:200 > trigger @ evented.js:27 > (匿名) @ page-tracker.js:41 > invoke @ backburner.js.js:282 > flush @ backburner.js.js:197 > flush @ backburner.js.js:358 > _end @ backburner.js.js:798 > end @ backburner.js.js:589 > _runExpiredTimers @ backburner.js.js:905 > setTimeout(异步) > setTimeout @ backburner.js.js:47 > _installTimerTimeout @ backburner.js.js:948 > _reinstallTimerTimeout @ backburner.js.js:932 > _later @ backburner.js.js:865 > throttle @ backburner.js.js:696 > e.throttle @ index.js:273 > _checkSize @ chat-drawer.js:142 > _join @ backburner.js.js:824 > join @ backburner.js.js:629 > l @ index.js:81 > (匿名) @ index.js:118 > didInsertElement @ chat-drawer.js:61 > r @ index.js:361 > _trigger @ core_view.js:55 > r @ index.js:361 > _trigger @ ember-events.js:143 > r @ index.js:361 > didCreate @ index.js:2102 > commit @ runtime.js:3965 > commit @ runtime.js:4062 > Nt @ runtime.js:4082 > _renderRoots @ index.js:4916 > _renderRootsTransaction @ index.js:4960 > _renderRoot @ index.js:4905 > _appendDefinition @ index.js:4830 > appendOutletView @ index.js:4820 > invoke @ backburner.js.js:282 > flush @ backburner.js.js:197 > flush @ backburner.js.js:358 > _end @ backburner.js.js:798 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _end @ backburner.js.js:804 > B._boundAutorunEnd @ backburner.js.js:523 > Promise.then(异步) > n @ backburner.js.js:26 > flush @ index.js:40 > _scheduleAutorun @ backburner.js.js:964 > _ensureInstance @ backburner.js.js:955 > schedule @ backburner.js.js:648 > e.schedule @ index.js:167 > waitForDOMReady @ index.js:343 > init @ index.js:251 > b @ core.js:77 > create @ core.js:401 > (匿名) @ start-app.js:4 > (匿名) @ discourse-boot.js:13 > (匿名) @ discourse-boot.js:1 > > ```