Как перенести стилизованные компоненты в пакет NPM?

Question

У меня есть стилизованный компонент, который я хочу встроить в пакет NPM и могу импортировать в другие проекты.

Мой стилизованный компонент выглядит примерно так:

// src/StyledDiv.styles.js
import styled from "styled-components"

const StyledDiv = styled("div")`
  border: solid red 1px;
  border-radius: 5px;
  padding: 20px;
  margin: 15px;
`

export default StyledDiv

Затем у меня есть скрипт сборки, который должен перенести мой код в папку dist:

"build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",

// .babelrc
{
  "presets": ["env", "react"]
}

Затем я запускаю npm link в своем проекте компонента с компонентами, а затем npm link <styled component> в моем другом проекте, чтобы попытаться импортировать его, но, похоже, получаю ошибку:

Element 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.

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

Мой полный package.json выглядит следующим образом:

{
  "name": "my-styled-component",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "jest ./src/**/*.test.js --notify --detectOpenHandles",
    "test:watch": "jest ./src/**/*.test.js --notify --watch",
    "start": "webpack-dev-server --mode development",
    "build": "babel src -d dist --copy-files --ignore './src/**/*.test.js'",
    "lint:css": "stylelint './src/**/*.styles.js'"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.8.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.8.0",
    "jest-styled-components": "^6.3.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.6.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {
    "styled-components": "^4.2.0",
    "styled-tools": "^1.7.1"
  }
}

Answer 1

Вам нужно использовать это в .babelrc:

    presets: [
      '@babel/env',
      '@babel/react',
    ],

Answer 2

Похоже, вам нужно импортировать реакцию в файле компонента.

import React from 'react';