Я не могу импортировать какие -либо компоненты из моей собственной библиотеки компонентов реагированияJavascript

Форум по Javascript
Ответить
Anonymous
 Я не могу импортировать какие -либо компоненты из моей собственной библиотеки компонентов реагирования

Сообщение Anonymous »

Я разрабатываю библиотеку компонентов для компонентов, которые мы используем общего в наших проектах. Теперь для добавления только одна кнопка.

Код: Выделить всё

export function Button(){
return Deneme
}
-> main_folder -> lib -> main.js

Код: Выделить всё

export { Button } from './components/Button/index.jsx'
Я получаю сборку с режимом библиотеки
-> main_folder -> vite.config.js

Код: Выделить всё

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
lib: {
entry: resolve(__dirname, 'lib/main.js'),
name: 'salaui',
formats: ['es']
},
rollupOptions: {
external: ['react', 'react-dom', 'react/jsx-runtime'],
}
}
})
И это мой package.json

Код: Выделить всё

{
"name": "salaui",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview",
"prepublishOnly": "npm run build"
},
"dependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0",
"salaui": "file:"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"vite": "^6.2.0"
},
"main": "dist/salaui.js",
"files": [
"dist"
]
}
< /code>
У меня есть такая проблема, как это, когда я добавляю кнопку (), который я создал в проект, который я создал, используя Vite, я могу работать гладко, но когда я добавляю его в старый проект, я не могу его использовать. Я получаю следующую ошибку; < /p>
[b] объекты недопустимы в качестве ребенка React (найдено: объект с ключами {$$ typeof, type, key, opts, _owner, _store}). Если вы хотели отобрать коллекцию детей, вместо этого используйте массив. /> < /p>
Это  webpack.dev.js < /strong> используется в этом старом проекте < /p>
const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
mode: 'development',
devtool: 'source-map',
devServer: {
port: 3100,
https: true,
host: 'localhost',
historyApiFallback: true,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
}
}
});
  • Это из new [/b] project (vite)




Подробнее здесь: https://stackoverflow.com/questions/795 ... nt-library
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»