Importing components from another package
See original GitHub issueHello folks!
I’m trying to make kind of living style guide and common components. That will be used in more projects.
I am using create-react-app and storybook. Development works well.
Then I npm install git+ssh://git@...
repo into my actual project.
Problem appears when I try to import a component from that style guide. I get
/home/andrewluca/Projects/style-patterns/src/components/Footer.js
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const Footer = () => (
| <footer className="footer">
| <div className="container">
| <div>
If i’m importing a simple function from my package, that does not use react
, it works.
I added react
and react-dom
as peer
and dev
dependencies so I can do development and use version of react
from my project.
My components are not compiled to any cjs
es
umd
⇒ nodejs -v
v8.9.4
⇒ npm -v
5.6.0
style-patterns/package.json
deps
"dependencies": {
"prop-types": "^15.6.0"
},
"peerDependencies": {
"bootstrap": "4.0.0-beta.3",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"@storybook/react": "^3.3.3",
"babel-core": "^6.26.0",
"bootstrap": "4.0.0-beta.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"reactstrap": "^5.0.0-alpha.4"
}
my-project/package.json
deps
"dependencies": {
"style-patterns": "git+ssh://git@...",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
Does anyone meet this problem?
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (7 by maintainers)
Top Results From Across the Web
Import Components from another file in React | bobbyhadz
Import the component in file B as import {Button} from './another-file' . Use the imported component in file B . Here is an...
Read more >Importing a Component | Create React App
Importing a Component. This project setup supports ES6 modules thanks to webpack. While you can still use require() and module.exports ...
Read more >Importing Components in React From Other Files - Upmostly
In this article, we will cover how to split React components into different files, and enable them to reference each other. By the...
Read more >How to import component from another project - Stack Overflow
First you need to ensure that project A is configured as a module so you can use it. See Create Node.Js Modules.
Read more >Importing and Exporting Components - React Docs
Import it in the file where you'll use the component (using the corresponding technique for importing default or named exports). Here both Profile...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ll close as a duplicate of https://github.com/facebookincubator/create-react-app/issues/3547.
After 7 hours of reading a lot of issues, and docs. I come to this. Put all project in same repo,
style-patterns
my-project1
my-project2
my-project3
Make 3 symlinks of
style-patterns
into all project assrc/common
Eject all 3 projects and change webpack configs:
I got the error because babel ignores
node_modules
, webpack was right, no loader for jsx… I added symlinks insrc
becausecreate-react-app
does not allow sources outside this folderps:
npm link
is so broken?