I have added jsconfig.json
But it doesn't seem to work
packages/components/jsconfig.json
run with command: yarn start:app-ant-design
@F1LT3R can you help me ?

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "modules/*": ["src/modules/*"],
      "graphql/*": ["src/graphql/*"]
    }
  }
}

Great repo.

Is it possible with the tools provided here to create a package with shared Typescript code that is not a React application, that can be imported into the React applications?

Examples of what this package might contain could be Types, Validation logic, etc.

-- This issue is theory and has not been tested --

From a first inspection of this monorepo setup it seems that components would not be tree shakable. Importing <CompOne /> also imports <CompTwo /> as there is nothing specifying webpack (any bundler) should do otherwise.

If we have two apps that both use components, and only need to use portions of these components, we have allot of dead code. In any real-world app/team not all components would be used.

Prime use-case for sideEffects.

Im making allot of assumptions:

• react-scripts does not have optimisations for transpiling/building packages.
• react-scripts does not transpile modules in node_modules

I'm trying to set up the rollup to publish components to NPM, but I'm not getting it.
I found issue #33 and tried to make similar settings, but without TypeScript. The package builds and generates the distribution file, but the error below occurs when starting the test package that references the component within the monorepo.

TypeError: Cannot assign to read only property 'exports' of object '# '

I believe he must be trying to compile what has already been compiled through rollup / babel.

My rollup.config:

import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import nodeBuiltins from 'rollup-plugin-node-builtins';
import url from 'rollup-plugin-url';
import svgr from '@svgr/rollup';

import pkg from './package.json';

export default {
  input: 'index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true,
    },
    // Enable to create ES-modules output
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true,
    },
  ],
  plugins: [
    external(), // Set peerDependencies as external
    postcss({
      modules: false,
    }),
    url(),
    svgr(),
    nodeBuiltins({ crypto: false }),
    resolve({
      extensions: ['.mjs', '.js', '.json', '.node'],
      preferBuiltins: true,
    }),
    babel({
      exclude: ['node_modules/**', 'dist/**'],
      presets: ['@babel/env', '@babel/preset-react'],
    }),
    commonjs({
      exclude: 'src/**',
    }),
  ],
};

First off, great job on this repository @F1LT3R ! 👏

I'm having some issues in regards to using classes in the shared components-typescript library.

If I add a class to the CompTwo.tsx component:

class Test {
  public prop: string;
  constructor(v: string) {
    this.prop = v;
  }
}

I get the following error when starting app-typescript:

Failed to compile.

./react-workspaces-playground/packages/components-typescript/src/CompTwo/CompTwo.tsx
  Line 5:10:  Parsing error: Unexpected token

  3 |
  4 | class Test {
> 5 |   public prop: string;
    |          ^
  6 |   constructor(v: string) {
  7 |     this.prop = v;
  8 |   }

Is there a quick fix to this issue, or some configurations that I am not aware of?

Related issues: #18, #28

Hello! I'm working on implementing React Workspaces Playground as a monorepo framework and i have a few questions:

1. How would you handle adding a babel.config.js and plugins/presets to the monorepo? would you have it at the root?
2. Since your repo uses react-scripts, is there a way to "eject" like in CRA in order to make changes to the webpack configs?

Im using the multi-comp React app as a base, no typescript or anything. im relatively new to monorepo architecture and trying to implement one myself from scratch led to alot of issues where babel would not run on packages. Im hoping your repo could help me scaffold our app out with a good monorepo implementation.

Thanks for any help you can give! Please let me know if you need more information from me.

Hi! Both on Windows and Mac, while running create-react-app --scripts-version @f1lt3r/react-scripts app-foo, I'm getting an error:

internal/modules/cjs/loader.js:582
    throw err;
    ^

Error: Cannot find module 'react-dev-utils/chalk'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/alexc/dev/app-foo/node_modules/@f1lt3r/react-scripts/scripts/init.js:19:15)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

Aborting installation.
  node  has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting app-foo/ from /Users/alexc/dev
Done.

Can you suggest how to fix it quickly please? 🙏

I have a typescript class called "HelloWorld.ts" added to "components-typescript" project under "components-typescript/src/library" folder
"HelloWorld.ts" file is attached

