Laravel-mix: vue@next problem

[Ojvar]

Hi
I created the "src" folder, that contains two files:

• main.ts
• index.html

My webpack.mix.file contains:
let mix = require("laravel-mix");
mix.js("./src/main.ts", "public/");

main.ts file contains:
import { createApp } from "vue";

createApp({
data: () => ({
name: "ali",
}),
}).mount("#app");

**I installed vue@next, then I ran "npm run watch" command.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve 'vue' in '/path/of/source/src'
@ ./src/main.ts 1:0-32 3:0-9
@ multi ./src/main.ts

How can i resolve that?

[rossgillies]

Adding .vue() to mix.js("./src/main.ts", "public/"); should fix that

[Ojvar]

Adding .vue() to mix.js("./src/main.ts", "public/"); should fix that

I did this:
mix.js("./src/frontend/scripts/pages/home.ts", "js/pages").vue();
but I get another error message

Is it wrong?

Error message:

AssertionError [ERR_ASSERTION]: mix.js() is missing required parameter 1: entry
at Function.js (/my-source-path/node_modules/laravel-mix/src/Assert.js:13:9)
at JavaScript.register (/my-source-path/node_modules/laravel-mix/src/components/JavaScript.js:40:16)
at Api.mix. [as vue] (/my-source-path/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
at Object. (/my-source-path/webpack.mix.js:56:5)
at Module._compile (/my-source-path/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (/my-source-path/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object. (/my-source-path/node_modules/laravel-mix/setup/webpack.config.js:12:1)
at Module._compile (/my-source-path/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (/my-source-path/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at WEBPACK_OPTIONS (/my-source-path/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
at requireConfig (/my-source-path/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
at /my-source-path/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
at Array.forEach ()
at module.exports (/my-source-path/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
at /my-source-path/node_modules/webpack-cli/bin/cli.js:71:45
at Object.parse (/my-source-path/node_modules/webpack-cli/node_modules/yargs/yargs.js:576:18)
at /my-source-path/node_modules/webpack-cli/bin/cli.js:49:8
at Object. (/my-source-path/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (/my-source-path/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}

[Ojvar]

My project link:
https://github.com/ojvar/sunset-iv

Please get a clone (use core_dev branch)
and run: npm run watch

Don't forget: you should have mongod running

thanks

[ExpDev07]

@Ojvar mix.vue({ version: 3 })

[Ojvar]

I did it, but I'm facing a problem again :D
when I add mix.vue({ version: 3 })
npm run dev command show these results:

▶ npm run dev

[email protected] dev /sourcePath/sunset-iv
npm run development

[email protected] development /sourcePath/sunset-iv
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/sourcePath/sunset-iv/node_modules/webpack-cli/bin/cli.js:93
throw err;
^

AssertionError [ERR_ASSERTION]: mix.js() is missing required parameter 1: entry
at Function.js (/sourcePath/sunset-iv/node_modules/laravel-mix/src/Assert.js:13:9)
at JavaScript.register (/sourcePath/sunset-iv/node_modules/laravel-mix/src/components/JavaScript.js:40:16)
at Api.mix. [as vue] (/sourcePath/sunset-iv/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
at Object. (/sourcePath/sunset-iv/webpack.mix.js:54:5)
at Module._compile (/sourcePath/sunset-iv/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
....

[benjivm]

I'm also getting this on Vue 3. Removing the vue({ version: 3}) installs vue-template-compiler and then the error from the first post: Module not found: Error: Can't resolve 'vue' [...]

Is anybody using Vue 3 with Laravel Mix?

webpack.mix.js

mix.vue({ version: 3})
    .js('resources/js/site.js', 'public/js')
    .sass('resources/scss/site.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('tailwind.config.js')
        ],
    });

package.json

"devDependencies": {
    "@vue/compiler-sfc": "^3.0.1",
    "cross-env": "^7.0",
    "laravel-mix": "^5.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.3",
    "tailwindcss": "^1.9.5",
    "vue": "^3.0.1"
}

[rossgillies]

@benjivm Your using laravel-mix 5, you need to install the 6 beta to use vue 3 npm i laravel-mix@next

[JeffreyWay]

@Ojvar You'll need to upgrade to the Mix v6 beta if you want to use Vue 3.

[iwasherefirst2]

I don't want to use Vue 3, but I have the same issue. Using a fresh Laravel 8 application and using

mix.js('resources/js/app.js', 'public/js')
   .vue();

as stated in the docs will fail with

AssertionError [ERR_ASSERTION]: mix.js() is missing required parameter 1: entry

Using npm i laravel-mix@next fixes it, but either the docs should be updated, or the laravel-mix build in Laravel I guess.

[JeffreyWay]

@iwasherefirst2 You encountered that assertion error because you didn't have Mix v6 installed.

All fresh installs of Laravel will pull in v6.

https://github.com/laravel/laravel/blob/8.x/package.json#L14

[Umar-malik007]

I've faced same error on laravel 8 when installing vue on it.

It's actually adding content in webpack.mix.js file like vue().

You encountered that assertion error because you didn't have Mix v6 installed.

So to update mix v5 v6 beta, run npm i laravel-mix@next

but if you don't want to update or use vue 3

the do the following:

replace vue() to the following:

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');

then run npm run watch

[ImFranQ]

i had same issue with react.
i solve changin js method by 'react'.

i changed:

mix.js('resources/js/app.js', 'public/js')
  .react()
  .sass('resources/sass/app.scss', 'public/css');

by

mix.react('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css');

and :rocket: