Closed fgiarritiello closed 4 years ago
Do you have a repo with your setup that I can look at?
I don't have a repo but I can show you the project setup and some of the main dependencies.
/packages
|---/ReactApp
| |--- package.json
|---/UI-Library-with-storybook
| |--- package.json
| |--- .babelrc
|--- package.json
|--- lerna.json
ReactApp / package.json
{
"name": "React App",
"version": "1.0.0",
"private": true,
"dependencies": {
"@react-workspaces/react-scripts":"2.1.1-workspaces-09",
"UI-Library": "1.0.0",
"react-app-rewire-less": "2.1.3",
"react-app-rewire-styled-components": "3.0.2",
"react-router-dom": "4.3.1"
},
"devDependencies": {
"cross-env": "5.2.0",
"customize-cra": "0.2.13",
"react-app-rewired": "2.1.3"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">0.25%",
"not op_mini all",
"ie 11"
]
}
}
UI-library / package.json
{
"name": "UI-Library",
"version": "1.0.0",
"private": true,
"description": "UI Framework",
"main": "dist/index.js",
"license": "ISC",
"dependencies": {
"antd": "3.18.2"
},
"devDependencies": {
"@babel/cli": "7.1.2",
"@babel/core": "7.1.2",
"babel-preset-react-app": "5.0.3",
"@storybook/addon-actions": "3.4.8",
"@storybook/addon-backgrounds": "3.4.8",
"@storybook/addon-console": "1.0.4",
"@storybook/addon-info": "3.4.8",
"@storybook/addon-knobs": "3.4.8",
"@storybook/addon-notes": "3.4.8",
"@storybook/addon-viewport": "3.4.8",
"@storybook/react": "4.0.0-alpha.14",
"babel-core": "6.26.3",
"babel-plugin-import": "1.8.0",
"babel-plugin-styled-components": "1.5.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-3": "6.24.1",
"css-loader": "2.0.0",
"less": "2.7.2",
"less-loader": "4.0.5",
"storybook-addon-jsx": "5.3.0",
"style-loader": "0.21.0",
"url-loader": "1.0.1"
},
"scripts": {
"build": "babel ./ --out-dir ./dist --delete-dir-on-start --copy-files",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "NODE_ENV=development yarn build --watch --source-maps",
"start-story": "start-storybook -p 3001 -s ./public -c .storybook"
}
}
/package.json
{
"name": "center-suite-clients",
"private": true,
"workspaces": [
"packages/*"
],
"scripts": {
"init": "lerna init --independent --exact",
"boot": "lerna bootstrap",
"start": "cd packages/center-connect-web && npm run start"
},
"dependencies": {
"prop-types": "15.7.2",
"styled-components": "4.2.0"
},
"devDependencies": {
"babel-eslint": "10.0.1",
"babel-loader": "8.0.5",
"eslint": "5.16.0",
"eslint-config-airbnb": "17.0.0",
"eslint-config-airbnb-base": "13.0.0",
"eslint-config-prettier": "2.9.0",
"eslint-config-react-app": "2.1.0",
"eslint-import-resolver-webpack": "0.10.1",
"eslint-plugin-flowtype": "2.50.0",
"eslint-plugin-import": "2.13.0",
"eslint-plugin-jsx-a11y": "6.1.0",
"eslint-plugin-prettier": "2.6.2",
"eslint-plugin-react": "7.10.0",
"lerna": "3.13.0",
"prettier": "1.13.7"
}
}
I use craco instead of react-app-rewired (tried both but only craco worked, I can't remember exactly why).
My configuration consists of having a craco.config.js at the root level of my repo:
craco.config.js
const path = require("path");
module.exports = {
reactScriptsPath: path.join(
__dirname,
"node_modules/@react-workspaces/react-scripts"
)
};
Note that I override the react-scripts path to point to the F1LT3R's package in the root level node_modules directory (it'll be there because of yarn workspace hoisting).
Then in each of my apps, I have the following scripts:
app/myApp/package.json
scripts: {
start: craco start --config ../../craco.config.js,
build: craco build --config ../../craco.config.js,
etc.
}
I don't like having to do relative references to my shared configuration file but at least I can run my apps! Hope that helps :)
@fgiarritiello is your Lerna.json really in your packages dir?
@F1LT3R my bad. The lerna.json is in the root folder. I updated the above comment. Thanks
I'll try Remimstr's solution when I have time. Right now I'm just stuck with using "react-scripts": "2.0.0-next.a671462c" since it still supported monorepos
Out off interest, why are you using rewired/craco? What does that get you?
rewired allows you to override, without ejecting, the babel and webpack configurations that CRA creates out of the box. In my case I need to override the configs so that I can use the AntDesign UI library.
The reason I override CRA with craco is for the same reason as @fgiarritiello (AntDesign)
I would think it is possible to extend react-workspaces to allow the same kind of overrides. I'm just not sure that I want to do the work of supporting something other than vanilla CRA.
I'm not sure if this project should try to support all possible tools that rewire CRA, that could end up being a huge headache; or maybe it's easy. I'd have to have the time to use craco/rewired to really get a feel for what they were doing and how easy that was to override - and I'm not sure I can commit to that right now.
Supporting Ant Design however, that seems more reasonable.
Are you only using craco/rewired to support Ant, or are there other things you are also using these for?
@Remimstr , @fgiarritiello ? ^^
@F1LT3R I understand your concern. However supporting either rewired or craco will allow more flexibility in expanding the default configuration with different libraries. If you just support Antd then you will restrict this library to people that only use Antd but there might be other frameworks that need a different type of config. In addition, I use rewired to change configuration for styled-components. Here is the config-overrides.js file
const { injectBabelPlugin } = require('react-app-rewired');
const rewireStyledComponents = require('react-app-rewire-styled-components');
const rewireLess = require('react-app-rewire-less');
const themes = require('..i/themes');
/* config-overrides.js */
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', style: true }],
config,
);
config = rewireLess.withLoaderOptions({
javascriptEnabled: true,
modifyVars: themes(),
})(config, env);
config = rewireStyledComponents(config, env, {
displayName: env !== 'production',
});
return config;
};
@F1LT3R First of all I should probably clarify that Antd should just work out of the box with CRA, but there are 2 very compelling reasons to override the default configurations:
1) adding custom theme styling 2) making components import on demand (through use of a babel plugin)
To accomplish either of these tasks, you need to use some override mechanism (react-app-rewired, craco, etc.). The official docs suggest using react-app-rewired: https://ant.design/docs/react/use-with-create-react-app
Unfortunately, I don't think it's quite as simple as just supporting Antd, however if you were to add support react-app-rewired, that should generally solve this problem for anyone just using Antd and following their official guide.
Personally I completely understand your hesitation and I'm fine to continue using craco.
Am I right in thinking that Rewired would be preferred over Craco if only one had to be supported?
For CRA +2.0 the docs actually suggest that we use https://github.com/arackaf/customize-cra. Iām still using rewired because the version of CRA Iām using is < 2.0
Am I right in thinking that Rewired would be preferred over Craco if only one had to be supported?
I think that is a reasonable assumption, craco seems much less popular than rewired.
@fgiarritiello customize-cra says right in the docs that it depends on react-app-rewired, looks like you won't be escaping it anytime soon ;)
By the way I was able to use monorepo with CRA v3 using the following solution https://github.com/facebook/create-react-app/issues/1333#issuecomment-505718147
Rather than support any/all of the following:
Would it be better to just support Ant Design out of the box?
Any update on this issue? š£ i want use antd š£
Has anyone managed to get react-app-rewired
to work?
Some work seems to be going on here: https://github.com/with-heart/react-app-rewire-workspaces
@abrkn - are people trying to get all of rewired working? Or are people only trying to get this working with Ant Design?
Ok, I've had the chance to look at Ant Design. It's great!
I was successful in adding AntD to React Workspaces Playground locally, but I think it would be better to support react-app-rewired
out of the box.
@fgiarritiello - I think react-app-rewired
will need to support Yarn Workspaces.
The issue with finding react-scripts/package.json
is that React App Rewired assumes react-scripts is a real directory. Whereas Yarn Workspaces will hoist react-scripts by default.
It may be possible to set react-scripts
in the Yarn Workspaces no-hoist
object to make this work. It's not an ideal situation, but it "should" work.
So after updated my root package.json
like so:
{
"workspaces": {
"packages": [
"packages/apps/*",
"packages/components",
"packages/storybook"
],
"nohoist": [
"packages/apps/**/webpack-dev-server",
"**/babel-loader",
"**/babel-jest",
"**/@react-workspaces/react-scripts"
]
},}
... my @react-workspaces/react-scripts
does appear in the packages/apps/app-one/node_modules/
directory.
However, it still fails with the same react-scripts/package.json
error, because there is no react-scripts
directory.
Again, I would need to submit a PR to react-app-rewired
to make this work, but this seems messy as the Yarn Workspaces resolution code would have to live in two libraries (react-workspaces and react-app-rewired).
What might be better is to find a way to over-ride react-app-rewired
scripts from within react-workspaces
. I am not sure how that would work yet.
Luckily react-app-rewired
has --custom-scripts
and process.env.REACT_SCRIPTS_VERSION
(which are the same thing) as well as --config-overrides
. This should hopefully let us specify @react-workspaces/react-scripts
as the ~"custom scripts version" that
should allow us to bootstrap create-react-app
with the Yarn Workspaces compatible Babel Loader configuration.
... all this to say ...
I am able to yarn start
apps in the react-workspaces-playground
repo using react-app-rewired
with...
1) The following Yarn Workspaces config in the root package.json
:
{
"workspaces": {
"packages": [
"packages/apps/*",
"packages/components",
"packages/storybook"
],
"nohoist": [
"packages/apps/**/webpack-dev-server",
"**/babel-loader",
"**/babel-jest",
"**/@react-workspaces/react-scripts"
]
}
}
2) This packages/apps/app-one/package.json
{
"dependencies": {
"@react-workspaces/react-scripts": "^3.0.1-alpha-07",
"react-app-rewired": "^2.1.5",
},
"scripts": {
"start": "react-app-rewired start"
}
}
3) The following command:
# where pwd=${root}/packages/apps/app-one/
yarn start --scripts-version $(pwd)/node_modules/@react-workspaces/react-scripts
I now have Ant Design working with react-app-rewired
and customize-cra
as per their setup instructions:
Only the following two lines are used in App.js to show the Date Picker:
import {DatePicker} from 'antd'
<DatePicker />
This means that Ant Design's automatic style imports are working.
The config-overrides.js
looks like this:
const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
);
You can test this out on the following branch: https://github.com/react-workspaces/react-workspaces-playground/tree/ant-design-compat
Here is a screenshot of the Data Picker popped open in the Playground.
@fgiarritiello, @Remimstr, @mandri222, @abrkn - I have a PR for you: https://github.com/react-workspaces/react-workspaces-playground/pull/21
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?