Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Cannot npm-link other project #19898

Closed
gopoqosntjbfhjjezh opened this issue Sep 24, 2020 · 5 comments
Closed

Bug: Cannot npm-link other project #19898

gopoqosntjbfhjjezh opened this issue Sep 24, 2020 · 5 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@gopoqosntjbfhjjezh
Copy link

I'm not sure its a bug, but I am running out of ideas.

I'm trying to import a self-written module.

React version: 16.13.1

Steps To Reproduce

I have the following setup

myRoot
  |-- t-lib
  |        |-- src
  |        |-- config-overwrides.js   (I'm using react-app-rewired, but I think it's not relevant)
  |        |-- package.json
  |        |-- ... other stuff
  |-- t-consumer
  |        |-- src
  |        |-- package.json
  |        |-- ... other stuff

Inside t-lib/package.json I have name: 't-lib'.

So, while in the folder of t-consumer I did:

npm link ../t-lib

And in the t-consumer/src/App.js, I wrote import myLib from 't-lib'

What I get is

SyntaxError: C:\Users\...\t-lib\src\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:3):

   5 | function MountApp(element) {
   6 |  ReactDOM.render(
>  7 |          <React.StrictMode>
     |          ^
   8 |                  <App />
   9 |          </React.StrictMode>,
  10 |          element

Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! t-consumer@0.1.0 build: `react-app-rewired build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the t-consumer@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: ...

The current behavior

I get the error metioned above.

I would like to note, that the error occures in the t-lib/src/index.js, not in the t-consumer project. So appearently the setup is correct, just babel gets confused somehow about the jsx.

The expected behavior

I would like it to actually build the project, or possibly a hint, on which settings I have done wrong.

Code

In case it's needed, here is the code: (both projects are basicly the same, and just trying to get it to work)

public/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="theme-color" content="#000000" />
		<meta
			name="description"
			content="Web site created using create-react-app"
		/>
		<title>React App</title>
	</head>
	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
		<script>
			setTimeout(() => {
				// I know this is bad practice, it's just a proof of concept to get a library to work.
				const element = document.getElementById('root');
				testConsumer.MountApp(element);
			}, 1000);
		</script>
	</body>
</html>

src/App.js

import React from 'react';
import myLib from 't-lib';  // only in the consumer

function App() {
	console.log(myLib);
	return <div>consumer</div>;
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function MountApp(element) {
	ReactDOM.render(
		<React.StrictMode>
			<App />
		</React.StrictMode>,
		element
	);
}

export { MountApp };

config-overrides.js

const path = require('path');

module.exports = {
	webpack: function (config, env) {
		config.output.filename = 'static/js/[name].js';
		config.output.chunkFilename = 'static/js/[name].chunk.js';
		config.output.library = 'testConsumer';
		return config;
	},
	paths: function (paths, env) {
		// ...add your paths config
		paths.appBuild = path.resolve(
			path.join('..', '..', 'MyWebpage', 't-consumer')
		);

		return paths;
	}
};

package.json

{
	"name": "t-consumer",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@testing-library/jest-dom": "^4.2.4",
		"@testing-library/react": "^9.5.0",
		"@testing-library/user-event": "^7.2.1",
		"react": "^16.13.1",
		"react-app-rewired": "^2.1.6",
		"react-dom": "^16.13.1",
		"react-scripts": "3.4.3"
	},
	"scripts": {
		"build": "react-app-rewired build",
		"eject": "react-scripts eject"
	},
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": {
		"production": [
			">0.2%",
			"not dead",
			"not op_mini all"
		],
		"development": [
			"last 1 chrome version",
			"last 1 firefox version",
			"last 1 safari version"
		]
	},
	"browser": "./src/index",
	"homepage": "t-consumer"
}
@gopoqosntjbfhjjezh gopoqosntjbfhjjezh added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Sep 24, 2020
@gopoqosntjbfhjjezh
Copy link
Author

P.S., I have read 13991and 19844, and of course Invalid Hook Call Warning.

@bvaughn
Copy link
Contributor

bvaughn commented Sep 24, 2020

I'm not sure this bug is filed in the right place.

@gopoqosntjbfhjjezh
Copy link
Author

@bvaughn where would be the right place?

@bvaughn
Copy link
Contributor

bvaughn commented Oct 5, 2020

Sounds like you're having an issue trying to get NPM link working with a Babel transform. Might try asking on Stack Overflow or posting in the Babel repo?

@threepointone
Copy link
Contributor

This is related to create-react-app working across workspaces in a monorepo facebook/create-react-app#1333 That thread has some suggestions on how to get babel transpilation working, would recommend you follow those.

This issue shouldn't be in this repo regardless, I think.

@bvaughn bvaughn closed this as completed Oct 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@threepointone @bvaughn @gopoqosntjbfhjjezh