search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.23k stars 46.32k forks source link

[React 19] - Components from React.createElement are not renderable anymore #29042

Closed titouancreach closed 3 months ago

titouancreach commented 4 months ago

Summary

Hello,

Svg (imported with @svgr/webpack) are not renderable anymore (since react 19 beta (alpha was ok)), this is the code produced by the webpack loader:

import * as React from "react";
var SvgLogoOfficiel = function SvgLogoOfficiel(props) {
  return /*#__PURE__*/React.createElement("svg", _extends({
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 2000 2000"
  }, props), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("style", null, ".logo-officiel_svg__cls-1{fill:#0c6d8e}.logo-officiel_svg__cls-2{fill:#f9d57c}.logo-officiel_svg__cls-3{fill:#de5351}.logo-officiel_svg__cls-4{fill:#ffedb4}"))), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
    id: "logo-officiel_svg__Calque_3",
    cx: 1000,
    cy: 1000,
    r: 867.5,
    className: "logo-officiel_svg__cls-1",
    "data-name": "Calque 3"
  })), _g || (_g = /*#__PURE__*/React.createElement("g", {
    id: "logo-officiel_svg__Calque_12",
    "data-name": "Calque 12"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M819.57 1354.67a264.9 264.9 0 0 1-56.31-57.44C720.11 1237.1 703.79 1164 716 1085.81a360 360 0 0 1 33.68-104.41 371.3 371.3 0 0 1 61.88-89.22c43.92-46.68 95.51-76.68 149.19-86.75 11.11-2.09 27.94-6.28 40.93-10.19 5.9-1.78 10.81-3.43 14.6-4.9 8.53-3.3 21.6-8.73 35.85-16h.18l1.72-1c125.81-71 132.22-124.31 140.33-191.83 4.24-35.32 9.05-75.35 33.14-124.63 23.41-47.9 51.64-99.9 115.19-163.54 52.41 140.54 58.87 266.68 19.17 375.07-39.23 107.1-115.76 174.56-173 212.3-55.86 36.84-109.86 58.35-139.24 65.6-21.64 5.36-38.46 10.61-52.94 16.53-71.26 29.14-100.13 83-93.61 174.61 4.15 58.47 30.94 102.62 79.67 131.45-16.87 7.1-33.17 11.83-46.82 15.79-7.64 2.21-14.24 4.13-19.57 6.07-38.17 13.92-70.7 35.41-96.78 63.91",
    className: "logo-officiel_svg__cls-2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1339.72 307.14c48 134.35 53.12 255 15.1 358.76-38.53 105.18-113.82 171.5-170.14 208.62-55 36.24-108.1 57.4-136.86 64.51-22 5.45-39.15 10.81-54 16.87-74.73 30.56-105 86.72-98.26 182.08 4 55.88 27.73 99.23 70.71 129.27-11.64 4.19-22.73 7.41-32.46 10.23-7.77 2.26-14.48 4.2-20 6.23-37.06 13.51-69 34-95 60.87a256.8 256.8 0 0 1-49.4-51.72 261.9 261.9 0 0 1-43.93-99.86c-7.06-33.89-7.75-69.57-2-106a352.3 352.3 0 0 1 32.92-102.26 363.7 363.7 0 0 1 60.6-87.42 309.8 309.8 0 0 1 68-54.93c25-14.72 51-24.68 77.13-29.59 11.33-2.13 28.48-6.4 41.71-10.38 6.08-1.84 11.18-3.55 15.15-5.08 8.36-3.25 21-8.5 34.91-15.46h.37l3.43-1.94c129.13-72.84 136.06-130.59 144.1-197.46 4.17-34.73 8.9-74.1 32.43-122.23 22.08-45.19 48.5-94.08 105.48-153.11m5.9-27.14c-71.8 69.71-101.61 126.08-124.86 173.66-69.78 142.76 19 206.38-170.42 313.22a392 392 0 0 1-36.77 16.47c-3.83 1.49-8.71 3.1-14.05 4.71-13.5 4.06-30 8.08-40.15 10C902.25 808.77 849 841.45 806.1 887c-100 106.22-143.66 282.55-48.93 414.57a273.1 273.1 0 0 0 63.48 63.14c24.68-28.61 57.32-52 98.27-66.94 16.76-6.12 48.8-12.54 80.6-28.33-42-20.87-83.68-58.1-89-132.56-7.25-101.89 32.1-143.88 89-167.14 16.12-6.59 33.64-11.67 51.9-16.19 29.71-7.34 84-28.64 141.51-66.55 139.59-91.94 278.77-281.66 152.69-607Z",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1014.14 1770.28a265 265 0 0 0 30.22-35.77c17.68-24.84 40.35-64.17 48-110.43 8.3-50.52-.35-122.81-88.7-180.25-28.2-18.34-63.09-34.33-103.71-47.53a275.7 275.7 0 0 1-68-32.89c24.23-26 54.33-45.7 89.58-58.56 4.86-1.77 11.23-3.62 18.61-5.76 16.06-4.66 37.78-11 59.42-21.27 21.64 10.31 43.35 16.61 59.41 21.27 7.38 2.14 13.75 4 18.6 5.76 38 13.87 70.06 35.67 95.18 64.8 37.63 43.61 57.86 101.83 57 163.94-.89 61.19-21.91 118.77-59.18 162.14-19.29 22.45-45.81 41.31-76.69 54.54a266.6 266.6 0 0 1-79.74 20.01",
    className: "logo-officiel_svg__cls-2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M999.52 1286.1c21.08 9.68 41.8 15.69 57.32 20.2 7.25 2.1 13.5 3.91 18.13 5.6 36.81 13.42 67.78 34.5 92.06 62.65 36.43 42.22 56 98.66 55.14 158.93a259.2 259.2 0 0 1-15.22 84.26 232.3 232.3 0 0 1-42.15 73.11c-18.54 21.58-44.12 39.74-74 52.53a255 255 0 0 1-56.95 16.71c5.86-6.84 11.51-14.12 16.57-21.23 18.14-25.49 41.41-65.88 49.24-113.56 8.66-52.73-.27-128.11-92-187.76-28.75-18.69-64.24-35-105.48-48.38a268.2 268.2 0 0 1-58.54-27.1c22.27-22 49.24-38.81 80.39-50.16 4.61-1.69 10.87-3.5 18.12-5.61 15.53-4.5 36.24-10.51 57.33-20.19m0-16.62c-31.8 15.79-63.84 22.21-80.6 28.33-40.95 14.93-73.59 38.33-98.27 66.94a283 283 0 0 0 76.94 38.68c41.79 13.58 75.33 29.38 101.93 46.69C1189 1573.31 1017 1772 989.72 1779c77-.42 146.33-31.68 186.46-78.38 78.52-91.36 83.38-241.81 2.21-335.87-24.68-28.61-57.33-52-98.29-66.94-16.75-6.12-48.78-12.54-80.58-28.33Z",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M805 877.31C748.48 839 675.49 772.48 637.65 668.49 598.23 560.15 604.84 434 657.29 293.41c63.56 63.64 91.79 115.64 115.2 163.54 24.15 49.41 28.79 89.52 32.89 124.92 7.81 67.42 14 120.67 139.62 191.54l1.72 1h.18c10.23 5.19 19.85 9.45 27.62 12.67-6.06 1.47-11.84 2.75-16.54 3.64C903 801 850.19 830.92 805 877.31",
    className: "logo-officiel_svg__cls-3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M660.26 307.14c57 59 83.4 107.92 105.49 153.11 23.58 48.25 28.15 87.69 32.18 122.48 7.74 66.78 14.42 124.46 143.39 197.21l3.43 1.94h.36c1.83.91 3.64 1.8 5.41 2.65-52.52 11.23-102.84 39.77-146.41 83.05-54.83-38.15-123.39-102.65-159.42-201.66-37.75-103.76-32.5-224.36 15.57-358.78M654.37 280C528.28 605.37 666.49 795.09 806.1 887c42.89-45.59 96.15-78.27 153.27-89 10.18-1.92 26.65-5.94 40.15-10-5.35-1.6-10.24-3.22-14.06-4.71a392 392 0 0 1-36.77-16.47C759.29 660 849 596.42 779.22 453.66 756 406.08 726.17 349.71 654.37 280",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M984.89 1770.28a266.6 266.6 0 0 1-79.66-20c-30.88-13.23-57.4-32.09-76.68-54.54-37.27-43.37-58.29-101-59.18-162.14-.9-62.11 19.32-120.33 57-163.94 25.58-29.66 56.35-50.52 94.08-63.77 7.56-2.65 15-4.92 23-7.31 18.15-5.49 36.91-11.17 59.48-22.38 57.26-28.42 88.59-75.1 93.11-138.74 6-84.06-17.82-136.33-76.84-166.89 9.91-3.29 21.09-6.46 34.11-9.69 30.94-7.65 83.13-28.44 138.49-64.09a371.7 371.7 0 0 1 57.63 84.62 359.6 359.6 0 0 1 33.57 104.4c12.26 78.18-4.07 151.29-47.22 211.42a264.8 264.8 0 0 1-61.73 61.41c-20 14.29-43.94 26.29-75.18 37.75-42 15.4-75.65 29.37-103.43 47.44-88.35 57.45-97 129.73-88.71 180.26 7.6 46.26 30.27 85.58 47.95 110.42a264.3 264.3 0 0 0 30.21 35.77",
    className: "logo-officiel_svg__cls-3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1190.37 906.53a364.8 364.8 0 0 1 52.26 78.21 352 352 0 0 1 32.95 102.26c5.72 36.47 5 72.15-2 106a261.9 261.9 0 0 1-43.88 99.85 257.5 257.5 0 0 1-60 59.67c-19.48 13.9-42.81 25.59-73.4 36.82-42.48 15.58-76.58 29.74-104.94 48.19-91.75 59.65-100.68 135-92 187.76 7.83 47.68 31.1 88.08 49.24 113.56 5.06 7.11 10.71 14.39 16.56 21.23a255 255 0 0 1-56.93-16.71c-29.84-12.79-55.41-31-74-52.53a232.1 232.1 0 0 1-42.14-73.11 259.2 259.2 0 0 1-15.22-84.26c-.88-60.27 18.7-116.71 55.14-158.93 24.7-28.64 54.43-48.79 90.88-61.59 7.41-2.6 14.81-4.84 22.65-7.21 17.58-5.32 37.51-11.35 60.65-22.84 59.8-29.68 92.53-78.44 97.25-144.92 5.7-80-14.72-132.45-65.61-165.31 5.35-1.5 11.06-3 17.19-4.53 30.53-7.54 81.22-27.57 135.35-61.62m2.56-19.49c-57.53 37.91-111.8 59.21-141.51 66.55-18.26 4.52-35.78 9.6-51.9 16.19 56.85 23.26 96.22 65.25 89 167.14-5.29 74.46-46.92 111.69-89 132.56-31.8 15.79-56.52 20.52-81.6 29.33-41.12 14.44-72.59 37.33-97.27 65.94-81.17 94.06-76.31 244.51 2.21 335.87 40.13 46.7 109.5 78 186.45 78.38-27.25-7-199.27-205.69-9.79-328.88 26.59-17.31 59.48-31.12 101.92-46.69 27.19-10 53.52-22 77-38.68a273.3 273.3 0 0 0 63.48-63.14c94.72-132 51-308.35-48.94-414.57Z",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: 1000,
    cy: 559,
    r: 99,
    className: "logo-officiel_svg__cls-3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1000.75 1502.5c1.19 9.43 2.08 18.85 3 28.28l1.24 14.13 1 14.14c.3 4.71 1 9.42 1.42 14.14a71 71 0 0 1 .08 14.13 115 115 0 0 1-2.2 14.14 71.5 71.5 0 0 1-4.55 14.14h-1.5a71.5 71.5 0 0 1-4.55-14.14 115 115 0 0 1-2.2-14.14 71 71 0 0 1 .08-14.13c.47-4.72 1.12-9.43 1.42-14.14l1-14.14 1.24-14.13c.92-9.43 1.81-18.85 3-28.28Z",
    className: "logo-officiel_svg__cls-2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M999.25 1786.82c-1.19-17-2.08-34-3-51.08L995 1710.2l-1-25.54c-.32-8.51-.92-17-1.42-25.54a232 232 0 0 1-.08-25.54q.66-12.76 2.2-25.54a211 211 0 0 1 4.55-25.54h1.5a211 211 0 0 1 4.55 25.54q1.56 12.76 2.2 25.54a232 232 0 0 1-.08 25.54c-.5 8.51-1.1 17-1.42 25.54l-1 25.54-1.24 25.54c-.92 17-1.81 34-3 51.08Z",
    className: "logo-officiel_svg__cls-2"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: 1000.5,
    cy: 1611.5,
    r: 21.5,
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1000.5 1597.5a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-15a29 29 0 1 0 29 29 29 29 0 0 0-29-29",
    className: "logo-officiel_svg__cls-2"
  }))), _g2 || (_g2 = /*#__PURE__*/React.createElement("g", {
    id: "logo-officiel_svg__Calque_18",
    "data-name": "Calque 18"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M805 877.31C748.48 839 675.49 772.48 637.65 668.49 598.23 560.15 604.84 434 657.29 293.41c63.56 63.64 91.79 115.64 115.2 163.54 24.15 49.41 28.79 89.52 32.89 124.92 7.81 67.42 14 120.67 139.62 191.54l1.72 1h.18c10.23 5.19 19.85 9.45 27.62 12.67-6.06 1.47-11.84 2.75-16.54 3.64C903 801 850.19 830.92 805 877.31",
    className: "logo-officiel_svg__cls-4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M660.26 307.14c57 59 83.4 107.92 105.49 153.11 23.58 48.25 28.15 87.69 32.18 122.48 7.74 66.78 14.42 124.46 143.39 197.21l3.43 1.94h.36c1.83.91 3.64 1.8 5.41 2.65-52.52 11.23-102.84 39.77-146.41 83.05-54.83-38.15-123.39-102.65-159.42-201.66-37.75-103.76-32.5-224.36 15.57-358.78M654.37 280C528.28 605.37 666.49 795.09 806.1 887c42.89-45.59 96.15-78.27 153.27-89 10.18-1.92 26.65-5.94 40.15-10-5.35-1.6-10.24-3.22-14.06-4.71a392 392 0 0 1-36.77-16.47C759.29 660 849 596.42 779.22 453.66 756 406.08 726.17 349.71 654.37 280",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M967.18 1770.49c-55.55-5-99-28.6-138.63-74.76-37.27-43.37-58.29-101-59.18-162.14-.9-62.11 19.32-120.33 57-163.94 25.58-29.66 56.35-50.52 94.08-63.77 7.56-2.65 15-4.92 23-7.31 18.15-5.49 36.91-11.17 59.48-22.38 57.26-28.42 88.59-75.1 93.11-138.74 6-84.06-17.82-136.33-76.84-166.89 9.91-3.29 21.09-6.46 34.11-9.69 30.94-7.65 83.13-28.44 138.49-64.09a371.7 371.7 0 0 1 57.63 84.62 359.6 359.6 0 0 1 33.57 104.41c12.26 78.18-4.07 151.29-47.22 211.42a264.8 264.8 0 0 1-61.73 61.41c-20 14.29-43.94 26.29-75.18 37.75-42 15.4-75.65 29.37-103.43 47.44-60.21 39.15-90.91 89.35-91.23 149.2-.3 56.13 20.27 105.53 32.56 130 8.4 16.72 19.61 34.85 30.41 47.46",
    className: "logo-officiel_svg__cls-4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1190.37 906.53a364.8 364.8 0 0 1 52.26 78.21 352 352 0 0 1 32.95 102.26c5.72 36.47 5 72.15-2 106a261.9 261.9 0 0 1-43.88 99.85 257.5 257.5 0 0 1-60 59.67c-19.48 13.9-42.81 25.59-73.4 36.82-42.48 15.58-76.58 29.74-104.94 48.19-62.46 40.61-94.3 92.91-94.64 155.45-.31 57.69 20.77 108.33 33.35 133.39a293 293 0 0 0 20.23 34.32 180 180 0 0 1-51.35-16.9c-23-11.7-44.13-29-64.7-53a232.1 232.1 0 0 1-42.14-73.11 259.2 259.2 0 0 1-15.22-84.26c-.88-60.27 18.7-116.71 55.14-158.93 24.7-28.64 54.43-48.79 90.88-61.59 7.41-2.6 14.81-4.84 22.65-7.21 17.58-5.32 37.51-11.35 60.65-22.84 59.8-29.68 92.53-78.44 97.25-144.92 5.7-80-14.72-132.45-65.61-165.31 5.35-1.5 11.06-3 17.19-4.53 30.53-7.54 81.22-27.57 135.35-61.62m2.56-19.49c-57.53 37.91-111.8 59.21-141.51 66.55-18.26 4.52-35.78 9.6-51.9 16.19 56.85 23.26 96.22 65.25 89 167.14-5.29 74.46-46.92 111.69-89 132.56-31.8 15.79-56.52 20.52-81.6 29.33-41.12 14.44-72.59 37.33-97.27 65.94-81.17 94.06-76.31 244.51 2.21 335.87 40.13 46.7 89.19 78 166.14 78.38-17.88-4.58-77.8-91.73-77.3-185.93.27-49.33 22.69-100.6 87.82-143 26.59-17.31 59.48-31.12 101.92-46.69 27.19-10 53.52-22 77-38.68a273.3 273.3 0 0 0 63.48-63.14c94.72-132 51-308.35-48.94-414.57Z",
    className: "logo-officiel_svg__cls-1"
  }), /*#__PURE__*/React.createElement("circle", {
    cx: 1000,
    cy: 559,
    r: 99,
    className: "logo-officiel_svg__cls-4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1000 1787.24c.5-1.06-30.4-36.12-56-71.24-39.11-53.64-47.72-100-53.17-154-47.25.93-88.65 8.26-88.83 32.18-1.07 144.09 196.52 196.16 198 193.06",
    className: "logo-officiel_svg__cls-4"
  }))), _g3 || (_g3 = /*#__PURE__*/React.createElement("g", {
    id: "logo-officiel_svg__Calque_10",
    "data-name": "Calque 10"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M1000 1787.24c.5-1.06-30.4-36.12-56-71.24-39.11-53.64-47.72-100-53.17-154-47.25.93-88.65 8.26-88.83 32.18-1.07 144.09 196.52 196.16 198 193.06",
    className: "logo-officiel_svg__cls-4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1000 1787.24c-.51-1.06 30.39-36.12 56-71.24 39.11-53.64 47.72-100 53.17-154 47.26.93 88.65 8.26 88.83 32.18 1.07 144.09-196.52 196.16-198 193.06",
    className: "logo-officiel_svg__cls-2"
  }))), _g4 || (_g4 = /*#__PURE__*/React.createElement("g", {
    id: "logo-officiel_svg__Calque_17",
    "data-name": "Calque 17"
  }, /*#__PURE__*/React.createElement("path", {
    d: "m863 1512 137 275-159-185z",
    className: "logo-officiel_svg__cls-4"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M1136.77 1512 1000 1787l158.77-185z",
    className: "logo-officiel_svg__cls-2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "m326.65 844.65 89.62 321.92h-93.86l-19.1-69.81h-96.93l-20.52 69.81H149.3l95.28-321.92Zm-111.08 219.8h79l-38-142.68ZM650 844.65V877H534.67v97.4h96.93v32.31h-96.93v127.59h134.9v32.31h-228.3V844.65ZM932.29 844.65l-84.43 137.73 102.59 184.19H846.68l-61.79-113.2-68.63 113.2h-42l90.8-147.16-97.15-174.76h103.54L829 949.6l62.26-105ZM1274.49 844.65v321.92h-90.09v-218l-62.73 218h-52.12l-64.38-214.28v214.28H973.8V844.65h94.81l55.18 194.35 55-194.33ZM1538.64 844.65V877h-115.33v97.4h96.93v32.31h-96.93v127.59h134.9v32.31h-228.29V844.65ZM1587.45 1166.57V844.65h133.49c94.81 0 146.21 53.77 146.21 161.31 0 107.07-53.14 160.61-151.4 160.61Zm93.4-26.65h24.52q33.74 0 46.7-29.13t13-105.3q0-76.17-12.85-105.18t-46.82-29h-24.52Z",
    className: "logo-officiel_svg__cls-3"
  }))));
};
export default SvgLogoOfficiel;

