Webpack

@D_Vik · Регистрация: 19.07.2016

Студворк — интернет-сервис помощи студентам

Доброго времени народ. Помогите пожалуйста с такой загвоздкой, уже весь мозг вывихнул. Пытаюсь заставить работать tsx с webpack. Прописал настройки в tsconfig.json как советуют в гугле. Пытаюсь отрендерить простой елемент:

Но в консоли получаю такое :

Хотя если посмотреть в отладчик, там кастомный рендер присутствует :

И в него уходят правильные параметры, но сама функция не вызывается ни разу, по крайней мере консоль лог в ней молчит. Не понимаю куда копать. Подскажите если кто нибудь сталкивался с таким.

@D_Vik · 05.06.2020, 16:56 **[ТС]**

На сколько мне хватает понимания, эта функция (рендер) находиться не в области видимости при вызове. Но, она прописана в tsconfig, и определяется сборщиком, потому как нет никаких ошибок :

JavaScript
1
2
3
4
5
6
7
{
  "compilerOptions": {
 
  //-----
 
  "jsx": "react",
  "jsxFactory": "domElement"

Да и если закоментировать фабрику, сразу падает ошибка.

@MrOnlineCoder · 05.06.2020, 17:51

D_Vik, а зачем вы переопределете эту функцию-фабрику? По умолчанию был бы рендер от React, разве нет?

@D_Vik · 05.06.2020, 18:00 **[ТС]**

Реакт библиотек нету в сборке, в том и задача, заставить это работать без библиотек реакт.

Добавлено через 2 минуты
Нужен только tsx.

@MrOnlineCoder · 05.06.2020, 18:38

D_Vik, тогда нужно же определить реализацию этой функции domElement, она у вас есть?

@D_Vik · 05.06.2020, 18:45 **[ТС]**

Да. Я потестил ее таким образом, для пущей уверенности, все работает хорошо:

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import domElement from "../vDom/domElement"
 
const check = (event: any) => {
  console.log(event.target)
}
 
const test = () => {
  return (
    domElement('div', {className: 'test', onclick: (event: any) => check(event)}, 'Hello',
      domElement('div', {className: 'test-child'}, 'Test-child'))
  )
}
 
export default test

Тут заморочка именно в сборщике или где то рядом. Где именно понять не могу и как то отловить не получается.

@shvyrevvg · 06.06.2020, 05:50

D_Vik, а импорт domElement не нужно добавлять в каждый файл jsx?

@D_Vik · 06.06.2020, 09:17 **[ТС]**

Сообщение от shvyrevvg

D_Vik, а импорт domElement не нужно добавлять в каждый файл jsx?

Вы на правильном пути.

С утра под кофе и со свежей головой, пересмотрел все это дело еще раз. Что получается. Для того что бы все это дело завелось, нужны еще реакт types, мы же как уважающие себе разработчики хотим отказаться от реакта. Поэтому, вместо реакт types, нужно писать свои, примерно таким макаром :

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
declare namespace JSX {
 
  interface Element {}
 
  interface IntrinsicElements {
 
    div: any, //Пока чтоб не морочить голову определил как any
    p: any
 
  }
  
}

В чем была проблема. Я конечно же пробовал изначально импортировать кастомный рендер в файлы tsx. Но при экспорте функции рендер из файла где она находится , отваливался namespace JSX, то шо находился в том же файле. Все что нужно было сделать перенести declare в другой файл.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833

	Webpack 05.06.2020, 15:25. Показов 716. Ответов 7 Метки tsx, webpack (Все метки) Доброго времени народ. Помогите пожалуйста с такой загвоздкой, уже весь мозг вывихнул. Пытаюсь заставить работать tsx с webpack. Прописал настройки в tsconfig.json как советуют в гугле. Пытаюсь отрендерить простой елемент: Но в консоли получаю такое : Хотя если посмотреть в отладчик, там кастомный рендер присутствует : И в него уходят правильные параметры, но сама функция не вызывается ни разу, по крайней мере консоль лог в ней молчит. Не понимаю куда копать. Подскажите если кто нибудь сталкивался с таким. 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	05.06.2020, 17:51
	D_Vik, а зачем вы переопределете эту функцию-фабрику? По умолчанию был бы рендер от React, разве нет? 0

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	05.06.2020, 18:00 [ТС]
	Реакт библиотек нету в сборке, в том и задача, заставить это работать без библиотек реакт. Добавлено через 2 минуты Нужен только tsx. 0

@MrOnlineCoder Всегда онлайн 1084 / 788 / 295 Регистрация: 07.04.2013 Сообщений: 2,703
	05.06.2020, 18:38
	D_Vik, тогда нужно же определить реализацию этой функции domElement, она у вас есть? 1

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	06.06.2020, 05:50
	D_Vik, а импорт domElement не нужно добавлять в каждый файл jsx? 1