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.
const eslintConfig = require('./.eslintrc.js');
. Creo que tiene contenido relevante para su pregunta.customize-cra
, que, a su vez, depende dereact-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.Nextjs
justamente por la configuración dereact-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 enNextjs