Я пытаюсь создать пакет библиотеки компонентов со стилями, чтобы можно было повторно использовать свои стили для разных проектов.
Чтобы проверить, как это сделать, у меня есть два проекта.
- ExampleStyledComponent — Где я пытаюсь собрать свои компоненты.
- Проект Гэтсби — простой «новый Гэтсби». проект
Мне удалось правильно отобразить мой тестовый компонент в браузере с помощью «npm link», но когда я применяю стили, я продолжаю получать ошибку «Недопустимый вызов ловушки» в браузере.
упаковка —
— src — TestComponent.js — index.js — package.json
TestComponent.js —
import React from ‘react’; import styled from ‘styled-components’; const Container = styled.div` width: 100%; background-color: red; `; const TestComp = () => { return ( <Container> <h1>Hello World</h1> </Container> ); }; export default TestComp;
index.js —
import TestComponent from ‘./src/TestComponent’; export default TestComponent;
package.json —
{ «name»: «ExampleStyledComponent», «version»: «1.0.0», «description»: «», «main»: «index.js», «scripts»: { «test»: «echo «Error: no test specified» && exit 1″ }, «keywords»: [], «author»: «», «license»: «ISC», «peerDependencies»: { «react»: «16.x», «styled-components»: «5.x» }, «dependencies»: {}, «devDependencies»: { «babel-plugin-styled-components»: «^1.11.1», «react»: «^16.13.1», «styled-components»: «^5.1.1» } }
Без стилизованных компонентов эта настройка работает нормально. Итак, как мне заставить стилизованные компоненты работать в моем npm-package. Я также попытался установить зависимости в свой проект Gatsby, но мне не повезло.
В моих зависимостях проекта Gatsby —
«dependencies»: { «babel-plugin-styled-components»: «^1.11.1», «gatsby»: «^2.24.42», «gatsby-image»: «^2.4.15», «gatsby-plugin-manifest»: «^2.4.22», «gatsby-plugin-offline»: «^3.2.23», «gatsby-plugin-react-helmet»: «^3.3.10», «gatsby-plugin-sharp»: «^2.6.26», «gatsby-plugin-styled-components»: «^3.3.10», «gatsby-source-filesystem»: «^2.3.24», «gatsby-transformer-sharp»: «^2.5.12», «prop-types»: «^15.7.2», «react»: «^16.12.0», «react-dom»: «^16.12.0», «react-helmet»: «^6.1.0», «styled-components»: «^5.1.1» },
и gatsby-config.js
module.exports = { siteMetadata : { title : `Gatsby Default Starter`, description : `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`, author : `@gatsbyjs` }, plugins : [ `gatsby-plugin-styled-components`, `gatsby-plugin-react-helmet`, { resolve : `gatsby-source-filesystem`, options : { name : `images`, path : `${__dirname}/src/images` } }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, { resolve : `gatsby-plugin-manifest`, options : { name : `gatsby-starter-default`, short_name : `starter`, start_url : `/`, background_color : `#663399`, theme_color : `#663399`, display : `minimal-ui`, icon : `src/images/gatsby-icon.png` ] };
Как я импортирую его на страницу Gatsby index.js —
import React from ‘react’; import Test from ‘examplestyledcomponent’; const IndexPage = () => ( <div> <Test /> </div> ); export default IndexPage;
Ошибка, которую я получаю в браузере, выглядит так:
Я действительно потерялся с этим, поэтому любая помощь будет оценена, спасибо!
Источник: