How to use setAssetPath with NextJS

MichelleStuart

I'm having trouble figuring out where in the NextJS file system to use the "setAssetPath"  line of code.

In the documentation from Calcite Design system (https://developers.arcgis.com/calcite-design-system/get-started/) it says to use these lines

 

import { setAssetPath } from "@esri/calcite-components/dist/components"; // CDN hosted assets 

setAssetPath("https://js.arcgis.com/calcite-components/1.9.0/assets");

// Local assets // setAssetPath(PATH); // PATH depends on framework, more info below

 

When I place these in the _app.jsx file, I get the error: 

Cannot use import statement outside a module at /home/.../node_modules/ (stencil/core/internal/client/index.js:24)

I don't see "more info below" about which framework affects PATH but if I try to point to my public folder assets (where I copied from an earlier instruction in the docs), I still get the same error. 

I'm new to NextJS and not sure if I'm just importing in the wrong file or if there is some other way to get Calcite to work with NextJS.   The error makes it look like one of the dependencies (stencil) is not compatible with NextJS.  The rest of my office has abandoned Calcite because they can't get it to work with NextJS but I really like using Calcite and would love to find a solution.

Does anyone have an example using Calcite in NextJS?

 

MichelleStuart

Oh my goodness, I was reviewing what I posted and noticed that the version numbers were off between what was installed in the package.json and the asset lines that I copied from the Calcite "Get Started" screen.  When I fixed the version numbers to match (all 1.10.0), it works!  Wowza!

It looks like you also have to do the noSSR trick that Ben Elan talks about in this blog post: https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/ssr-esm/

const ShellWithNoSSR = dynamic(() => import('../../components/Shell'), {
  ssr: false,
})