HelloWorld.txt

And I have getting below mentioned error

Please let me know if you need any more details.
@F1LT3R , @PaulRBerg , @jmyrland

Hello
I have a problem when I want to use enzyme shallow for testing the CompOne component located in the workspace @project/components.
I have an error about the need of using enzyme-adapter-react-15.

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
before using any of Enzyme's top level APIs, where `Adapter` is the adapter
corresponding to the library currently being tested. For example:

         import Adapter from 'enzyme-adapter-react-15';

To find out more about this, see https://airbnb.io/enzyme/docs/installation/index.html

However if I write in the CompOne.test.js file what is in the setupTests it works.

require('jest-prop-type-error');
const enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
enzyme.configure({ adapter: new Adapter() });

Hi,

I'm using "@react-workspaces/react-scripts": "3.0.0-alpha-04" and "react-app-rewired": "2.1.3" and I'm getting the following error when starting the app:

Error: Cannot find module 'react-scripts/package.json' at Function.Module._resolveFilename (module.js:548:15) at Function.resolve (internal/module.js:18:19)

Any idea how to fix this?

is it any opportunity to create installer to avoid git history and fixed repo name?

I tried the stuff in this repo but i found that yarn test is not working
` Test suite failed to run

Cannot find module '@project/comp-one' from 'App.js'

  2 | import logo from './logo.svg';
  3 | import './App.css';
> 4 | import CompOne from '@project/comp-one';
    | ^
  5 | 
  6 | class App extends Component {
  7 |     render() {

  at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:221:17)
  at Object.<anonymous> (src/App.js:4:1)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.451s`

Installation
git clone [email protected]:react-workspaces/cra-workspaces-playground

the url should be [email protected]:react-workspaces/react-workspaces-playground.git

I tried react-app-rewired with customize-cra to configure antd. yarn start:app-ts fails with error.
https://aleksandrhovhannisyan.github.io/blog/dev/how-to-set-up-react-typescript-ant-design-less-css-modules-and-eslint/

