[Problem/Question]
ui-kit을 쓰려고 하는데 자꾸만 에러가 뜹니다. typescript 문제인 것 같습니다.
// If problem, please fill out the below. If question, please delete.
[UIKit Version]
“react”: “^18.2.0”,
“@sendbird/chat”: “^4.9.3”,
“@sendbird/uikit-react”: “^3.6.0”,
“@sendbird/uikit-tools”: “^0.0.1-alpha.39”,
에러 내용
npm run start → got error
ERROR in ./node_modules/@sendbird/uikit-react/SendbirdProvider.js 963:51-70
export ‘UIKitConfigProvider’ (imported as ‘UIKitConfigProvider’) was not found in ‘@sendbird/uikit-tools’ (module has no exports)
ERROR in ./node_modules/@sendbird/uikit-react/SendbirdProvider.js 1018:6-20
export ‘useUIKitConfig’ (imported as ‘useUIKitConfig’) was not found in ‘@sendbird/uikit-tools’ (module has no exports)
ERROR in ./node_modules/@sendbird/uikit-tools/dist/esm/index.js 1:0-37
Module not found: Error: Can’t resolve ‘./uikitConfiguration’ in ‘Web_Admin/node_modules/@sendbird/uikit-tools/dist/esm’
Did you mean ‘index.js’?
BREAKING CHANGE: The request ‘./uikitConfiguration’ failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a '.js’ file where the package.json contains ‘“type”: “module”’).
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@sendbird/uikit-tools/dist/esm/index.js 2:0-24
Module not found: Error: Can’t resolve ‘./hooks’ in ‘/Web_Admin/node_modules/@sendbird/uikit-tools/dist/esm’
Did you mean ‘index.js’?
BREAKING CHANGE: The request ‘./hooks’ failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a '.js’ file where the package.json contains ‘“type”: “module”’).
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@sendbird/uikit-tools/dist/esm/index.js 3:0-28
Module not found: Error: Can’t resolve ‘./constants’ in ‘/Web_Admin/node_modules/@sendbird/uikit-tools/dist/esm’
Did you mean ‘index.js’?
BREAKING CHANGE: The request ‘./constants’ failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a '.js’ file where the package.json contains ‘“type”: “module”’).
The extension in the request is mandatory for it to be fully specified.
my tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "es2016",
"jsx": "react-jsx",
"module": "esnext",
"sourceMap": true,
"removeComments": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"./src/",
"src/components/container/.tsx",
"node_modules/@sendbird/uikit-react/index.d.ts"
],
"files": ["node_modules/@sendbird/uikit-react/index.d.ts"],
"exclude": ["node_modules"]
}
my webpack.common.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const dotenv = require("dotenv");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
const options = {};
module.exports = {
entry: `${path.resolve(__dirname, "../src")}/index.tsx`,
module: {
rules: [
{
test: /\.(ts|tsx|js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.(png|svg)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[name].[ext]?[hash]"
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html"
}),
new webpack.ProvidePlugin({
React: "react"
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env)
}),
new WebpackManifestPlugin(options)
],
resolve: {
alias: {
"@": path.resolve(__dirname, "../src/")
},
extensions: [".js", ".ts", ".jsx", ".tsx", ".css", ".json"],
}
};
.babelrc
{
"presets": [
"@babel/preset-react",
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
],
"@babel/preset-typescript"
],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
