How to use setAssetPath with NextJS

MichelleStuart · ‎10-06-2023

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 · ‎11-02-2023

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,
})

View solution in original post

Thomas_Fuhrmann · ‎10-20-2023

@MichelleStuartHave you tried using:

setAssetPath(window.location.href);

OR

setAssetPath(import.meta.url);

should also work.

MichelleStuart · ‎10-20-2023

Thanks @Thomas_Fuhrmann!

My main question is that I'm unsure which file to place this code in. _app.js? The index.js in the pages directory? A _document.js file?

When I place it in _app.js, I get an error from the stencil dependency.

I'm currently trying using the CDN <link> in the _document.js file.

Thomas_Fuhrmann · ‎10-20-2023

@MichelleStuartyou should place it in the file where you're actually using calcite components.

MichelleStuart · ‎11-02-2023

@Thomas_Fuhrmann I was finally able to get back to trying to use Calcite with our NextJS project and I'm still getting the same error. Have you ever gotten calcite to work with NextJS?

package.json dependencies:

"dependencies": {
    "@arcgis/core": "^4.25.5",
    "@esri/calcite-components-react": "^1.10.0",
    "@next/font": "13.0.7",
    "@reduxjs/toolkit": "^1.9.5",
    "cross-var": "^1.1.0",
    "mysql2": "^3.6.1",
    "next": "13.0.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-error-boundary": "^4.0.11",
    "react-icons": "^4.11.0",
    "react-redux": "^8.1.2",
    "sequelize": "^6.33.0",
    "sharp": "^0.32.6",
    "swr": "^2.2.2"
  },

I copied the assets using the line from the instructions:

cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/assets/

I imported the assets in the index.tsx file where I am using the calcite components:

import { setAssetPath } from '@esri/calcite-components/dist/components'
// CDN hosted assets
setAssetPath('https://js.arcgis.com/calcite-components/1.9.2/assets')

And I get this error which looks like an issue with stencil:

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
/home/mstuart/public_html/unified-tool/node_modules/ (stencil/core/internal/client/index.js (24)
Object.compileFunction
node:vm (360:18)
wrapSafe
node:internal/modules/cjs/loader (1126:15)
Module._compile
node:internal/modules/cjs/loader (1162:27)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1252:10)
Module.load
node:internal/modules/cjs/loader (1076:32)
Function.Module._load
node:internal/modules/cjs/loader (911:12)
Module.require
node:internal/modules/cjs/loader (1100:19)
require
node:internal/modules/cjs/helpers (108:18)
Object.@stencil/core/internal/client/index.js
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (434:18)
__webpack_require__
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./node_modules/@esri/calcite-components/dist/components/action.js (6:96)
Object../node_modules/@esri/calcite-components/dist/components/action.js
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (5670:1)
__webpack_require__
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./node_modules/@esri/calcite-components/dist/components/calcite-action.js (6:68)
Object../node_modules/@esri/calcite-components/dist/components/calcite-action.js
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (5703:1)
__webpack_require__
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./components/Shell.tsx (11:113)
Object../components/Shell.tsx
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (239:1)
__webpack_require__
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./pages/map/index.tsx (16:75)
Function.__webpack_require__.a
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./pages/map/index.tsx (1:21)
Object../pages/map/index.tsx
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (338:1)
__webpack_require__
file:///home/mstuart/public_html/unified-tool/.next/server/webpack-runtime.js (33:42)
__webpack_exec__
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (5988:39)
<unknown>
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (5989:28)
Object.<anonymous>
file:///home/mstuart/public_html/unified-tool/.next/server/pages/map.js (5992:3)
Module._compile
node:internal/modules/cjs/loader (1198:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1252:10)
Module.load
node:internal/modules/cjs/loader (1076:32)
Function.Module._load
node:internal/modules/cjs/loader (911:12)
Module.require
node:internal/modules/cjs/loader (1100:19)
require
node:internal/modules/cjs/helpers (108:18)
Object.requirePage
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/require.js (88:12)
<unknown>
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/load-components.js (37:73)
async Object.loadComponents
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/load-components.js (37:26)
async DevServer.findPageComponents
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/next-server.js (561:36)
async DevServer.renderPageComponent
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/base-server.js (942:24)
async DevServer.renderToResponse
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/base-server.js (971:32)
async DevServer.pipe
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/base-server.js (407:25)
async Object.fn
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/next-server.js (757:21)
async Router.execute
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/router.js (253:36)
async DevServer.run
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/base-server.js (384:29)
async DevServer.run
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/dev/next-dev-server.js (740:20)
async DevServer.handleRequest
file:///home/mstuart/public_html/unified-tool/node_modules/next/dist/server/base-server.js (322:20)

MichelleStuart · ‎11-02-2023

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,
})