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

Привет всем! 

У меня есть файл block-options.js, содержащий следующий код: 

<pre><code class="javascript">export default function BlockOptions({name, props}) {
  return (
    &lt;&gt;...&lt;/&gt;
  )
}</code></pre>

Этот файл находится в моем npm-пакете, и я пытаюсь импортировать его следующим образом: 

<pre><code class="javascript">import BlockOptions from "package-name/build/block-options";

export const edit = (props) =&gt; {
  const {
  } = props;

  return (
    &lt;&gt;
      &lt;BlockOptions name={name} props={props}/&gt;
    &lt;/&gt;
  )
}</code></pre>

Однако я получаю ошибку: 

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Я посмотрел скомпилированный файл block-options.js, который выглядит следующим образом: 

<pre><code class="javascript">(() =&gt; {
    "use strict";
    var e = {
        790: e =&gt; {
            e.exports = window.ReactJSXRuntime
        }
    }, r = {};

    function t(o) {
        var n = r[o];
        if (void 0 !== n) return n.exports;
        var a = r[o] = {exports: {}};
        return e[o](a, a.exports, t), a.exports
    }

    t.n = e =&gt; {
        var r = e &amp;&amp; e.__esModule ? () =&gt; e.default : () =&gt; e;
        return t.d(r, {a: r}), r
    }, t.d = (e, r) =&gt; {
        for (var o in r) t.o(r, o) &amp;&amp; !t.o(e, o) &amp;&amp; Object.defineProperty(e, o, {enumerable: !0, get: r[o]})
    }, t.o = (e, r) =&gt; Object.prototype.hasOwnProperty.call(e, r), t(790)
})();</code></pre> 

Не могли бы вы помочь мне разобраться в причине этой ошибки?
  • 15 декабря 2024 г. 8:33
Ответы на вопрос 1 
Ошибка, с которой вы столкнулись, указывает на проблему с импортом вашего компонента `BlockOptions`. Вот несколько шагов, которые помогут вам решить эту проблему:

1. **Проверьте экспорт**: Убедитесь, что ваш компонент правильно экспортируется. Вы используете `export default`, это правильно, но проверьте, что нет других экспортов в файле, которые могут вызвать конфликт.

   Например, у вас должно быть что-то вроде этого в `block-options.js`:

   ```javascript
   export default function BlockOptions({ name, props }) {
     return (
       <>
         {/* Ваш контент здесь */}
       </>
     );
   }
   ```

2. **Проверьте правильность пути**: Убедитесь, что путь к файлу, который вы импортируете, правильный. Путь `"package-name/build/block-options"` должен указывать на тот файл, где действительно экспортируется ваш компонент. Возможно, вам нужно проверить структуру вашего пакета и убедиться, что файл `block-options.js` находится в нужной директории.

3. **Проверьте сборку**: Убедитесь, что ваша сборка проходит успешно и файл `block-options.js` компилируется правильно. Если вы используете Babel, Webpack или другую сборочную систему, убедитесь, что в конфигурациях нет ошибок.

4. **Проверьте импорт**: Когда вы импортируете компонент, убедитесь, что вы правильно используете его. Пример правильного импорта:

   ```javascript
   import BlockOptions from "package-name/build/block-options";

   export const edit = (props) => {
     const { name } = props;

     return (
       <>
         <BlockOptions name={name} props={props} />
       </>
     );
   };
   ```

   Убедитесь, что переменная `name` и другие пропсы действительно передаются в вашем коде.

5. **Проверка экспорта файла**: Иногда разработчики могут забыть обновить базовую версию пакета после изменений. Проверьте, что вы используете последнюю версию вашего npm-пакета и что все изменения были опубликованы.

6. **Проблема с окружением**: Возможно, проблема может заключаться в вашей окружении. Попробуйте очистить кэш npm и переустановить зависимости:

   ```bash
   npm cache clean --force
   npm install
   ```

Если все вышеперечисленное не помогло, попробуйте создать минимальный пример, который воспроизводит ошибку. Это может помочь выделить конкретные причины проблемы.
Похожие вопросы
    Показать ещё