babel / babel/babel

yarn link'ed repo not compiling correctly with flow types

Open
#9,576 2 comments 0 reactions 0 assignees View on GitHub
i: needs triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.