yarn link'ed repo not compiling correctly with flow types
- Dominant language
- TypeScript
- Stars
- 44k
- Forks
- 6k
- Avg merge
- 5d 15h
- Merged PRs (30d)
- 23
Description
## Bug Report
**Current Behavior**
I've also opened a SO post [here](https://stackoverflow.com/questions/54684729/error-using-babel-loader-with-npm-package-json-module-field?noredirect=1#comment96159616_54684729)
Babel erroring on flow `type Props` syntax when using a `yarn link`'ed package. Repo A is using Flow with React and has `@babel/preset-flow` working correctly. Repo B is using the same. When attempting to include a component in repo B from repo A, I get the error:
```
ERROR in ./node_modules/@//src/components/Header/index.jsx
12:5 Module parse failed: Unexpected token (12:5) You may need an appropriate loader to handle this file type.
| import styles from'./styles'
> type Props = {
| classes: Object,
| handleDrawerToggle: () => void,
@ ./node_modules/@//src/index.js 1:0-55 1:0-55
@ ./src/modules/dashboard/components/presenter.jsx
@ ./src/modules/dashboard/components/container.jsx
@ ./src/modules/dashboard/components/index.js
@ ./src/modules/router/index.jsx
@ ./src/modules/root/App/index.jsx
@ ./src/main.jsx
@ multi (webpack)-dev-server/client?http://localhost:9000 @babel/polyfill ./src/main.jsx
```
Each repo compiles correctly independently. I'm attempting to pull components from Repo B into Repo A using npm's `module` attribute which allows ES6 modules to be imported without compiling first. If I build a bundled js file from Repo B, and include without using `yarn link` ( ie. non-local development ) the code compiles correctly.
**Expected behavior/code**
The component being pulled in should compile correctly when serving with webpack in development mode.
**Babel Configuration (.babelrc, package.json, cli command)**
```js
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-flow',
'@babel/preset-react',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-transform-flow-strip-types',
],
}
```
**Environment**
- Babel version(s): ^7.2.2
- Node/npm version: Node v10.15.0 / npm v6.4.1
- OS: MacOS 10.14.2
- Monorepo: no
- How you are using Babel: loader / webpack
**Possible Solution**
**Additional context/Screenshots**
Add any other context about the problem here. If applicable, add screenshots to help explain.
Contributor guide
Research direction
No source file or test in Babel is identified. Start by reproducing the linked-package build with the shown .babelrc, webpack loader, and src/components/Header/index.jsx, comparing it with the bundled package path through src/index.js. Done means the yarn-linked component compiles in webpack development mode without the Flow syntax error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, react, webpack
- Domain
- build-system, frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100