Module parse failed: Unexpected token (4:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import './CompOne.css';
| 
> const CompOne: React.FC = () => {
|   return (
|     <div className="Comp">

Any chance for an upgrade to the latest react-scripts 2.1.5?

When the Component or App gets complex, it is easier to use Sass than plain CSS.
Please add support for Sass

I get the below error regarding eslint-plugin-react when trying to add styled-components as a dependency in components-typescript using yarn workspace @project/components-typescript add styled-components on a freshly cloned version of the repo.

When I try adding 'eslint-plugin-react' is also errors out.

Arguments:
/Users/username/.nvm/versions/node/v12.18.2/bin/node /usr/local/lib/node_modules/yarn/lib/cli.js add eslint-plugin-react

PATH:
/Users/username/.nvm/versions/node/v12.18.2/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Users/username/.nvm/versions/node/v12.18.2/bin

Yarn version:
1.22.4

Node version:
12.18.2

Platform:
darwin x64

Trace:
Invariant Violation: expected workspace package to exist for "eslint-plugin-react"
at invariant (/usr/local/lib/node_modules/yarn/lib/cli.js:2314:15)
at _loop2 (/usr/local/lib/node_modules/yarn/lib/cli.js:94976:9)
at PackageHoister.init (/usr/local/lib/node_modules/yarn/lib/cli.js:95035:19)
at PackageLinker.getFlatHoistedTree (/usr/local/lib/node_modules/yarn/lib/cli.js:48743:20)
at PackageLinker. (/usr/local/lib/node_modules/yarn/lib/cli.js:48754:27)
at Generator.next ()
at step (/usr/local/lib/node_modules/yarn/lib/cli.js:310:30)
at /usr/local/lib/node_modules/yarn/lib/cli.js:328:14
at new Promise ()
at new F (/usr/local/lib/node_modules/yarn/lib/cli.js:5301:28)

npm manifest:
{
"name": "@project/components-typescript",
"version": "1.0.0",
"main": "src/index.tsx",
"main:src": "src/index.tsx",
"scripts": {
"test": "react-scripts test",
"lint": "eslint ./src//*.tsx --max-warnings=0 --format=codeframe"
},
"dependencies": {
"@react-workspaces/react-scripts": "3.3.0-alpha-08",
"@storybook/react": "^5.2.8",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^8.0.3",
"@types/jest": "^24.0.25",
"@types/node": "^13.1.6",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@typescript-eslint/eslint-plugin": "^2.15.0",
"@typescript-eslint/parser": "^2.15.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0",
"typescript": "~3.7.4"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src//.{ts,tsx}",
"!src/setupTests.{ts,tsx}",
"!src/serviceWorker.{ts,jsx}",
"!src/**/.(spec|test|stories).{ts,tsx}"
],
"coverageThreshold": {
"global": {
"statements": 98,
"branches": 98,
"functions": 98,
"lines": 98
}
}
},
"license": "MIT"
}

I would like to include stories in the /package/app/ folders.

Is that possible?

I added a stories.js file in packages/apps/app-single-comp/src folder.

I updated storybook/config.js to use
const comps = require.context('@project/app-single-comp', true, /.stories.js$/);

Receiving this error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

I also tried installing storybook into that apps folder as well.

Is it possible?

It would be really nice to put storybook files in both the 'components' and 'app' folders.

When instructing CRA apps to use https for dev server hot module reloading stops working.

To reproduce:

1. Clone this repo
2. Switch to repo folder
3. run yarn in folder to install dependencies
4. update ./packages/apps/app-multi-comps/package.json start script to "start": "HTTPS=true react-scripts start"
5. Once app is running in browser, change any file in that app

expected results:
App would update and show changes

actual results:
App does not update until manually refreshed

I also tried

• Adding HTTPS=true in a .env file
• Adding HTTPS=true as an os level environment variable

Does it support for React Native if not any plans for it?

Good morning my friends

I'm having trouble using create-react-native-app on lerna using workspaces

Below I do the step by step, but we see that this way the node_modules folder in the package is not stored

It is necessary to have the node_modules folder in the folder in packages, because you have an android folder with requests to that folder

Environment info:

$ lerna info

System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Binaries:
    lerna: v3.22.1
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
Utilities:
    Git: 2.25.1 - /usr/bin/git 

$ react-native info

info Fetching system and libraries information...
System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 1.07 GB / 15.56 GB
    Shell: 5.0.16 - /bin/bash
Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
    Watchman: 4.9.0 - /home/linuxbrew/.linuxbrew/bin/watchman
SDKs:
    Android SDK:
    API Levels: 28, 30
    Build Tools: 28.0.3, 30.0.0
    System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
    Android NDK: Not Found
IDEs:
    Android Studio: Not Found
Languages:
    Java: 11.0.7 - /usr/bin/javac
    Python: 2.7.18 - /usr/bin/python
npmPackages:
    @react-native-community/cli: Not Found
    react: ~16.11.0 => 16.11.0 
    react-native: ~0.62.2 => 0.62.2 
npmGlobalPackages:
    *react-native*: Not Found

$ python --version

Python 2.7.18rc1

$ python3 --version

Python 3.8.2

$ npm list -g --depth 0

/home/marcio/.nvm/versions/node/v12.18.1/lib
├── @prettier/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Steṕs to reproduce

#

cd ~/Downloads

rm -fr ~/Downloads/monorepo-3

mkdir -p ~/Downloads/monorepo-3

cd ~/Downloads/monorepo-3

pwd && ls

echo '{
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}' >lerna.json

cat lerna.json

echo '{
"name": "root",
"private": true,
"workspaces": [
"packages/*"
],
"devDependencies": {
"lerna": "^3.22.1"
}
}' >package.json

cat package.json

lerna init

#

cd packages

npx create-react-native-app default-create-react-native-app --yes

# OR

# react-native init defaultreactnative

# clean

cd ..

yarn check --integrity --verify-tree || true

lerna list --all --long || true

lerna clean --yes || true

pwd && ls

rm -fr node_modules

find . -name "node_modules" -type d

find \
. \
-name "node_modules" \
-o -name ".yarncache" \
-type d -prune | while read ITEM; do
(du -sh "$ITEM")
(rm -fr "$ITEM")
done

