Getting "does not contain a default export" for various libs with yarn workspaces (question)

First of all, this is a really weird issue and I don’t understand how craco is related to it.

I have followed this tutorial “Using Create-React-App In A Monorepo”.

My goal and config is just made to transpile code from another package.

The moment I launch apps with craco, I am getting does not contain a default export for a few libraries, but if they are launched with react-scripts, it does not happen. I really don’t understand how that can be related, so I am investigating.

Is there something that craco changes regarding imports or some known issues with lerna/yarn/workspaces?

const path = require('path')
const { getLoader, loaderByName } = require('@craco/craco')
const absolutePath = path.join(__dirname, '../ui-framework')
module.exports = {
  webpack: {
    alias: {},
    plugins: [],
    configure: (webpackConfig, { env, paths }) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'))
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include]
        match.loader.include = include.concat[absolutePath]
      }
      return webpackConfig
    }
  }
}

[AoDev]

@Bluefitdev Here is the current config:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpack = require('webpack')
const path = require('path')
const dotenv = require('dotenv')
const gitCommitId = require('git-commit-id')
const fs = require('fs')

// Getting the config from dotenv if present (Normally only for local development)
const env = path.resolve(__dirname, '../../.env')
if (fs.existsSync(env)) {
  const envConfig = dotenv.parse(fs.readFileSync(env))
  for (const k in envConfig) {
    process.env[k] = envConfig[k]
  }
}

const envVars = {
  GIT_COMMIT: gitCommitId({ cwd: path.resolve(__dirname, '../../') }).slice(0, 7),
  REACT_APP_ETH_NETWORK: process.env.REACT_APP_ETH_NETWORK,
  NODE_ENV: process.env.NODE_ENV,
  DISABLE_ESLINT_PLUGIN: process.env.DISABLE_ESLINT_PLUGIN,
  APP_NAME: path.basename(process.cwd()),
}

const networks = [edited]
const appNames = [edited]

// Check that we are passing a valid network for the build
if (!networks.includes(envVars.REACT_APP_ETH_NETWORK)) {
  throw new Error(`Invalid network specified during build. "${envVars.REACT_APP_ETH_NETWORK}"`)
}

if (!appNames.includes(envVars.APP_NAME)) {
  throw new Error(`Invalid appName specified during build. "${envVars.APP_NAME}"`)
}

console.log('Config', JSON.stringify(envVars, null, 2))

const plugins = [
  new webpack.NormalModuleReplacementPlugin(/(.*)BUILD_APP_NETWORK(\.*)/, function (resource) {
    resource.request = resource.request.replace(
      /BUILD_APP_NETWORK/,
      process.env.REACT_APP_ETH_NETWORK
    )
  }),
  new webpack.DefinePlugin({
    'process.env.GIT_COMMIT': JSON.stringify(envVars.GIT_COMMIT),
    'process.env.APP_VERSION': JSON.stringify(envVars.GIT_COMMIT),
    'process.env.APP_NAME': JSON.stringify(envVars.APP_NAME),
  }),
]

if (process.env.ANALYZE_BUNDLE) {
  plugins.push(new BundleAnalyzerPlugin())
}

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
      )
      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1)
      const oneOfRule = webpackConfig.module.rules.find((rule) => rule.oneOf)
      if (oneOfRule) {
        oneOfRule.oneOf.splice(0, 0, {
          test: /.*svg-sprite.+\.svg$/,
          use: ['svg-sprite-loader'],
        })

        const tsxRule = oneOfRule.oneOf.find(
          (rule) => rule.test && rule.test.toString().includes('tsx')
        )

        const newIncludePaths = [
          // relative path to my yarn workspace library
          path.resolve(__dirname, '../common'),
        ]
        if (tsxRule) {
          if (Array.isArray(tsxRule.include)) {
            tsxRule.include = [...tsxRule.include, ...newIncludePaths]
          } else {
            tsxRule.include = [tsxRule.include, ...newIncludePaths]
          }
        }
      }
      return webpackConfig
    },
    plugins,
  },
  babel: {
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            src: './src',
            'common': '../common',
            'app-images': './src/assets/images',
            'app-lib': '../common/lib',
            'app-services': './src/services',
            'shared-components': './src/shared-components',
            'ui-framework': '../common/ui-framework',
          },
        },
      ],
    ],
  },
}

Note that I also had to find a work-around for tsconfig.json by extending another config so that CRA can’t overwrite it.

tsconfig.json

  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true
  }
}

tsconfig.base.json of one app (package)

{
  "extends": "../../tsconfig",
  "include": ["src", "../common"],
  "exclude": ["node_modules", "**/*.spec.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common/*": ["../common/*"],
      "app-lib/*": ["../common/src/lib/*"],
      "ui-framework": ["../common/src/ui-framework"]
    }
  }
}

[Bluefitdev]

@AoDev can you please tell me how did you make it work? What config did you end up using? My current working CRA gives me weird error after i moved it to lerna monorepo style with yarn workspace…