0

Llevo ya varios días volviéndome loco. Tengo un proyecto con vue3 que se implementa en amplify desde bitbucket. No hay pipeline ni nada, simplemente el amplify.yml que no lo tengo siquiera en el proyecto.

La cosa es que llega hasta el build, me dice que build ok y luego falla la implementación sin mas información. No hay ningún error en el log ni nada...

Poniendo un exit al build si que veo que algo esta fallando, pero no se me ocurre que porras puede ser.

2024-08-19T00:18:42.674Z [INFO]: ✓ built in 3.48s
2024-08-19T00:18:42.702Z [ERROR]: !!! Build failed
2024-08-19T00:18:42.702Z [ERROR]: !!! Error: Command failed with exit code 1
2024-08-19T00:18:42.702Z [INFO]: # Starting environment caching...
2024-08-19T00:18:42.703Z [INFO]: # Uploading environment cache artifact...
2024-08-19T00:18:42.776Z [INFO]: # Uploaded environment cache artifact
2024-08-19T00:18:42.777Z [INFO]: # Environment caching completed

Este es mi fichero amplify.yml

Para ver el exit el build estaba así:

- npm run build || echo "Error en el build" && exit 1

Ahora el fichero es este:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - rm -rf node_modules
        - rm -f package-lock.json
        - npm install
        - npm ci
    build:
      commands:
        - echo "VITE_API_URL=$API_URL" >> .env 
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Tengo la variable de entorno configurada para sustituir el fichero de enviroment, así no tengo que comitearlo.

Cuando ejecuto local buildea bien, levanta bien el vite e incluso haciendo un npx serve -s dist carga bien la web con sus redirecciones etc.

La rama de main me ejecuta bien, pero ha esta se le han metido muchos cambios. Hay algunos ficheros que me hacen sospechar, pero no consigo verlo. Solo me llaman mas la atención porque tocan la variable de la API.

/src/types/custom.d.ts

/**
 * Module declaration for importing SVG files as URLs.
 * This allows you to import SVGs with the '?url' suffix,
 * treating them as strings (URL paths).
 */
declare module "*.svg?url" {
  const content: string;
  export default content;
}

/**
 * Module declaration for importing SVG files as raw content or components.
 * This allows you to import SVGs directly, treating them as strings or Vue components.
 */
declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.jpg" {
  const value: string;
  export default value;
}

/**
 * Interface for environment variables.
 * Includes only variables prefixed with VITE_ and are accessible in the client-side code.
 */
interface ImportMetaEnv {
  readonly VITE_API_URL: string;
}

/**
 * Extension of the ImportMeta interface to include environment variables.
 */
interface ImportMeta {
  readonly env: ImportMetaEnv;
}

declare module "flush-promises" {
  const flushPromises: () => Promise<void>;
  export default flushPromises;
}

/src/services/axiosInstance.ts

import axios from 'axios';

/**
 * Creates an Axios instance with base configuration for API requests.
 * Includes request and response interceptors for handling authentication and errors.
 */
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL, // Base URL from Vite environment variables
  timeout: 10000, // 10-second timeout for requests
});

/**
 * Request interceptor to add the authentication token to the headers if available.
 * @param config - Axios request configuration object.
 * @returns The modified config with the Authorization header if the token is present.
 */
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('userSession');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

/**
 * Response interceptor to handle global errors.
 * @param response - Axios response object.
 * @returns The response if successful, or rejects with an error.
 */
axiosInstance.interceptors.response.use(
  response => response,
  error => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

He revisado mil veces los Key sensitive y comparando ramas y tampoco nada. Le he pasado EsLint para revisar los imports y tampoco.

Dejo por aquí los config de vite, ts y main por si son de utilidad también:

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import svgLoader from "vite-svg-loader";
import path from "path";

export default defineConfig({
  plugins: [
    vue(),
    VueI18nPlugin({
      include: path.resolve(__dirname, "./src/locales/**"),
    }),
    svgLoader(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./setupTests.js",
    transformMode: {
      web: [/\.[jt]sx$/],
    },
  },
  root: ".",
});

vite-env.d.ts

/// <reference types="vite/client" />

    declare module "*.vue" {
      import type { DefineComponent } from "vue";
    
      const component: DefineComponent<{}, {}, any>;
      export default component;
    }

**tsconfig.json**

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "types": ["vitest/globals","vitest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "baseUrl": ".", 
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

/src/main.js

import { createApp } from "vue";
import axios from "axios";
import { createStore } from 'vuex';
import router from "./router";
import i18n from './i18n';
import App from "./App.vue";

import "./styles/style.css";
import "@mdi/font/css/materialdesignicons.css";
import "@fortawesome/fontawesome-free/css/all.css";

const axiosInstance = axios.create({
  withCredentials: true,
});

const store = createStore({
  state() {
    return {
      isLoading: false,
    };
  },
  mutations: {
    setLoading(state, value) {
      state.isLoading = value;
    },
  },
});

const globalData = {
  $sessionData: [],
  $axios: { ...axiosInstance },
  updateSessionData(newData) {
    this.$sessionData = newData;
  },
};

axiosInstance.interceptors.request.use((config) => {
  store.commit('setLoading', true);
  return config;
}, (error) => {
  store.commit('setLoading', false);
  return Promise.reject(error);
});

axiosInstance.interceptors.response.use((response) => {
  store.commit('setLoading', false);
  return response;
}, (error) => {
  store.commit('setLoading', false);
  return Promise.reject(error);
});

const app = createApp(App);

app.provide('globalData', globalData);
app.config.globalProperties.$globalData = globalData;

app.use(router);
app.use(store);
app.use(i18n);

app.mount("#app");

export { globalData };

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.