When I run next build
in my project I got this error
In my ./src/modules/materials/HighIndex156/HighIndex156.tsx I got:
import React from 'react';
import { Typography, Grid, Box } from "@mui/material";
import { useRouter } from 'next/router';
import Image from "next/image";
import TRANSLATIONS from "@constants/locales";
import useStyles from './HighIndex156.styles';
import useGlobalStyles from "@styles/globals";
import highIndex156_glass from "@images/AltoIndice_Vidrio.png";
import highIndex156_logo from "@images/AltoInd_Logo.png";
const HighIndex156 = () => {
const classes = useStyles();
const globalClasses = useGlobalStyles();
const locale = useRouter().locale!;
return (
<>
<Grid container>
<Grid item md={6} xs={12} sm={6} className={[classes.first_section_left_container].join(" ")}>
<Box className={classes.image_container}>
<div>
<Image
data-aos="fade-in"
src={highIndex156_logo}
alt="high index 156 logo home"
/>
</div>
<Image
data-aos="fade-in"
src={highIndex156_glass}
alt="high index 156 background home"
/>
</Box>
</Grid>
<Grid item md={6} xs={12} sm={6} className={classes.first_section_right_container}>
<Box className={[classes.first_section_title_container, classes.font_color].join(" ")}>
<Typography
variant="h1"
component="h2"
className={classes.light_font}
data-aos="fade-left"
>
{TRANSLATIONS[locale]["materials.trivex.section1.title"]}
</Typography>
<Typography style={{ fontWeight: 'bold' }} marginTop={4} data-aos="fade-in" paragraph className={[globalClasses.paragraph, classes.font_color].join(" ")}>
{TRANSLATIONS[locale]["materials.trivex.section1.paragraph1"]}
</Typography>
<Typography marginTop={4} data-aos="fade-in" paragraph className={[globalClasses.paragraph, classes.font_color].join(" ")}>
{TRANSLATIONS[locale]["materials.trivex.section1.paragraph2"]}
</Typography>
<Typography marginTop={4} data-aos="fade-in" paragraph className={[globalClasses.paragraph, classes.font_color].join(" ")}>
{TRANSLATIONS[locale]["materials.trivex.section1.paragraph3"]}
</Typography>
<Typography marginTop={4} data-aos="fade-in" paragraph className={[globalClasses.paragraph, classes.font_color].join(" ")}>
{TRANSLATIONS[locale]["materials.trivex.section1.paragraph4"]}
</Typography>
</Box>
</Grid>
</Grid>
</>
);
};
HighIndex156.propTypes = {}
export default HighIndex156;
In my ./src/modules/materials/index.tsx I got:
import Materials from "./Materials/Materials";
import OurMaterials from "./Materials/OurMaterials/OurMaterials";
import Parasol from "./Parasol/Parasol";
import Transform from "./Parasol/Transform/Transform";
import Bblock from "./Bblock/Bblock";
import NewTecnology from "./Bblock/NewTecnology/NewTecnology";
import Cr39 from './Cr39/Cr39';
import LearnMore from './LearnMore/LearnMore';
import HighIndex156 from './HighIndex156/HighIndex156';
import Trivex from "./Trivex/Trivex";
import Rewriting from "./Trivex/Rewriting/Rewriting";
import Trivex160 from "./Trivex160/Trivex160";
import Polarized from './Polarized/Polarized';
export {
Materials,
OurMaterials,
Bblock,
NewTecnology,
Parasol,
Transform,
Trivex,
Rewriting,
Trivex160,
Polarized,
HighIndex156,
Cr39,
LearnMore,
};
And in my ./src/pages/materials/index.tsx I got:
import React from 'react';
import type { NextPage } from "next";
import { Layout } from "@components";
import { Materials, OurMaterials } from "@modules/materials";
const Materiales: NextPage = () => {
return (
<Layout>
<OurMaterials />
<Materials />
</Layout>
);
};
export default Materiales;
I have changed the size of the image (before 4167x223 after 216x11) and doesn't fix it.
When I run npm run build
, I got different response: