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