0

When I run next build in my project I got this error

terminal 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:

terminal response

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34

0 Answers0