ix.siemens.com with Next JS

[manojpethe]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

I have tried to configure ix.siemens with Next JS 14.2.5 and as soon as I try to import any component, it throws following error:

D:\code\ixsiemens\next-ixsiemens\node_modules@siemens\ix\components\ix-action-card.js:1
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1274:20)
at Module._compile (node:internal/modules/cjs/loader:1320:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at mod.require (D:\code\ixsiemens\next-ixsiemens\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:177:18)
at Object. (D:\code\ixsiemens\next-ixsiemens\node_modules@siemens\ix-react\dist\index.js:7:25)
at Module._compile (node:internal/modules/cjs/loader:1356:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19) {
page: '/home'
}

Can someone provide guidance to resolve this or file this as a bug?

What type of frontend framework are you seeing the problem on?

React, Others

Which version of iX do you use?

2.4.0

Code to produce this issue.

// Create any page under pages folder and try to import any component.

import { IxContainer, IxNavItem, PageContainer, Panel, SelectOption } from '@motogarages/react-brandville';
import React from 'react'

const index = () => {
  return (
    <div>
        
        index
        
    </div>
  )
}

export default index

[danielleroux]

NextJS is not yet official supported by stencil you can track the process here: ionic-team/stencil#5831 ionic-team/stencil-ds-output-targets#445

After Stencil provide a solution iX will adapt it.

Regardless of the official support please provide a minimal repository to reproduce the issue your snippets are not enough.