Skip to main content
Aviso eliminado Atraer atención por ComunidadBot
Recompensa finalizada sin una respuesta ganadora por ComunidadBot
Aviso añadido Atraer atención por Richard
Recompensa iniciada por un valor de 50 de reputación por Richard
se añadieron 132 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52
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 &&return rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
     }
  )

 const baseOptionsconfig.module.rules = ruleUse.optionsupdatedRules;
        const baseConfig = baseOptions.baseConfig ||return {config;
}
        const newOptions

module.exports = {
  webpack: useEslintConfig(eslintConfig),
  lessLoaderOptions: {
    useEslintrcjavascriptEnabled: falsetrue,
   },
  sassOptions: {
    ignoreincludePaths: true[path.join(__dirname, 'styles')],
  },
  
}

Dicha configuración ahora me manda el siguiente error en la interfaz pero no en consola

Unhandled Runtime Error

TypeError: _ref.location is undefined

webpack\bootstrap baseConfig(150:0) {@ ...baseConfig,fn

 ...configRules },
148 |       }
        ruleUse.options  hotCurrentParents = newOptions[];
  149 |     return rule

       }
> //150 Rule| not using eslint. Do not modify.
      } elsereturn {__webpack_require__(request);
     151 |  return rule
      };
  152 | }
  )

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


module.exportsObjectFactory = function ObjectFactory(name) {
  webpack:153 useEslintConfig(eslintConfig),
|  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  
}return {

Pero me marcaDe igual manera el tema no se aplica al componente si en el html no contiene el siguiente erroratributo data-kit-theme="dark" quedando de la siguiente manera.

TypeError: rule.use.some is not<html alang="en" functiondata-kit-theme="dark">

Me gustaría que funcione sin eso, pero lo que mas importa es que funcione.

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
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 
        return rule
      
    }
  )

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


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

Dicha configuración ahora me manda el siguiente error en la interfaz pero no en consola

Unhandled Runtime Error

TypeError: _ref.location is undefined

webpack\bootstrap (150:0) @ fn

  148 |                 hotCurrentParents = [];
  149 |             }
> 150 |             return __webpack_require__(request);
  151 |         };
  152 |         var ObjectFactory = function ObjectFactory(name) {
  153 |             return {

De igual manera el tema no se aplica al componente si en el html no contiene el siguiente atributo data-kit-theme="dark" quedando de la siguiente manera.

<html lang="en" data-kit-theme="dark">

Me gustaría que funcione sin eso, pero lo que mas importa es que funcione.

¿Como ¿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 comprocompró, dicho componente se agregaraagregará a un proyecto realizado con Nextjs.

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

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

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

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 intenteintenté adaptar de la única manera que se me ocurrió, quedando de la siguiente manera.

¿Como 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 compro, dicho componente se agregara a un proyecto realizado con Nextjs.

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

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

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

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 intente adaptar de la única manera que se me ocurrió, quedando de la siguiente manera.

¿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.

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?

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.

Información nueva debido a pruevas
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52

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 intente 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

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.

const path = require('path')

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

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 intente 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
Se cambia la pregunta en base a nueva información recolectada
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52
Loading
Añadir etiquetas. Faltaría añadir `react-app-rewired`, pero no tengo reputación suficiente para crearla
Enlace
Loading
Se especifica mejor el problema a solucionar y se proporciona mas información
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52
Loading
Origen Enlace
Richard
  • 1.5k
  • 3
  • 19
  • 52
Loading