find \
. \
-name "*.touch" \
-o -name "*error.log" \
-o -name "*debug.log" \
-o -name "*lock.json" \
-o -name "*lock.yaml" \
-o -name "audit-resolve.json" \
-o -name ".yarnclean" \
-o -name "yarn.lock" \
-type f | while read ITEM; do
(du -sh "$ITEM")
(rm -fr "$ITEM")
done

#

lerna init

lerna info

lerna list --all --long

lerna bootstrap

#

ls && ls ./packages/*

du -sh ./packages/default-create-react-native-app/node_modules/react-native-unimodules/gradle.groovy

du -sh ./packages/default-create-react-native-app/node_modules/react-native/react.gradle

du -sh ./packages/default-create-react-native-app/node_modules/expo-updates/scripts/create-manifest-android.gradle

du -sh ./packages/default-create-react-native-app/node_modules/@react-native-community/cli-platform-android/native_modules.gradle

# 

First, thanks for a great lib!
We almost made it work until we had to include Firebase as a dependency.

cd packages/apps/app-one
yarn add [email protected]

As you can see here: https://www.npmjs.com/package/firebase#npm-bundler-browserify-webpack-etc you simply import a firebase package:

// In your code, you can access Firebase using:
var firebase = require('firebase');
var app = firebase.initializeApp({ ... });

// If you are using ES6 imports or TypeScript:
import * as firebase from 'firebase';
var app = firebase.initializeApp({ ... });

Unfortunately, when we do it we get the following error:

TypeError: util.inherits is not a function

Also, the console prints a couple of warnings:

We are not having this issue when we use a standard CRA.

There is extensive documentation about this repository in the README, but one thing that ain't mentioned is "what this repo is for?". What pain does it solve? When should I use it?

Could you elaborate on that?

After upgrading to 3.4.0-alpha-01 I started to have lint errors in serviceWorker.ts even tho the file is listed in the .eslintignore:

Failed to compile.

./packages/apps/my-ts-app/src/serviceWorker.ts
  Line 47:9:  'checkValidServiceWorker' was used before it was defined  @typescript-eslint/no-use-before-define
  Line 59:9:  'registerValidSW' was used before it was defined          @typescript-eslint/no-use-before-define

Search for the keywords to learn more about each error.

/packages/apps/.eslintignore:

**/node_modules/**
**/dist/**
**/storybook-static/**
**/coverage/**
**/build/**
**/.git/**
**/public/**
serviceWorker.ts

The only way for serviceWorker.ts to be ignored is to add it to the .eslintignore at the root:
.eslintignore:

**/node_modules/**
**/dist/**
**/storybook-static/**
**/coverage/**
**/build/**
**/.git/**
**/public/**
!.eslintrc.js
serviceWorker.ts

Steps to reproduce:

• checkout this repo
• remove non-TS projects (leaving only components-typescript and apps\app-typescript )
• yarn install (using 1.19.0)
• yarn upgrade-interactive --latest (https://i.imgur.com/kxBhULx.png)
• yarn workspace @project/app-typescript start

Tried following the instructions, this doesn't work in VS Code:

git clone [email protected]:react-workspaces/cra-workspaces-playground

error:

[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

So tried a straight git clone of :

https://github.com/react-workspaces/react-workspaces-playground/

... then followed by yarn as per instructions.

yarn start in the app-one folder doesn't work so I ran yarn in that folder to (presumably) pull in / link dependencies which changed the error, then got:

Module not found: Can't resolve '@project/components' in 'C:\_src\react-workspaces\packages\apps\app-one\src'

tried a yarn build in the component directory but that failed as well:

Could not find a required file.
  Name: index.html

It would be great if lerna run build command succeeded. But the build fails on components package because it misses index.html file in the public subfolder. See the command output:

$ lerna run --scope @project/components build
info cli using local version of lerna
lerna notice cli v3.16.1
lerna info filter [ '@project/components' ]
lerna info Executing command in 1 package: "yarn run build"
lerna ERR! yarn run build exited 1 in '@project/components'
lerna ERR! yarn run build stdout:
yarn run v1.17.3
$ react-scripts build
Yarn Workspaces paths detected.
Found 2 path(s) with "main:src" entry.
Exporting Workspaces config to Webpack.
{
  root: 'C:\\src\\workspaces\\react-workspaces-playground',
  paths: [],
  packageEntry: 'main:src',
  development: true,
  production: true
}
Could not find a required file.
  Name: index.html
  Searched in: C:\src\workspaces\react-workspaces-playground\packages\components\public
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@project/components'

create-react-app released new version which increments babel to version 7.9

Released new react-scripts and also react-dev-utils and my monorepo app crashed, please upgrade "https://github.com/react-workspaces/create-react-app/tree/master/packages/react-scripts" to fix this issue

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined at validateString (internal/validators.js:118:11) at Object.join (path.js:1039:7) at noopServiceWorkerMiddleware (/var/www/html/react-workspaces-playground/node_modules/react-dev-utils/noopServiceWorkerMiddleware.js:14:26) at Layer.handle [as handle_request] (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:317:13) at /var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:335:12) at next (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:275:10) at launchEditorMiddleware (/var/www/html/react-workspaces-playground/node_modules/react-dev-utils/errorOverlayMiddleware.js:20:7) at Layer.handle [as handle_request] (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:317:13) at /var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:335:12) at next (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/index.js:275:10) at handleWebpackInternalMiddleware (/var/www/html/react-workspaces-playground/node_modules/react-dev-utils/evalSourceMapMiddleware.js:42:7) at Layer.handle [as handle_request] (/var/www/html/react-workspaces-playground/node_modules/express/lib/router/layer.js:95:5)

I'd really love to see this working with Typescript. My next big project, I'm hoping, will be a monorepo with 2-3 React apps, a couple backend services with an API, all in Typescript. I haven't looked at how you are running this yet, but wanted to start a thread to track it. Hopefully it's "simple"!

I was reading the README and stopped at this:

But this doesn't seem to reflect the latest changes to the yarn-workspaces.js file:

react-workspaces/create-react-app@a498a36#diff-dc0c4e7c623b73660da1809fc60cf6ba

I'm applying the project in a microfrontends context, it's almost all functional, but I need to put in apps / app in your package.json the property " homepage ":" http: // localhost: 8888 / program ", fixed initially, so that the CRA build makes the assets have this address.

I am trying to apply this traditional approach of the homepage but it does not seem to work ... is there any different way for me to achieve this? or is it some particularity of monorepos?

https://github.com/henriqueweiand/tests-monorepo

Has anyone made this work with TypeScript?

There is something in the readme about slack workspace but its just a photo, no link or nothing

I'm fairily new to webpack (been living under Ember and ember-cli rock for many years now). First of all, thank you for that project.

I was playing with the repo and I would like to know how to support nested components. We group them by folders, often similar to what is described here https://medium.com/styled-components/component-folder-pattern-ee42df37ec68

Let's say I would like to do sth like:

└── src
    ├── CompOne
    │   ├── CompOne.css
    │   ├── CompOne.js
    │   ├── CompOne.spec.js
    │   ├── CompOne.stories.js
    │   └── index.js
    └── ui
        └── CompThree
            ├── CompThree.css
            ├── CompThree.js
            ├── CompThree.spec.js
            ├── CompThree.stories.js
            └── index.js

and then import like:

import CompThree from '@project/components/ui/CompThree;

Currently, the above will fail:

./src/App.js
Module not found: Can't resolve '@project/components/ui/CompThree' in '/Users/me/work/react-workspaces-playground/packages/apps/app-one/src'

How can this be achieved? Ideally, I would like to avoid adding reexports to index.js files.

In your source sample, you have exported CompOne and CompTwo in index.js. And then imported it. But we don't want to do it, because all of projects directly import from inside the folders. Currently we do it using the ES5 transpiled imports. Now I am trying to evaluate moving to this using yarn workspaces.

But when I import directly from folder, the import doesn't work

import CompOne from '@project/components/CompOne';

This fails with the error

./src/App.js
Module not found: Can't resolve '@project/components/CompOne' in 'XXX/react-workspaces-playground/packages/apps/app-single-comp/src'

If I use it as below as per previous issue

import CompOne from '@project/components/src/CompOne';

It works. But our code base has used NODE_PATH=./src, and I am looking to avoid having to reintroduce src everywhere in imports

A forked version to showcase the issue

https://github.com/tarunlalwani/react-workspaces-playground

Can you please guide what needs to be done to make this work?

Are there scripts to transpile typescript component projects to js?
If I try to publish typescript components, then they get packaged as tsx and ts files and gets posted to NPM registry and won't be consumable in React Js (Javascript based) projects. So is there a way or do you have any scripts or commands that would transpile the typescript component to js packages and then one can post the same to NPM registry (along with related styles and images) ?

I figured it would be as simple as making another directory inside of packages, say componentsTwo, adding it to the root package.json under workspace/packages and then add it to the application package.json like "@project/componentsTwo": "*", but I get an error when trying to yarn install - error Couldn't find package "@project/helpers@*" required by "my-app" on the "npm" registry.

Is this some silly user error?

Hi Team,

I am migrating a perfectly running CRA app to a monorepo with Yarn Workspaces, Lerna and @react-workspaces/react-scripts. I am using this react-workspaces-playground as a starter. I am facing some issues, and I can't find a proper manual to help me investigate this further. Could anyone with experience give me some clues about what's wrong in my case?

{
  "useWorkspaces": true,
  "packages": ["packages/*/*"],
  "version": "1.0.0",
  "command": {
    "run": {
      "npmClient": "yarn"
    }
  }
}

