Recipe for using with lerna & yarn workspaces?

Was under the impression this worked out of the box. But my craco-app is failing to run components from other packages, ie. with same error as standard CRA. Failed to compile. Unexpected token as referenced https://github.com/facebook/create-react-app/issues/1333.

- /packages
    -/craco-app
    -/components

[patricklafrance]

Hi @sebastienfi,

Lerna + Yarn Workspaces should work out of the box with CRACO.

Here’s the sample project I use to test the feature: https://github.com/patricklafrance/craco-lerna-and-yarn-workspace

Thank you,

Patrick

[pcmaffey]

In case anyone comes across this, here’s what I ended up doing, using a craco port of https://github.com/react-workspaces/create-react-app/tree/master/packages/react-scripts

// https://github.com/react-workspaces/create-react-app/blob/master/packages/react-scripts/config/yarn-workspaces.js
const yarnWorkspaces = require('./tools/yarn-workspaces')

module.exports = {
  webpack: {
    // get CRA to read from /packages
    // based off https://github.com/react-workspaces/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
    configure: (webpackConfig, { env, paths }) => {
      const workspacesConfig = yarnWorkspaces.init(paths)
      const dev = env === 'development'
      const prod = env === 'production'
      const workspacesMainFields = [workspacesConfig.packageEntry, 'main']
      const mainFields =
        dev && workspacesConfig.development
          ? workspacesMainFields
          : prod && workspacesConfig.production
          ? workspacesMainFields
          : undefined

      const node_modules = [workspacesConfig.root]
        .concat(workspacesConfig.paths)
        .map(p => p + '/node_modules')

      const modules = Array.from(webpackConfig.resolve.modules).concat(
        node_modules
      )
      // update node_modules paths
      webpackConfig.resolve.modules = modules
      webpackConfig.resolve.mainFields = mainFields

      const include =
        dev && workspacesConfig.development
          ? [paths.appSrc, workspacesConfig.paths]
          : prod && workspacesConfig.production
          ? [paths.appSrc, workspacesConfig.paths]
          : paths.appSrc
      // linter
      webpackConfig.module.rules[1].include = include
      // skip package node_modules from linter
      webpackConfig.module.rules[1].exclude = node_modules
      // loader
      webpackConfig.module.rules[2].oneOf[1].include = include

      return webpackConfig
    },
  },
}