Workspaces typescript fixes (#3)

Workspaces typescript fixes

Author: F1LT3R

packages/react-scripts/config/paths.js

@@ -11,6 +11,7 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
+const findUp = require('find-up');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebook/create-react-app/issues/637
@@ -122,7 +123,9 @@ module.exports = {
 };
 
 const ownPackageJson = require('../package.json');
-const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
+const reactScriptsPath = findUp.sync(`node_modules/${ownPackageJson.name}`, {
+  cwd: resolveApp('.'),
+});
 const reactScriptsLinked =
   fs.existsSync(reactScriptsPath) &&
   fs.lstatSync(reactScriptsPath).isSymbolicLink();

packages/react-scripts/config/webpack.config.js

@@ -62,14 +62,26 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
-  const workspacesMainFields = [workspacesConfig.packageEntry, 'main'];
+  const workspacesMainFields = [
+    workspacesConfig.packageEntry,
+    'browser',
+    'module',
+    'main',
+  ];
   const mainFields =
     isEnvDevelopment && workspacesConfig.development
       ? workspacesMainFields
       : isEnvProduction && workspacesConfig.production
         ? workspacesMainFields
         : undefined;
 
+  const includePaths =
+    isEnvDevelopment && workspacesConfig.development
+      ? [paths.appSrc, ...workspacesConfig.paths]
+      : isEnvProduction && workspacesConfig.production
+      ? [paths.appSrc, ...workspacesConfig.paths]
+      : paths.appSrc;
+
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
@@ -342,11 +354,13 @@ module.exports = function(webpackEnv) {
               loader: require.resolve('eslint-loader'),
             },
           ],
-          include: isEnvDevelopment && workspacesConfig.development
-          ? [paths.appSrc, workspacesConfig.paths]
-          : isEnvProduction && workspacesConfig.production
-            ? [paths.appSrc, workspacesConfig.paths]
-            : paths.appSrc,
+          include: includePaths,
+          // Don't lint typescript files outside the main package because it has problems with some syntax rules, e.g. abstract
+          exclude: useTypeScript
+            ? file =>
+                /\.tsx?/.test(path.extname(file)) &&
+                !file.startsWith(paths.appSrc)
+            : undefined,
         },
         {
           // "oneOf" will traverse all following loaders until one will
@@ -368,12 +382,7 @@ module.exports = function(webpackEnv) {
             // The preset includes JSX, Flow, TypeScript, and some ESnext features.
             {
               test: /\.(js|mjs|jsx|ts|tsx)$/,
-              include:
-              isEnvDevelopment && workspacesConfig.development
-                ? [paths.appSrc, workspacesConfig.paths]
-                : isEnvProduction && workspacesConfig.production
-                  ? [paths.appSrc, workspacesConfig.paths]
-                  : paths.appSrc,
+              include: includePaths,
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
@@ -656,6 +665,10 @@ module.exports = function(webpackEnv) {
           typescript: resolve.sync('typescript', {
             basedir: paths.appNodeModules,
           }),
+          compilerOptions: {
+            skipLibCheck: true,
+            suppressOutputPathCheck: true,
+          },
           async: isEnvDevelopment,
           useTypescriptIncrementalApi: true,
           checkSyntacticErrors: true,
@@ -667,7 +680,7 @@ module.exports = function(webpackEnv) {
             '!**/src/setupProxy.*',
             '!**/src/setupTests.*',
           ],
-          watch: paths.appSrc,
+          watch: includePaths,
           silent: true,
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,

packages/react-scripts/config/yarn-workspaces.js

@@ -23,7 +23,13 @@ const getWorkspacesRootConfig = dir => {
 
 	const packageObj = loadPackageJson(packageJsonUp);
 
-	if (Reflect.has(packageObj, 'workspaces')) {
+	if (
+		packageObj.workspaces &&
+		(
+		Array.isArray(packageObj.workspaces) ||
+		Reflect.has(packageObj.workspaces, 'packages')
+		)
+	) {
 		const workspacesRootConfig = {
 			root: path.dirname(packageJsonUp),
 			workspaces: packageObj.workspaces
@@ -161,17 +167,6 @@ const getDeps = pkg => {
 
 const depsTable = {};
 
-const filterDeps = deps =>
-	Reflect.ownKeys(deps).filter(dep => Reflect.has(depsTable, dep));
-
-const filterDepsTable = () => {
-	Reflect.ownKeys(depsTable).forEach(depName => {
-		const depsList = depsTable[depName].deps;
-		const workspacesOnlyDeps = filterDeps(depsList);
-		depsTable[depName].deps = workspacesOnlyDeps;
-	});
-};
-
 const buildDepsTable = srcPaths => {
 	srcPaths.forEach(path => {
 		const pkg = getPkg(path);