{
  "name": "root",
  "private": true,
  "scripts": {
    "test": "FORCE_COLOR=true lerna run lint && CI=true FORCE_COLOR=true lerna run test -- --coverage",
    "deploy": "FORCE_COLOR=true lerna run deploy"
  },
  "workspaces": {
    "packages": [
      "packages/apps/*",
      "packages/components",
      "packages/storybook"
    ],
    "nohoist": [
      "**/webpack-dev-server",
      "**/babel-loader",
      "**/babel-jest"
    ]
  },
  "devDependencies": {
    "jest-prop-type-error": "^1.1.0",
    "lerna": "^3.20.1",
    "prettier": "^1.19.1"
  },
  "dependencies": {
    "babel-eslint": "10.0.3",
    "eslint": "6.8.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-config-react-app": "^5.1.0",
    "eslint-config-xo": "^0.27.2",
    "eslint-config-xo-react": "^0.20.0",
    "eslint-plugin-flowtype": "^4.5.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^2.3.0"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!src/setupTests.{js,jsx}",
      "!src/index.{js,jsx}",
      "!src/serviceWorker.{js,jsx}",
      "!src/**/*.(spec|test|stories).{js,jsx}"
    ]
  }
}

Context

app-cms is a small CMS app which is working nicely otherwise.

