Skip to main content

¿Cómo implementar configuración de react-app-rewired a un proyecto de Nextjs?

Soy bastante nuevo en cuanto al tema de diseño y estilos con React, actualmente se me encargo obtener el componente de un Template que se compró, dicho componente se agregará a un proyecto realizado con Nextjs.

Se importan los archivos sin problemas pero parece no aplicarlos al componente que estoy sacando del template

Después de realizar varias pruebas, me doy cuenta de que el componente se muestra correctamente si en el package.json del template tiene la siguiente línea react-app-rewired start dentro de scripts, que parece que viene de la mano con el paquete react-app-rewired

Actualmente mi proyecto de nextjs se ejecuta con el siguiente comando npm run dev,

¿Cómo puedo pasar la configuración del template al projecto de Nextjs?

El contenido del archivo config-overrides que según la documentación del paquete react-app-rewired es donde va la configuración para el funcionamiento del template.

// Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra
const {
  override,
  // fixBabelImports,
  addLessLoader,
  useEslintRc,
  addDecoratorsLegacy,
  useBabelRc,
} = require('customize-cra')

// eslint config
const eslintConfig = require('./.eslintrc.js');
const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        ruleUse.options = newOptions
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  )

  config.module.rules = updatedRules;
  return config;
}

module.exports = override(
  addDecoratorsLegacy(),
  useEslintRc(),
  addLessLoader({
    javascriptEnabled: true,
  }),
  useEslintConfig(eslintConfig),
  useBabelRc(),
)

Dicha configuración parece que se tendría que pasar al proyecto de Nextjs que me parece que va en el archivo de next.config.js que solo tiene lo siguiente, ya que soy bastante nuevo en React y Nextjs es el único lugar donde me parece que puede ir dicha configuración por lo tanto lo intenté adaptar de la única manera que se me ocurrió, quedando de la siguiente manera.

const path = require('path')


// eslint config
const eslintConfig = require('./.eslintrc.js');
const useEslintConfig = configRules => config => {
  const updatedRules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        const newOptions = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        ruleUse.options = newOptions
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  )

  config.module.rules = updatedRules;
  return config;
}


module.exports = {
  webpack: useEslintConfig(eslintConfig),
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  
}

Pero me marca el siguiente error.

TypeError: rule.use.some is not a function
Richard
  • 1.5k
  • 3
  • 19
  • 52