title: Create React App + Typescript In monorepo code sharing
body: <p>I currently have a monorepo where I have two (+) packages using yarn workspaces:</p>
  
  <pre><code>root
    /packages
      /common
      /web
    ...
  
  root/package.json
  
    ...
    "workspaces": {
      "packages": [
        "packages/*"
      ],
      "nohoist": [
        "**"
      ],
    },
  </code></pre>
  
  <p><code>web</code> is a plain create-react-app with the typescript template. I have some TS code in <code>common</code> I want to use in <code>web</code>, but it seems that CRA does not support compiling code outside of <code>src</code>, giving me an error when I try to import from <code>common</code> in <code>web</code>:</p>
  
  <pre><code>../common/state/user/actions.ts 4:66
  Module parse failed: Unexpected token (4:66)
  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 { UpdateUserParams } from './reducer';
  | 
  &gt; export const login = createAction('USER/LOGIN')&lt;{ username: string; password: string }&gt;();
  </code></pre>
  
  <p>Thus, I followed the instructions at <a href="https://github.com/facebook/create-react-app/issues/1333#issuecomment-347970625" rel="noreferrer">this comment</a> after ejecting to include paths in <code>/common</code>, but it seems like <code>babel-loader</code> loads the files, but now isn't compiling them from typescript:</p>
  
  <pre><code>./common/state/user/actions.ts
  SyntaxError: /Users/brandon/Code/apps/packages/common/state/user/actions.ts: Unexpected token, expected "," (4:66)
  
    2 | import { UpdateUserParams } from './reducer';
    3 | 
  &gt; 4 | export const login = createAction('USER/LOGIN')&lt;{ username: string; password: string }&gt;();
      |                                                                   ^
    5 | 
    6 | export const logout = createAction('USER/LOGOUT')();
  </code></pre>
  
  <p>How can I get webpack / babel to compile code in common correctly? I know I can have <code>common</code> compile it's own code, but I'd rather not have to recompile code in common every time I want to make a change. Having each app do it itself is ideal.</p>
  
  <p>Webpack.config.js:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>....
  module: {
        strictExportPresence: true,
        rules: [
          // Disable require.ensure as it's not a standard language feature.
          { parser: { requireEnsure: false } },
  
          // First, run the linter.
          // It's important to do this before Babel processes the JS.
          // {
          //   test: /\.(js|mjs|jsx|ts|tsx)$/,
          //   enforce: 'pre',
          //   use: [
          //     {
          //       options: {
          //         cache: true,
          //         formatter: require.resolve('react-dev-utils/eslintFormatter'),
          //         eslintPath: require.resolve('eslint'),
          //         resolvePluginsRelativeTo: __dirname,
  
          //       },
          //       loader: require.resolve('eslint-loader'),
          //     },
          //   ],
          //   include: paths.appSrc,
          // },
          {
            // "oneOf" will traverse all following loaders until one will
            // match the requirements. When no loader matches it will fall
            // back to the "file" loader at the end of the loader list.
            oneOf: [
              // "url" loader works like "file" loader except that it embeds assets
              // smaller than specified limit in bytes as data URLs to avoid requests.
              // A missing `test` is equivalent to a match.
              {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: imageInlineSizeLimit,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              // Process application JS with Babel.
              // The preset includes JSX, Flow, TypeScript, and some ESnext features.
              {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                include: paths.appLernaModules.concat(paths.appSrc), // MAIN CHANGE HERE!!!
                loader: require.resolve('babel-loader'),
                options: {
                  customize: require.resolve('babel-preset-react-app/webpack-overrides'),
  
                  plugins: [
                    [
                      require.resolve('babel-plugin-named-asset-import'),
                      {
                        loaderMap: {
                          svg: {
                            ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                          },
                        },
                      },
                    ],
                  ],
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                  // See #6846 for context on why cacheCompression is disabled
                  cacheCompression: false,
                  compact: isEnvProduction,
                },
              },
              // Process any JS outside of the app with Babel.
              // Unlike the application JS, we only compile the standard ES features.
              {
                test: /\.(js|mjs)$/,
                exclude: /@babel(?:\/|\\{1,2})runtime/,
                loader: require.resolve('babel-loader'),
                options: {
                  babelrc: false,
                  configFile: false,
                  compact: false,
                  presets: [
                    [require.resolve('babel-preset-react-app/dependencies'), { helpers: true }],
                  ],
                  cacheDirectory: true,
                  // See #6846 for context on why cacheCompression is disabled
                  cacheCompression: false,
  
                  // Babel sourcemaps are needed for debugging into node_modules
                  // code.  Without the options below, debuggers like VSCode
                  // show incorrect code and set breakpoints on the wrong lines.
                  sourceMaps: shouldUseSourceMap,
                  inputSourceMap: shouldUseSourceMap,
                },
              },
              // "postcss" loader applies autoprefixer to our CSS.
              // "css" loader resolves paths in CSS and adds assets as dependencies.
              // "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.
              // In production, we use MiniCSSExtractPlugin to extract that CSS
              // to a file, but in development "style" loader enables hot editing
              // of CSS.
              // By default we support CSS Modules with the extension .module.css
              {
                test: cssRegex,
                exclude: cssModuleRegex,
                use: getStyleLoaders({
                  importLoaders: 1,
                  sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap,
                }),
                // Don't consider CSS imports dead code even if the
                // containing package claims to have no side effects.
                // Remove this when webpack adds a warning or an error for this.
                // See https://github.com/webpack/webpack/issues/6571
                sideEffects: true,
              },
              // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
              // using the extension .module.css
              {
                test: cssModuleRegex,
                use: getStyleLoaders({
                  importLoaders: 1,
                  sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                }),
              },
              // Opt-in support for SASS (using .scss or .sass extensions).
              // By default we support SASS Modules with the
              // extensions .module.scss or .module.sass
              {
                test: sassRegex,
                exclude: sassModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap,
                  },
                  'sass-loader',
                ),
                // Don't consider CSS imports dead code even if the
                // containing package claims to have no side effects.
                // Remove this when webpack adds a warning or an error for this.
                // See https://github.com/webpack/webpack/issues/6571
                sideEffects: true,
              },
              // Adds support for CSS Modules, but using SASS
              // using the extension .module.scss or .module.sass
              {
                test: sassModuleRegex,
                use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction &amp;&amp; shouldUseSourceMap,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    },
                  },
                  'sass-loader',
                ),
              },
              // "file" loader makes sure those assets get served by WebpackDevServer.
              // When you `import` an asset, you get its (virtual) filename.
              // In production, they would get copied to the `build` folder.
              // This loader doesn't use a "test" so it will catch all modules
              // that fall through the other loaders.
              {
                loader: require.resolve('file-loader'),
                // Exclude `js` files to keep "css" loader working as it injects
                // its runtime that would otherwise be processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              // ** STOP ** Are you adding a new loader?
              // Make sure to add the new loader(s) before the "file" loader.
            ],
          },
        ],
      },
      plugins: [
        // Generates an `index.html` file with the &lt;script&gt; injected.
        new HtmlWebpackPlugin(
          Object.assign(
            {},
            {
              inject: true,
              template: paths.appHtml,
            },
            isEnvProduction
              ? {
                  minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeRedundantAttributes: true,
                    useShortDoctype: true,
                    removeEmptyAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    keepClosingSlash: true,
                    minifyJS: true,
                    minifyCSS: true,
                    minifyURLs: true,
                  },
                }
              : undefined,
          ),
        ),
        ...
  </code></pre>
  
  <p></p>
  
  <p>paths.js</p>
  
  <pre class="lang-js prettyprint-override"><code>'use strict';
  
  const path = require('path');
  const fs = require('fs');
  const url = require('url');
  
  // Make sure any symlinks in the project folder are resolved:
  // https://github.com/facebook/create-react-app/issues/637
  const appDirectory = fs.realpathSync(process.cwd());
  const resolveApp = relativePath =&gt; path.resolve(appDirectory, relativePath);
  
  const envPublicUrl = process.env.PUBLIC_URL;
  
  function ensureSlash(inputPath, needsSlash) {
    const hasSlash = inputPath.endsWith('/');
    if (hasSlash &amp;&amp; !needsSlash) {
      return inputPath.substr(0, inputPath.length - 1);
    } else if (!hasSlash &amp;&amp; needsSlash) {
      return `${inputPath}/`;
    } else {
      return inputPath;
    }
  }
  
  const getPublicUrl = appPackageJson =&gt; envPublicUrl || require(appPackageJson).homepage;
  
  // We use `PUBLIC_URL` environment variable or "homepage" field to infer
  // "public path" at which the app is served.
  // Webpack needs to know it to put the right &lt;script&gt; hrefs into HTML even in
  // single-page apps that may serve index.html for nested URLs like /todos/42.
  // We can't use a relative path in HTML because we don't want to load something
  // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
  function getServedPath(appPackageJson) {
    const publicUrl = getPublicUrl(appPackageJson);
    const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
    return ensureSlash(servedUrl, true);
  }
  
  const moduleFileExtensions = [
    'web.mjs',
    'mjs',
    'web.js',
    'js',
    'web.ts',
    'ts',
    'web.tsx',
    'tsx',
    'json',
    'web.jsx',
    'jsx',
  ];
  
  // Resolve file paths in the same order as webpack
  const resolveModule = (resolveFn, filePath) =&gt; {
    const extension = moduleFileExtensions.find(extension =&gt;
      fs.existsSync(resolveFn(`${filePath}.${extension}`)),
    );
  
    if (extension) {
      return resolveFn(`${filePath}.${extension}`);
    }
  
    return resolveFn(`${filePath}.js`);
  };
  
  // config after eject: we're in ./config/
  module.exports = {
    dotenv: resolveApp('.env'),
    appPath: resolveApp('.'),
    appBuild: resolveApp('build'),
    appPublic: resolveApp('public'),
    appHtml: resolveApp('public/index.html'),
    appIndexJs: resolveModule(resolveApp, 'src/index'),
    appPackageJson: resolveApp('package.json'),
    appSrc: resolveApp('src'),
    appTsConfig: resolveApp('tsconfig.json'),
    appJsConfig: resolveApp('jsconfig.json'),
    yarnLockFile: resolveApp('yarn.lock'),
    testsSetup: resolveModule(resolveApp, 'src/setupTests'),
    proxySetup: resolveApp('src/setupProxy.js'),
    appNodeModules: resolveApp('node_modules'),
    publicUrl: getPublicUrl(resolveApp('package.json')),
    servedPath: getServedPath(resolveApp('package.json')),
  };
  
  module.exports.moduleFileExtensions = moduleFileExtensions;
  
  module.exports.lernaRoot = path.resolve(module.exports.appPath, '../../');
  
  module.exports.appLernaModules = [];
  module.exports.allLernaModules = fs.readdirSync(path.join(module.exports.lernaRoot, 'packages'));
  
  fs.readdirSync(module.exports.appNodeModules).forEach(folderName =&gt; {
    if (folderName === 'react-scripts') {
      return;
    }
    const fullName = path.join(module.exports.appNodeModules, folderName);
    if (fs.lstatSync(fullName).isSymbolicLink()) {
      module.exports.appLernaModules.push(fs.realpathSync(fullName));
    }
  });
  
  </code></pre>
  
  <p>tsconfig:</p>
  
  <pre><code>// base in root
  {
    "compilerOptions": {
      "allowJs": true,
      "checkJs": false,
      "esModuleInterop": true,
      "downlevelIteration": true,
      "lib": ["esnext", "dom"],
      "noUnusedLocals": true,
      "skipLibCheck": true,
      "strict": true,
      "target": "esnext",
      "noEmit": true,
      "moduleResolution": "node",
      "resolveJsonModule": true
    }
  }
  
  //packages/web/tsconfig.json
  {
    "extends": "../../tsconfig.json",
    "compilerOptions": {
      "jsx": "react",
      "baseUrl": "src",
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "isolatedModules": true,
      "typeRoots": ["./node_modules/@types"],
    },
    "include": [
      "src"
    ]
  }
  
  </code></pre>