Description
Describe the bug
A clear and concise description of what the bug is.
Getting this error after importing the SDK
TypeError: (0 , rt.createSpanFunction) is not a function
also, tried to add it asynchronously like this:
const { OmnichannelChatSDK } = await import("@microsoft/omnichannel-chat-sdk");
same result. As soon I add SDK into the code it immediately generates the error
To Reproduce
Steps to reproduce the behavior:
Add the SDK into React component with import statement. This will lead to error without any additional logic
Expected behavior
Error not break the code
Additional context
Add any other context about the problem here. A link to reproduce the issue or a repo that contains the repro is much appreciated.
Node 22
package.json
{
"name": "aem-maven-archetype",
"version": "1.0.0",
"description": "Generates an AEM Frontend project with Webpack",
"repository": {
"type": "git",
"url": ""
},
"private": true,
"main": "src/main/webpack/site/main.ts",
"license": "SEE LICENSE IN LICENSE.txt",
"scripts": {
"dev": "webpack --env dev --config ./webpack.dev.js && clientlib --verbose",
"prod": "webpack --config ./webpack.prod.js && clientlib --verbose",
"start": "webpack-dev-server --open --config ./webpack.dev.js",
"sync": "aemsync -d -p ../ui.apps/src/main/content",
"watch": "webpack-dev-server --config ./webpack.dev.js --env writeToDisk & chokidar -c "clientlib" ./dist & aemsync -w ../ui.apps/src/main/content"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.3.3",
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
"@types/express": "^4.17.17",
"@types/express-serve-static-core": "^4.17.33",
"@types/js-cookie": "^3.0.2",
"@types/node": "^17.0.41",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@typescript-eslint/eslint-plugin": "^5.7.0",
"@typescript-eslint/parser": "^5.7.0",
"acorn": "^6.1.0",
"aem-clientlib-generator": "^1.4.3",
"aemsync": "^4.0.1",
"autoprefixer": "^10.4.20",
"browserslist": "^4.2.1",
"chokidar-cli": "^3.0.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^10.1.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"cssnano": "^5.0.12",
"eslint": "^8.4.1",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-webpack-plugin": "^3.1.1",
"glob-import-loader": "^1.2.0",
"html-webpack-plugin": "^5.5.0",
"jsonpath": "^1.1.1",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
"mini-css-extract-plugin": "^2.4.5",
"postcss": "^8.2.15",
"postcss-loader": "^8.1.1",
"prettier": "2.8.8",
"sass": "^1.45.0",
"sass-loader": "^12.4.0",
"source-map-loader": "^0.2.4",
"style-loader": "^0.14.1",
"svgo-loader": "^3.0.3",
"terser-webpack-plugin": "^5.2.5",
"ts-loader": "^9.2.6",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"typescript": "4.5",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@azure/core-http": "^3.0.4",
"@azure/core-tracing": "^1.2.0",
"@babel/preset-react": "^7.25.9",
"@babel/preset-typescript": "^7.26.0",
"@microsoft/omnichannel-chat-components": "1.1.6",
"@microsoft/omnichannel-chat-sdk": "1.7.2",
"@microsoft/omnichannel-chat-widget": "1.7.2",
"babel-loader": "^9.2.1",
"babel-plugin-react-css-modules": "^5.2.6",
"bootstrap": "^5.3.2",
"botframework-directlinespeech-sdk": "^4.18.0",
"crypto-browserify": "^3.12.1",
"event-target-shim": "^6.0.2",
"js-cookie": "^3.0.1",
"react": "^18.0.9",
"react-dom": "^18.0.9",
"react-inlinesvg": "^3.0.1",
"readable-stream": "^4.5.2",
"stream-browserify": "^3.0.0",
"uuid": "^9.0.0"
},
"resolutions": {
"@types/express-serve-static-core": "4.17.33",
"@types/express": "4.17.17"
},
"browserslist": [
"last 2 version",
"> 1%"
]
}
ts-config
{
"compilerOptions": {
"target": "esnext",
"moduleResolution": "node",
"module": "esnext",
"baseUrl": "../ui.frontend",
"removeComments": false,
"allowJs": true,
"preserveConstEnums": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"downlevelIteration": true,
"lib": ["dom", "dom.iterable", "ES2021.String"],
"skipLibCheck": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"noEmitOnError": true,
"jsx": "react",
"outDir": "./dist"
},
"include": ["./src//*.ts", "./src//.tsx"],
"exclude": ["node_modules", "./dist/**/"]
}