Importing react component from parent directory breaks react hooks

[mauron85]

🐛 bug report

First I would to say that I ❤️ parcel.

My problem is related to React 16.6.x hooks, but strangely it's only an issue when importing module from parent (eg. ../parent/module). There are few more issues related to react-hot-loader and React 16.6.x hooks, but I promise this one is different :).

Let's imagine following project structure of typescript project

playground/
  module2.ts
src
  module1.ts

From playground/module2.ts I'm importing module1.ts (react component) that is located in parent dir (../src). So import looks like:

import FunctionalComponent from '../src/module1';

However compiled bundle is not usable. It triggers react error: Error: Hooks can only be called inside the body of a function component.

Interesingly making symlink from playground directory to parent src -> ln -s ../src src
and importing same module as:

import FunctionalComponent from './src/module1';

works just fine. Bundle doesn't trigger any error.

🎛 Configuration (.babelrc, package.json, cli command)

Playground doesn't have any .babelrc

Parent's .babel.rc

{
	"presets": [
		[
			"@babel/preset-env",
			{
				"targets": "> 3%, not dead",
				"modules": false
			}
		],
		"@babel/react",
		"@babel/typescript"
	],
	"plugins": []
}

🤔 Expected Behavior

I believe, there should be no difference between import from '../src and import from './src as both contain uncompiled and unprocessed source typescript files.

😯 Current Behavior

Importing react module relative to parent triggers error in the runtime:

`Error: Hooks can only be called inside the body of a function component.

💁 Possible Solution

Not sure. But as same problem is also in production variant, so it's not probably react-hot-loader issue (like this one gaearon/react-hot-loader#1088 (comment))

🔦 Context

Making symlink to parent dir as workaround is really strange.

Not sure.

💻 Code Sample

Can provide later.

🌍 Your Environment

Software	Version(s)
Parcel	1.11.0
Node	10.15.1
Yarn	1.13.0
Operating System	Ubuntu 18.04

[mauron85]

I believe this must be somehow related in .bashrc inheritance.

Similar issues:
https://stackoverflow.com/questions/32540598/disable-babelrc-inheritance
emberjs/ember-cli-babel#92

And possible workaround:

https://babeljs.io/docs/en/options#babelrcroots

[tj]

I got this as well when npm linking a package in (with source: true) which used react hooks, works fine after reverting the hook refactoring

[mauron85]

Update. It doesn't affect pure vanilla js projects.

[mauron85]

I'm not able to create simple typescript project as an example of this issue (but still have an issue in my original project). So closing until I manage to either publish my project or create similar affected by this issue.

[tj]

FWIW I'm not using TS, but these build systems are getting so complicated I have no clue what's going on haha, might not be Parcel related at all

[mauron85]

i feel you brother :) thank you for expressjs btw ;)

[imjared]

@mauron85 could you re-open this issue? I've created a repo to reproduce this issue:

https://github.com/imjared/parcel-js-react-hooks

I'm on Mojave and using Node v10.13.0

[mauron85]

@imjared create new one.