Create-react-app: Importing components from another package

Created on 4 Jan 2018 · 8Comments · Source: facebook/create-react-app

Hello 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?

bug

Source

iamandrewluca

All 8 comments

It seems to be related to #3547

iamandrewluca on 4 Jan 2018

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 as src/common
Eject all 3 projects and change webpack configs:

module.exports = {
  // ...
  resolve: {
    symlinks: false,
    // ...
  }
  // ...
}

I got the error because babel ignores node_modules, webpack was right, no loader for jsx...
I added symlinks in src because create-react-app does not allow sources outside this folder

ps: npm link is so broken?

iamandrewluca on 5 Jan 2018

👍1

Or I still can keep them separate in different repos.
And make symlinks from node_modules/style-patterns.
Using npm/yarn link for development is working.

iamandrewluca on 5 Jan 2018

Why resolve.symlinks is not set to false in CRA configs?

iamandrewluca on 5 Jan 2018

We just don't have a good story around symlinks right now. I don't think what you're describing was/is currently supported.