{"id":1114321,"date":"2021-01-15T10:38:11","date_gmt":"2021-01-15T18:38:11","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1114321"},"modified":"2024-04-12T04:08:32","modified_gmt":"2024-04-12T11:08:32","slug":"ssr-esm","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm","title":{"rendered":"Server Side Rendering Frameworks with @arcgis\/core"},"author":23691,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191,22941],"tags":[758281,757301,24921,758271],"industry":[],"product":[761642,36831],"class_list":["post-1114321","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-arcgis-core","tag-es-modules","tag-javascript","tag-server-side-rendering","product-platform","product-js-api-arcgis"],"acf":{"short_description":"Examples and workflow for setting up the beta @arcgis\/core ECMAScript Modules with Server Side Rendering Frameworks.","flexible_content":[{"acf_fc_layout":"content","content":"
\n
I am elated by the beta release of the @arcgis\/core<\/a> ECMAScript Modules (ESM). The release is a major victory in the campaign to modernize<\/a> the ArcGIS Maps SDK for JavaScript. Needless to say, I spent hours pouring over the ESM samples provided via the jsapi-resources<\/a> GitHub repo. I then set out on the task of creating my own samples using Server Side Rendering (SSR) frameworks. I suggest taking a look at this blog post<\/a> if you aren’t using SSR frameworks.<\/div>\n
<\/div>\n
If you are here for examples, take a look at the GitHub repo<\/a>. The repo contains samples for NextJS<\/a>, NuxtJS<\/a>, SvelteKit<\/a>, Sapper (discontinued)<\/a>, and Svelte<\/a>.<\/div>\n<\/div>\n"},{"acf_fc_layout":"content","content":"

 <\/p>\n

The\u00a0First\u00a0Attempt<\/h2>\n"},{"acf_fc_layout":"content","content":"

If you tried this on your own, you likely ran into the following error message:<\/p>\n"},{"acf_fc_layout":"content","content":"

\r\nError<\/span> [ERR_REQUIRE_ESM]: Must use import<\/span> to load ES Module: \u2026\r\nrequire() of ES modules is not supported.\r\n\r\n\u2026 is an ES module file as<\/span> it is a .js file whose nearest parent package.json contains\r\n\u201ctype\u201d: \u201cmodule\u201d which defines all .js files in that package scope as<\/span> ES modules.\r\n\r\nInstead rename FeatureLayer.js to end in .cjs, change the requiring code to \r\nuse import<\/span>(), or remove \u201ctype\u201d: \u201cmodule\u201d from<\/span> \u2026\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
As suggested in the error message, I started changing file extensions to cjs<\/code> (CommonJS) or mjs<\/code> (ECMAScript). However, it quickly diverged into a game of whack-a-mole. I came across another solution for using ES modules in SSR frameworks: transpiling the dependencies with babel.<\/p>\n
NuxtJS has a built in method for transpiling dependencies, documented here<\/a>. Transpiling @arcgis\/core<\/code> will take several minutes on the first build, so have patience! You will also see a few errors (below) concerning file size.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1114331,"id":1114331,"title":"Transpile Error","filename":"transpile_error.jpg","filesize":39575,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\/transpile_error","alt":"ESM Babel Transpile Error","author":"23691","description":"","caption":"","name":"transpile_error","status":"inherit","uploaded_to":1114321,"date":"2021-01-15 16:46:46","modified":"2021-01-21 21:57:24","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1356,"height":276,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","medium-width":464,"medium-height":94,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","medium_large-width":768,"medium_large-height":156,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","large-width":1356,"large-height":276,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","1536x1536-width":1356,"1536x1536-height":276,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","2048x2048-width":1356,"2048x2048-height":276,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error-826x168.jpg","card_image-width":826,"card_image-height":168,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/transpile_error.jpg","wide_image-width":1356,"wide_image-height":276}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
 <\/p>\n
Once @arcgis\/core<\/code> is transpiled, you will be able to import the ES modules. That should solve the issue if your application does not render a map. I included an example of a no-map solution using module transpilation in the NuxtJS sample<\/a>.<\/div>\n
<\/div>\n"},{"acf_fc_layout":"content","content":"
However, most of us like maps in our apps. And this is where we run into the second error message:<\/p>\n
<\/div>\n"},{"acf_fc_layout":"content","content":"
ReferenceError:\u00a0Element\u00a0is\u00a0not\u00a0defined<\/code><\/p>\n"},{"acf_fc_layout":"content","content":"
<\/div>\n
This error is referring to a Document Object Model (DOM) Element<\/a>. The DOM exists in the browser, and is therefore unavailable to code executed on the server by Node. Rendering an ArcGIS JS map on the server may not work, but there are always other options. I scrapped the module transpilation workflow and moved on.<\/div>\n"},{"acf_fc_layout":"content","content":"
 <\/p>\n
Forgoing SSR for the ArcGIS Component<\/h2>\n"},{"acf_fc_layout":"content","content":"
The solution for getting @arcgis\/core<\/code> working on a SSR framework is disabling server side rendering for the map component. I know, I know, that sounds like cheating right? It’s actually a viable option. The rest of your application will still reap the benefits of SSR. How much information for Search Engine Optimization (SEO) lives in the map component anyway?<\/p>\n"},{"acf_fc_layout":"content","content":"
Many SSR frameworks provide the option, with varying degrees of difficulty, to only render a component on the client side. This is what we need. Of the options I explored, NextJS has the clearest workflow<\/a>. Here is the code for using a component without SSR in NextJS:<\/div>\n
<\/div>\n"},{"acf_fc_layout":"content","content":"
\r\nimport<\/span> dynamic from<\/span> \"next\/dynamic\"<\/span>;\r\n\r\nconst<\/span> EsriMapWithNoSSR = dynamic(() => import<\/span>(\"..\/components\/EsriMap\"<\/span>), {\r\n  ssr: false,\r\n});\r\n\r\nexport<\/span> default<\/span> () => <EsriMapWithNoSSR<\/span> \/><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
\n
<\/div>\n
That’s it. Now you can use the EsriMapWithNoSSR<\/code> component and the map will render!<\/p>\n
<\/div>\n<\/div>\n"},{"acf_fc_layout":"image","image":{"ID":1114341,"id":1114341,"title":"NextJS Map","filename":"next_map.jpg","filesize":126845,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\/next_map","alt":"map rendered in NextJS with ESM","author":"23691","description":"","caption":"","name":"next_map","status":"inherit","uploaded_to":1114321,"date":"2021-01-15 16:46:51","modified":"2021-01-21 21:58:40","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1900,"height":839,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","medium-width":464,"medium-height":205,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","medium_large-width":768,"medium_large-height":339,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","large-width":1900,"large-height":839,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map-1536x678.jpg","1536x1536-width":1536,"1536x1536-height":678,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","2048x2048-width":1900,"2048x2048-height":839,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map-826x365.jpg","card_image-width":826,"card_image-height":365,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/next_map.jpg","wide_image-width":1900,"wide_image-height":839}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
\n
<\/div>\n
I found solutions for rendering a map in NuxtJS and Sapper as well, which are included in the GitHub repo<\/a>. The samples contain additional framework specific documentation.<\/div>\n<\/div>\n"}],"authors":[{"ID":23691,"user_firstname":"Ben","user_lastname":"Elan","nickname":"Izzy","user_nicename":"belan","display_name":"Ben Elan","user_email":"belan@esri.com","user_url":"https:\/\/github.com\/benelan","user_registered":"2020-04-07 18:06:44","user_description":"Web developer specializing in UI\/UX and spatial data visualization\/analysis. \r\n\r\nProduct Engineer for Calcite Components and ArcGIS API for JavaScript.","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/modernize.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/Screenshot-6.png"},"yoast_head":"\nServer Side Rendering Frameworks with @arcgis\/core<\/title>\n<meta name=\"description\" content=\"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Server Side Rendering Frameworks with @arcgis\/core\" \/>\n<meta property=\"og:description\" content=\"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T11:08:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\"},\"author\":{\"name\":\"Ben Elan\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc\"},\"headline\":\"Server Side Rendering Frameworks with @arcgis\/core\",\"datePublished\":\"2021-01-15T18:38:11+00:00\",\"dateModified\":\"2024-04-12T11:08:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\"},\"wordCount\":7,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"@arcgis\/core\",\"ES Modules\",\"JavaScript\",\"Server Side Rendering\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\",\"name\":\"Server Side Rendering Frameworks with @arcgis\/core\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-01-15T18:38:11+00:00\",\"dateModified\":\"2024-04-12T11:08:32+00:00\",\"description\":\"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Server Side Rendering Frameworks with @arcgis\/core\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc\",\"name\":\"Ben Elan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png\",\"caption\":\"Ben Elan\"},\"description\":\"Web developer specializing in UI\/UX and spatial data visualization\/analysis. Product Engineer for Calcite Components and ArcGIS API for JavaScript.\",\"sameAs\":[\"https:\/\/github.com\/benelan\",\"https:\/\/www.linkedin.com\/in\/benelan\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Web Components\",\"UI\",\"UX\",\"User Interface\",\"Node\",\"Automation\",\"GitHub Action\",\"Mapping\",\"Spatial Data\",\"Visualization\",\"Analysis\",\"Web Design\",\"Web Development\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Server Side Rendering Frameworks with @arcgis\/core","description":"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm","og_locale":"en_US","og_type":"article","og_title":"Server Side Rendering Frameworks with @arcgis\/core","og_description":"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T11:08:32+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm"},"author":{"name":"Ben Elan","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc"},"headline":"Server Side Rendering Frameworks with @arcgis\/core","datePublished":"2021-01-15T18:38:11+00:00","dateModified":"2024-04-12T11:08:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm"},"wordCount":7,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["@arcgis\/core","ES Modules","JavaScript","Server Side Rendering"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm","name":"Server Side Rendering Frameworks with @arcgis\/core","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-01-15T18:38:11+00:00","dateModified":"2024-04-12T11:08:32+00:00","description":"Examples and workflow for setting up the ArcGIS API for JavaScript's new @arcgis\/core ES Modules with Server Side Rendering Frameworks.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/ssr-esm#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Server Side Rendering Frameworks with @arcgis\/core"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6e893143457a4997538307397e204cdc","name":"Ben Elan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/01\/pfp-solid-dark-1-465x465.png","caption":"Ben Elan"},"description":"Web developer specializing in UI\/UX and spatial data visualization\/analysis. Product Engineer for Calcite Components and ArcGIS API for JavaScript.","sameAs":["https:\/\/github.com\/benelan","https:\/\/www.linkedin.com\/in\/benelan"],"gender":"male","knowsAbout":["JavaScript","React","Web Components","UI","UX","User Interface","Node","Automation","GitHub Action","Mapping","Spatial Data","Visualization","Analysis","Web Design","Web Development"],"knowsLanguage":["English"],"jobTitle":"Product Engineer","worksFor":"Esri","url":""}]}},"text_date":"January 15, 2021","author_name":"Ben Elan","author_page":false,"custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/01\/Screenshot-6.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":758281,"name":"@arcgis\/core","slug":"arcgis-core","term_group":0,"term_taxonomy_id":758281,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"},{"term_id":757301,"name":"ES Modules","slug":"es-modules","term_group":0,"term_taxonomy_id":757301,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":758271,"name":"Server Side Rendering","slug":"server-side-rendering","term_group":0,"term_taxonomy_id":758271,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2683,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":213,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1114321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/23691"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1114321"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1114321\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1114321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1114321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1114321"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1114321"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1114321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
ECMAScript modules on Node are still relatively new<\/a>. Therefore, ESMs are not currently supported on the server for NextJS nor NuxtJS (two of the most popular SSR frameworks for React and Vue respectively). The SSR frameworks use CommonJS modules instead, which are not included in @arcgis\/core<\/code>. The omission of CommonJS modules cuts the package size roughly in half.<\/p>\n