popper.js बूटस्ट्रैप 4 में SyntaxError अप्रत्याशित टोकन निर्यात देता है

Question

मैंने बूटस्ट्रैप 4 को स्थापित करने की कोशिश की, और निम्नलिखित लिंक शामिल किए

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

लेकिन निम्न त्रुटि होती है:

बिना पढ़ा हुआ वाक्यविन्यास: अप्रत्याशित टोकन निर्यात

क्या इसे ठीक करने का कोइ उपाय है?

Comments

मुझे नहीं पता, बूटस्ट्रैप फ़ाइल को इसकी आवश्यकता है

— Павел ляиляев

नहीं, मैंने बूटस्ट्रैप का उपयोग किया है, लेकिन इसने मुझसे कभी नहीं पूछा

— आशीष साह

अंतिम संस्करण में पूछा गया

— Павел Шиляев

अच्छा अगर ऐसा है तो मैं बताऊंगा CDN लिंक का उपयोग

— आशीष sah

समस्या यह है कि मैं बाजार पर उत्थान के समय CDN लिंक का उपयोग करने वाला नहीं हूं

— Павел Шиляев

Answer 1

मुझे उसी समस्या का सामना करना पड़ा अगर मैं CDN नेटवर्क जैसे popper.js का उपयोग करता हूं cdnjs।

यदि आप Bootstrap 4उदाहरण के स्रोत कोड का अवलोकन करते हैं, उदाहरण के लिए नवबार, तो आप देख सकते हैं कि popper.min.js:

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

मैंने इसे अपने प्रोजेक्ट में शामिल किया और त्रुटि दूर हो गई। आप स्रोत कोड से डाउनलोड कर सकते हैं

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

और एक स्थानीय फ़ाइल के रूप में अपनी परियोजना में शामिल करें और इसे काम करना चाहिए।

Comments

हाँ। तुम सही हो। मैंने उस कोड को कॉपी और पेस्ट किया और त्रुटि गायब हो गई। CDN किसी विशेष संस्करण को निर्दिष्ट नहीं करता हैpopper.js

— Fabrizio Bertoglio

हालांकि यह काम करता है, मुझे लगता है कि यह उचित तरीका नहीं है, जब तक कि बूटस्ट्रैप टीम अपना कोड अपडेट नहीं करती।

— नदीम जमाली

उपरोक्त URL एक नहीं मिली त्रुटि (404) देता है। मैंने बूटस्ट्रैप 4.1.3 के लिए getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js का उपयोग किया और इससे मेरे लिए समस्या हल हो गई।

— माइक स्ट्रॉथर

इस उत्तर में सुझाई गई तकनीक का उपयोग करना एक चलते लक्ष्य का पीछा करने जैसा है। सही उत्तर मार्क और ज़िम द्वारा प्रदान किया गया है।

— nagu

दुर्भाग्य से यह अब काम नहीं करता है। त्रुटि दूर हो गई है, लेकिन टूलटिप डिफ़ॉल्ट HTML टूलटिप है

— deanwilliammills

Answer 2

बस यह भी मिल गया और लगा कि यह वास्तव में क्यों होता है। मामले में अन्य लोग यहां मिलते हैं:

Readme.md "उपयोग" की जाँच करें। तीन भिन्न मॉड्यूल लोडर के लिए तीन संस्करण में उपलब्ध है। संक्षेप में: यदि आप इसे <script>टैग के साथ लोड करते हैं तो आपको UMD संस्करण का उपयोग करना होगा । तुम इसमें पा सकते हो /dist/umd। डिफ़ॉल्ट (इन /dist) ESNext (ECMA-Script) है जिसे scriptटैग का उपयोग करके लोड नहीं किया जा सकता है ।

Comments

धन्यवाद। Umd फ़ाइल में बदलकर मेरे लिए त्रुटि से छुटकारा पाया।

— user1500321

— Umd

यह उत्तर स्वीकार किया जाना चाहिए था। बहुत बढ़िया। शेयर करने के लिए बहुत बहुत शुक्रिया।

— अजय कुमार

ऊपर, यह असली जवाब है।

— रॉन

तेजी से मदद के लिए बहुत बहुत धन्यवाद। मैं सोच रहा था कि यह / umd और / esm फ़ोल्डर क्या हैं लेकिन Google अच्छे परिणाम नहीं देता है।

— ब्लैकबैम

Answer 3

बूटस्ट्रैप 4 के लिए UMD संस्करण की आवश्यकता होती है popper.js, और सुनिश्चित करें कि आदेश निम्नानुसार है:

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Comments

UMD संस्करण केवल CDN लिंक है जिसने त्रुटि को दूर किया है।

— nyusternie

धन्यवाद दोस्त! आपके आदेश ने मेरी समस्या तय कर दी। चीयर्स!

— Noobie

Answer 4

आप अपने html में bootstrap.bundle.min.js भी जोड़ सकते हैं और popper.js हटा सकते हैं।

बंडल की गई JS फाइलें ( bootstrap.bundle.jsऔर minified bootstrap.bundle.min.js) में [पॉपर] ( https://popper.js.org/ ) शामिल हैं, लेकिन jQuery नहीं ।

Comments

bootstrap.bundle.min.jsशामिलpopperjs

— vuhung3990

इसका सबसे अच्छा जवाब क्योंकि इसके लिए अतिरिक्त पॉपर.जेएस पुस्तकालय का उपयोग करने की आवश्यकता नहीं है

— बुडीजेड

Answer 5

README में लाइन 96

लक्ष्य लक्षित करें

Popper.js को वर्तमान में 3 लक्ष्यों को ध्यान में रखते हुए शिप किया गया है: UMD, ESM और ESNext।

• यूएमडी - यूनिवर्सल मॉड्यूल परिभाषा: एएमडी, आवश्यकताएँ और ग्लोबल्स;
• ईएसएम - ईएस मॉड्यूल: वेबपैक / रोलअप या ब्राउज़र के लिए युक्ति का समर्थन;
• ESNext: में उपलब्ध है dist/, वेबपैक और के साथ प्रयोग किया जा सकता है babel-preset-env;

अपनी आवश्यकताओं के लिए सही उपयोग करना सुनिश्चित करें। यदि आप इसे एक <script>टैग के साथ आयात करना चाहते हैं , तो UMD का उपयोग करें।

Comments

UMD निर्देशिका में स्थित popper.min.js फ़ाइल का उपयोग करते हुए npm के माध्यम से पॉपर स्थापित करते समय मेरे जारी किए गए समाधान को हल किया गया। धन्यवाद!

— किकिन_

Answer 6

आपके पास बंडल कॉन्फिगर बंडलों में निम्नलिखित कोड है। (नया ScriptBundle ("~ / बंडलों / jquery")। शामिल करें ("~ / लिपियों / jquery- {संस्करण} .js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/umd/popper.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

लेआउट HTML में निम्नलिखित कोड

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

इसने मेरे लिए काम किया