{
  "name": "@org/cms",
  "version": "0.11.43",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "start": "react-scripts start"
  },
 "dependencies": {
    "@aws-amplify/auth": "2.1.2",
    "@aws-amplify/core": "2.2.1",
    "abortcontroller-polyfill": "1.4.0",
    "apollo-cache": "1.3.4",
    "apollo-cache-inmemory": "1.6.5",
    "apollo-cache-persist": "0.1.1",
    "apollo-client": "2.6.8",
    "apollo-link": "1.2.13",
    "apollo-link-error": "1.1.12",
    "apollo-utilities": "1.3.3",
    "aws-api-gateway-client": "0.2.17",
    "aws-appsync": "3.0.2",
    "aws-appsync-react": "3.0.2",
    "axios": "0.19.0",
    "color-convert": "2.0.1",
    "copy-to-clipboard": "3.2.0",
    "date-fns": "1.30.1",
    "dayjs": "1.8.18",
    "graphql": "14.5.8",
    "graphql-tag": "2.10.1",
    "immutable": "4.0.0-rc.12",
    "js-tree": "2.0.2",
    "just-omit": "1.1.0",
    "localforage": "1.7.3",
    "lodash": "4.17.15",
    "prismjs": "^1.17.1",
    "react": "16.12.0",
    "@apollo/react-common": "3.1.3",
    "@apollo/react-hoc": "3.1.3",
    "@apollo/react-hooks": "3.1.3",
    "react-countup": "4.2.3",
    "react-display-name": "0.2.5",
    "react-dom": "16.12.0",
    "react-dropzone": "8.2.0",
    "react-easter": "^1.0.6",
    "react-helmet": "5.2.1",
    "react-router-dom": "5.1.2",
    "react-scroll-up": "1.3.3",
    "react-select": "1.3.0",
    "react-swipeable": "5.4.0",
    "react-visibility-sensor": "5.1.1",
    "react-youtube": "7.9.0",
    "ripemd160": "2.0.2",
    "sha.js": "2.4.11",
    "slate": "0.47.9",
    "slate-plain-serializer": "^0.7.11",
    "slate-react": "0.22.10",
    "sortablejs": "1.10.1",
    "styled-components": "4.4.0",
    "uuid": "3.3.3"
  },
  "devDependencies": {
    "@babel/core": "7.7.7",
    "@types/graphql": "14.5.0",
    "@types/lodash": "4.14.149",
    "@types/react": "16.9.17",
    "@types/react-dom": "16.9.4",
    "babel-cli": "6.26.0",
    "babel-literal-to-ast": "2.1.0",
    "babel-preset-es2015": "6.24.1",
    "colors": "1.4.0",
    "copyfiles": "^2.1.1",
    "cross-env": "6.0.3",
    "deep-object-diff": "1.1.0",
    "dotenv": "8.2.0",
    "flow": "0.2.3",
    "git-branch-is": "3.1.0",
    "graphql-tag.macro": "2.0.1",
    "gzipper": "^3.4.2",
    "husky": "3.1.0",
    "jest-puppeteer": "4.3.0",
    "minimist": "1.2.0",
    "npm-run-all": "^4.1.5",
    "ora": "4.0.3",
    "prettier": "1.19.1",
    "pretty-quick": "2.0.1",
    "puppeteer": "1.20.0",
    "@react-workspaces/react-scripts": "^3.3.0-alpha-08",
    "readline-sync": "1.4.10",
    "request": "2.88.0",
    "request-promise": "4.2.5",
    "serve": "11.2.0",
    "shelljs": "0.8.3",
    "source-map-explorer": "2.1.2",
    "standard-version": "7.0.1",
    "stylelint": "12.0.1",
    "stylelint-config-recommended": "3.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.9.0",
    "why-did-you-update": "1.0.6"
  },
  "resolutions": {
    "@types/graphql": "14.5.0",
    "apollo-client": "2.6.8",
    "apollo-cache-inmemory": "1.6.5",
    "apollo-cache-persist": "0.1.1",
    "apollo-link-error": "1.1.12",
    "apollo-utilities": "1.3.3",
    "graphql": "14.5.8",
    "sha.js": "2.4.11",
    "ripemd160": "2.0.2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn pretty-quick --staged",
      "pre-push": "node scripts/pre-push.js"
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "babelMacros": {
    "styledComponents": {
      "pure": true
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Config for app-one, app-two, components, and storybook, are left unchanged. app-cms does not reference components yet.

Bug

Running yarn start from app-cms displays an error. app-one, app-two, components, and storybook, are running just fine.

TypeError: this.currentObservable.query.getCurrentResult is not a function

The code originates from the package @apollo/react-hooks

[...]

Your Environment

yarn workspaces info

{
  "@org/cms": {
    "location": "packages/apps/app-cms",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/app-one": {
    "location": "packages/apps/app-one",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/app-two": {
    "location": "packages/apps/app-two",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/components": {
    "location": "packages/components",
    "workspaceDependencies": [],
    "mismatchedWorkspaceDependencies": []
  },
  "@project/storybook": {
    "location": "packages/storybook",
    "workspaceDependencies": [
      "@project/components"
    ],
    "mismatchedWorkspaceDependencies": []
  }
}
Done in 0.02s.

In packages/components-typescript/package.json the fields main and main:src: refer to files that do not exist:

  "main": "src/index.tsx",
  "main:src": "src/index.tsx",

The index.tsx file is located in packages/components-typescript/index.tsx

Are these two fields redundant?

Thank you for your work on @react-workspaces/react-scripts and this demo project - it really got me out of a nasty mess after I tried setting up my project using Yarn workspaces + Lerna + CRA and ran into issues with importing/exporting components across packages. I thought I was faced with going back to the drawing boards, but this works like a charm.

Two questions; what does long-term support look like for this fork, and is there any intention of getting it merged into CRA so workspaces are officially supported?

I'm trying to integrate MinIO into my Monorepo application developed using react-workspaces-playground.
It throws a crypto error. Has anybody tried working with MinIO?

Fresh install. When running the following code, I get the following error:

npx create-react-app --scripts-version @react-workspaces/react-scripts --template typescript my-ts-app

Cannot find module 'cra-template-typescript'

How to build this for Docker? Anyone got a working Dockerfile for the apps?

Hi F1LT3R, I deeply appreciate your work on this. I'm having a hard time upgrading to Typescript 4.0.1. Any chance you're planning to update react-workspaces playground? While I'm asking, the latest Storybook and Yarn versions would be great as well. I've only been coding seriously for a year, but let me know if there is anything I can do to help.

I'm using the same lint command and found it out doesn't work on nested folders on macOS. For example src/components/Component.js gets linted but src/components/field/Component.js doesn't. After a lot of pain tracking down I changed this:

"lint": "eslint ./src/**/*.js --max-warnings=0 --format=codeframe"

to this:

"lint": "eslint \"./src/**/*.js\" --max-warnings=0 --format=codeframe"

I tested on both macOS and Windows and both seem happy.

Great work @F1LT3R, I'm able to actually get CRA hot reloading within a Lerna mono-repo!

Have you tried running yarn build within the CRA? We're using flow in our packages and when running yarn build, the build script fails due to an unexpected token (the unexpected token was a flow type definition).

It appears that when we build our CRA app, it is looking at "src:main": "src/index.js", where the un-transpiled code lives. Any idea on how one would point the CRA app to something like "src": "dist/index.js" where the transpiled code lives while maintaining hot-reloading?

First of all: thank you so much for this package. It's really awesome.

I have a problem after creating a new package package/ui - that is not a CRA app, in fact, it is just a copy of the 'typescript component' package.

I made a repo that reproduces the problem and in the README file there is the error output. All tests pass and the screen.debug() of React testing-library is ok and shows all the HTML of components. I've tried in all browsers even in Safari, which has no dev extension at all.

Could you please take a look? If tests are all green and rendering the components, why in the browser it's throwing errors? I could not find what's happening.

EDIT:

I assume this will be an issue with react-script in general, but it seems to be a relatively new issue. Only thing i found referencing getPublicUrlOrPath is https://stackoverflow.com/questions/61652674/error-cannot-find-module-react-dev-utils-getpublicurlorpath

rolling back to "3.3.0-alpha-08" fixes the issue for now

❯ yarn storybook
yarn run v1.22.4
$ start-storybook -p 9009
info @storybook/react v5.2.8
info
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default Webpack setup.
info => Loading create-react-app config.
ERR! Error: Cannot find module 'react-dev-utils/getPublicUrlOrPath'
ERR! Require stack:
ERR! - <parent_dir>/node_modules/@react-workspaces/react-scripts/config/paths.js
ERR! - <parent_dir>/node_modules/@react-workspaces/react-scripts/config/webpack.config.js
ERR! - <parent_dir>/node_modules/@storybook/react/dist/server/cra-config.js
ERR! - <parent_dir>/node_modules/@storybook/react/dist/server/framework-preset-cra.js
ERR! - <parent_dir>/node_modules/@storybook/core/dist/server/presets.js
ERR! - <parent_dir>/node_modules/@storybook/core/dist/server/config.js
ERR! - <parent_dir>/node_modules/@storybook/core/dist/server/build-static.js
ERR! - <parent_dir>/node_modules/@storybook/core/server.js
ERR! - <parent_dir>/node_modules/@storybook/react/dist/server/index.js
ERR! - <parent_dir>/node_modules/@storybook/react/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:952:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:835:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:1012:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at Object.<anonymous> (/Users/joe/ht/reactjs/node_modules/@react-workspaces/react-scripts/config/paths.js:14:28)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1123:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:972:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:872:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:1012:19)
ERR!     at require (internal/modules/cjs/helpers.js:72:18)
ERR!     at Object.<anonymous> (/Users/joe/ht/reactjs/node_modules/@react-workspaces/react-scripts/config/webpack.config.js:29:15)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1123:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:972:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:872:14)
ERR!  Error: Cannot find module 'react-dev-utils/getPublicUrlOrPath'