0

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

3
  • Hay un fichero que se incluye aquí: const eslintConfig = require('./.eslintrc.js'); . Creo que tiene contenido relevante para su pregunta.
    – emi
    Commented el 9 nov. 2020 a las 20:42
  • Parece que el paquete depende de customize-cra, que, a su vez, depende de react-app-rewired. Puedo intentar ayudarle con esto, pero la mejor opción sería pedirle al desarrollador que le haga un componente compatible con la configuración que usa usted de Nextjs.
    – emi
    Commented el 9 nov. 2020 a las 20:44
  • @emi Si de hecho ya tengo dicho archivo de configuración he realizado varias pruebas, pero no logro hacer que funcione el componente en Nextjs justamente por la configuración de react-app-rewired, podría solicitar a quien compro dicho template que envíe mensajes a los desarrolladores a ver si aceptan dicha petición o brinden alguna configuración para su uso en Nextjs
    – Richard
    Commented el 10 nov. 2020 a las 0:20

2 respuestas 2

0

react-app-rewired sirve para modificar configuraciones de Webpack que Create React App no permite modificar por defecto. Usted debería comprobar qué configuraciones se modifican y ver cómo hacer lo mismo con Next.js. El mismo creador de react-app-rewired dice en su repositorio que usa Next.js, así que probablemente podrá hacerlo sin demasiado problema.

2
  • Si, he revisado e intentado implementarlo pero no me reconoce el comando de ejecución npm start, solo npm run dev para iniciar el projecto de nextjs, pero no se como cambiar dicha configuración.
    – Richard
    Commented el 9 nov. 2020 a las 14:59
  • He cambiado mi pregunta al igual que he agregado nueva información basada en la investigación y pruebas que he estado realizando.
    – Richard
    Commented el 9 nov. 2020 a las 15:43
0

De momento lo que me funciono fue modificar next.config.js e implementar la configuración del proyecto, realizando unos pequeños cambios. 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 => {
    return rule;
  });
  config.module.rules = updatedRules;
  return config;
};

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

teniendo lo siguiente en el archivo .eslintrc.js

module.exports = {
  extends: ["react-app", "airbnb", "prettier"],
  rules: {
    "react/jsx-filename-extension": [
      1,
      {
        extensions: [".js", ".jsx"]
      }
    ],
    "no-useless-escape": "off",
    "no-script-url": "off",
    "jsx-a11y/anchor-has-content": "off",
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-template-curly-in-string": "off",
    "react/prop-types": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-one-expression-per-line": 0,
    "linebreak-style": 0,
    "react/jsx-wrap-multilines": 0,
    "react/no-danger": 0,
    "react/forbid-prop-types": 0,
    "no-use-before-define": 0,
    "no-param-reassign": 0,
    "import/no-unresolved": 0,
    "no-console": 0,
    "react/no-multi-comp": 0
    // "no-unused-vars": 0
  },
  parserOptions: {
    ecmaFeatures: {
      legacyDecorators: true
    }
  }
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.