response-script: Транспортировка сторонних файлов JSX

Question

Я занимаюсь разработкой приложения с использованием create-реагировать на приложение и использую сторонний модуль, который не компилируется, я включаю файл JSX из этого в свой проект.

получаю следующую ошибку при запуске или сборке

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

Мое приложение реакции не извлечено и не хочет извлекать.

Не хочу извлекать из сценария реагирования

******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.

Пример кода Ссылка.jsx в Libarary

import React from 'react';
import { string } from 'prop-types';
import './Link.scss';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

class Link extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

    this.state = {
      className: STATUS.NORMAL,
    };
  }

  onMouseEnter() {
    this.setState({ className: STATUS.HOVERED });
  }

  onMouseLeave() {
    this.setState({ className: STATUS.NORMAL });
  }

  render() {
    const { className } = this.state;
    const { page, children } = this.props;

    return (
      <a
        className={className}
        href={page}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
      >
        {children}
      </a>
    );
  }
}

Link.propTypes = {
  page: string,
  children: string,
};

Link.defaultProps = {
  page: '#',
  children: '',
};

export default Link;

Приведенный выше код публикуется во внутреннем репозитории npm и используется в приложении

App.jsx в приложении

import { Link} from '@myScope/myreactlib/Link'; // loaded from node_modules

App.jsx выдает ошибку

Answer 1

При использовании create-react-app без извлечения у вас будут некоторые ограничения на способ импорта модулей.

Если это пользовательский модуль, который вы создали, то он должен быть в вашем srcпапку, и вы импортируете его, используя путь относительно пути вашего текущего файла.Например: import MyComponent from './components/MyComponent

Если он поступает из стороннего пакета зависимостей (например, reactstrap или @blueprintjs/core), который вы уже добавили с помощью npm или yarn, то выимпортируйте его просто указав имя пакета.Например: import { Button } from 'reactstrap'

В вашем случае, похоже, у вас есть подпапка в папке node_modules, предназначенная для пакета, который вы не добавили , добавив npm или yarn.Хотя я сомневаюсь, что таким способом рекомендуется использовать сторонние пакеты, я предполагаю, что у вас есть на то веские основания для этого.

Не имея возможности просмотреть все настройки, я бы предложил вам попробоватьследующий обходной путь:

1. В папке src создайте символическую ссылку на папку с пакетом стороннего производителя.Например (находясь в папке src вашего проекта):

ln -s ../node_modules/@myScope/myreactlib myreactlib

Затем в файле App.jsx выполните:

import { Link } from './myreactlib/Link'

---

Дополнительная информация:

• StackOverflow: создание-реакция-app импортирует ограничение вне каталога src
• StackOverflow: импорт модуля из node_modules (create-реагировать-приложение)
• create-реагировать-приложениедокументация по импорту компонента