How to use setAssetPath with NextJS

MichelleStuart — Fri, 20 Oct 2023 12:15:31 GMT

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?

Re: How to use setAssetPath with NextJS

Thomas_Fuhrmann — Fri, 20 Oct 2023 11:29:04 GMT

@MichelleStuartHave you tried using:

setAssetPath(window.location.href);

setAssetPath(import.meta.url);

should also work.

Re: How to use setAssetPath with NextJS

MichelleStuart — Fri, 20 Oct 2023 12:03:27 GMT

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.

Re: How to use setAssetPath with NextJS

Thomas_Fuhrmann — Fri, 20 Oct 2023 14:02:04 GMT

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

Re: How to use setAssetPath with NextJS

MichelleStuart — Thu, 02 Nov 2023 12:19:38 GMT

@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)

Re: How to use setAssetPath with NextJS

MichelleStuart — Thu, 02 Nov 2023 13:22:51 GMT

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

topic Re: How to use setAssetPath with NextJS in Calcite Design System Questions

How to use setAssetPath with NextJS

Re: How to use setAssetPath with NextJS

Re: How to use setAssetPath with NextJS

Re: How to use setAssetPath with NextJS

Re: How to use setAssetPath with NextJS

Re: How to use setAssetPath with NextJS