React throws: 

ncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:9439:9)
    at reconcileChildFibersImpl (react-dom.development.js:10548:7)
    at reconcileChildFibers (react-dom.development.js:10573:27)
    at reconcileChildren (react-dom.development.js:15802:28)
    at mountIndeterminateComponent (react-dom.development.js:16938:5)
    at beginWork$1 (react-dom.development.js:18458:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20565:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20614:16)
    at invokeGuardedCallback (react-dom.development.js:20689:29)
    at beginWork (react-dom.development.js:26949:7)
    at performUnitOfWork (react-dom.development.js:25748:12)
    at workLoopSync (react-dom.development.js:25464:5)
    at renderRootSync (react-dom.development.js:25419:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:24504:74)
    at workLoop (scheduler.development.js:256:34)
    at flushWork (scheduler.development.js:225:14)

I followed the migration guide and I've seen no mention of this. I think it's an issues since a lot of project (in my experience) use this.

Thanks Kind

eps1lon commented 4 months ago

Can you include a cloneable repository? You likely have multiple versions of the react package installed.

titouancreach commented 3 months ago

Yes sure and sorry for the delay:

I've created a new app with next-create-app, then added svgr.

To run:

eps1lon commented 3 months ago

You're using next@14.2.3 which does not support React 19. You need at least next@14.3.0-canary.45

Once I install next@14.3.0-canary.45 and the required React version (exact 19.0.0-beta-4508873393-20240430), it works.

titouancreach commented 3 months ago

@eps1lon OK thanks very much. Where did you find this info ?

and sorry for the noise !

eps1lon commented 3 months ago

I implemented support for React 19 in Next.js. We don't have a list of compatible libraries/frameworks yet.

titouancreach commented 3 months ago

Ok I understand, thanks again