2

I have a create-react-app not ejected and rewired with react-app-rewired and customized with customize-cra. This is the scenario and I currently can't change it.

Here it is the configuration of config-overrides.js:

const path = require('path')
const fs = require('fs')
const {
  override,
  overrideDevServer,
  watchAll,
  removeModuleScopePlugin,
  addWebpackModuleRule
} = require('customize-cra')

const theme = process.env.REACT_APP_THEME
const currentDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(currentDirectory, relativePath)

module.exports = {
  webpack: override(
    removeModuleScopePlugin(),
    addWebpackModuleRule({
      test: /\.svg$/,
      loader: 'raw-loader',
      include: [
        resolveApp('../source/' + theme + '/icons/dist')
      ]
    })
  ),
  devServer: overrideDevServer(
    watchAll()
  ),
  paths: paths => {
    paths.appBuild = path.join(paths.appBuild, theme)
    return paths
  }
}

A new need now is to import in the app some css from a local package, setup in package.json with a local namespace

  "dependencies": {
    "@namespace/helpers": "*",

I thought to use react-app-rewire-multiple-entry that seems the perfect lib to import multiple entries for a rewired create-react-app

Here is the new update:

const path = require('path')
const fs = require('fs')
const {
  override,
  overrideDevServer,
  watchAll,
  removeModuleScopePlugin,
  addWebpackModuleRule
} = require('customize-cra')

const theme = process.env.REACT_APP_THEME
const currentDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(currentDirectory, relativePath)

// new css entries configuration
const cssEntries = require('react-app-rewire-multiple-entry')([
  {
    entry: './src/index.tsx',
    helpers_1: '../node_modules/@namespace/helpers/dist/index.css',
    helpers_2: '@namespace/helpers/dist/index.css'
  }
])

module.exports = {
  webpack: override(
    cssEntries.addMultiEntry, // new css entries
    removeModuleScopePlugin(),
    addWebpackModuleRule({
      test: /\.svg$/,
      loader: 'raw-loader',
      include: [
        resolveApp('../source/' + theme + '/icons/dist')
      ]
    })
  ),
  devServer: overrideDevServer(
    watchAll()
  ),
  paths: paths => {
    paths.appBuild = path.join(paths.appBuild, theme)
    return paths
  }
}

But both approaches currently implemented (first helpers_1: '../node_modules/@namespace/helpers/dist/index.css', and then helpers_2: '@namespace/helpers/dist/index.css') are not loading the css in the create-react-app.

Any ideas to fix it? Or something wrong that you see?

Thanks in advance

axel
  • 3,778
  • 4
  • 45
  • 72

0 Answers0