Laravel Mix: ruta personalizada de node_modules
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.
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ódulovue
en este caso.Una posible solución es especificar explícitamente el directorio
node_modules
en la configuración de Webpack. Enwebpack.mix.js
, agrega el siguiente código: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:Esto establecerá explícitamente que el directorio
node_modules
se resuelva desde el directorio raíz del proyecto.