'OpenSeadragon' import call expects exactly one argument issue on Safari
I'm having an issue with my website not loading on Safari and getting an error message
SyntaxError: Unexpected identifier 'OpenSeadragon'. import call expects exactly one argument.
This issue only appears to be happening in Safari (seen both on iPhone and iMac) and not an issue on Chrome or Firefox.
When I click on the error message it takes me to a main.min.js file that was downloaded from cdn.jsdelivr.net. I'm not an expert in web development so I'm not sure what's wrong with the lines that are highlighted, and also don't know how I'd modify this file anyway, since I don't deliver the file.
These are the relevant lines for how I'm including OpenSeadragon into my website in my index.html file.
Any help that can be provided would be appreciated.
It looks like you are using ES6 source file instead of output bundle for openseadragon-annotations npm package.
Chrome and Firefox were smart enough to pick up ES6 module syntax automatically, but you were supposed to use the output bundle file.
According to the Webpack build configuration the output file is dist/openseadragon-annotations.js.
Try replacing src/main.min.js with dist/openseadragon-annotations.js like this:
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/openseadragon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/openseadragon-annotations@1.0.5/dist/openseadragon-annotations.js"></script>
- ECMAScript:Harmony / ES6 to JavaScript compiler
- DeepCopy Object in JavaScript using immer
- POST https://localhost:5000/stored net::ERR_SSL_PROTOCOL_ERROR
- How to define a dynamic route in NextJs 14 API?
- How to remain reactivity in SvelteMap between components
- lint-staged not running on precommit
- API returning one result instead of multiple 11ty/eleventy-fetch Promise.all call
- Swagger..Unable to render this definition The provided definition does not specify a valid version field
- How to get data from React native FormData Object
- Wrapping app component with contextProvider component makes the webpage empty
- How can I have multiple Swiper slideshows on a single page?
- Laravel Mix keeps compiling every second without stop with Tailwind v4
- How to write a type guard function that tests against null or undefined?
- `export const` vs. `export default` in ES6
- How can I create a JSON object that can handle conditionals?
- The following error originated from your application code, not from Cypress
- jquery-ui datepicker change z-index
- Get number of non-empty input elements
- How to write an inline IF statement in JavaScript?
- Cypress - Drag and drop not working on a react-based website
- How to check if the font has a symbol
- When using Actions2 in sails.js how do i validate the body object?
- ReactJS: React.render is not a function and React.createElement is not a function
- Node require returns undefined
- How do you organize your Javascript code?
- How can I throttle a ResizeObserver?
- ERESOLVE unable to resolve dependency tree while installing a pacakge
- Does GQL support spreading / composing objects (eg. input args)?
- Scroll the page on drag with jQuery
- How to disable the Material UI Link API component