es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Laravel Mix: ruta personalizada de node_modules

28 Jul, 2023 Programación

Cuando ejecuto npx mix, obtengo el error:

ERROR in ../src/js/components/TestComponent.vue?vue&type=template&id=0ac5fdef (./node<em>modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node</em>modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!../src/js/components/TestComponent.vue?vue&type=template&id=0ac5fdef) 1:0-126
Module not found: Error: Can't resolve 'vue' in '/var/www/project/src/js/components'

<p>ERROR in ../src/js/app.js 1:0-32
Module not found: Error: Can't resolve 'vue' in '/var/www/project/src/js'</p>

<p>webpack compiled with 2 errors

Mi estructura de carpetas se ve así:

buildchain
 - node_modules
 - package.json
 - tailwind.config.js
 - webpack.mix.js

cms
docker-config
src
  - js
    - app.js

app.js

import { createApp } from "vue";

import TestComponent from "./components/TestComponent.vue";

const app = createApp({
    components: {
      TestComponent
    }
  });

app.mount("#app");

webpack.mix.js

// webpack.mix.js

let mix = require('laravel-mix');

let path = require('path');

mix.js("../src/js/app.js", "js")
    .vue()
    .postCss('../src/css/app.css', 'css', [
        require("tailwindcss"),
    ])
    .setPublicPath('../cms/web/assets')

Si cambio la importación de vue a import { createApp } from "../../buildchain/node_modules/vue";, el error desaparece, pero aún persiste en TestComponent.vue.

¿Cómo puedo hacer que mis archivos encuentren automáticamente node_modules e importen correctamente?

Edit:

Intenté:

mix.webpackConfig({
    resolve: {
        modules: ['node_modules']
    }
});

Pero aún obtengo el error.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema está relacionado con la configuración de Webpack respecto a la resolución de módulos. Por defecto, Webpack busca los módulos en la carpeta node_modules del directorio actual del proyecto. Sin embargo, por alguna razón, no está resolviendo correctamente el módulo vue en este caso.

    Una posible solución es especificar explícitamente el directorio node_modules en la configuración de Webpack. En webpack.mix.js, agrega el siguiente código:

    mix.webpackConfig({
  resolve: {
    modules: ['node_modules']
  }
});

    Esto indicará a Webpack que busque los módulos en el directorio node_modules relativo al directorio del proyecto.

    Si el error persiste, también puedes intentar especificar la ruta absoluta al directorio node_modules. Por ejemplo:

    mix.webpackConfig({
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')]
  }
});

    Esto establecerá explícitamente que el directorio node_modules se resuelva desde el directorio raíz del proyecto.

Comments are closed.