Compiling with Laravel Mix

[austintoddj]

Posted on behalf of @prafful98 who filed the following issue:

---

On running npm run dev I am getting the following errors:

ERROR in ./resources/js/canvas-ui/routes.js 1:0-40
Module not found: Error: Can't resolve './views/AllPosts' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 2:0-38
Module not found: Error: Can't resolve './views/AllTags' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 3:0-42
Module not found: Error: Can't resolve './views/AllTopics' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 4:0-40
Module not found: Error: Can't resolve './views/ShowPost' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 5:0-38
Module not found: Error: Can't resolve './views/ShowTag' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 6:0-42
Module not found: Error: Can't resolve './views/ShowTopic' in 'F:\<project-path>\resources\js\canvas-ui'

ERROR in ./resources/js/canvas-ui/routes.js 7:0-40
Module not found: Error: Can't resolve './views/ShowUser' in 'F:\<project-path>\resources\js\canvas-ui'

[austintoddj]

Because Laravel upgraded its base installation to include Laravel Mix 6, there could be an issue when running the canvas:ui Artisan command and compiling for the first time.

If you've run into this issue or something similar, let's step through a few files and make sure everything is right where it should be.

package.json

Check your package.json file and locate the scripts entry. If you're not using Laravel Mix 6, then you won't have access to the Mix CLI. Make sure the following blocks match the version you're running:

// Laravel Mix <v6

"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"

// Laravel Mix >=v6

"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"

webpack.mix.js

The previous version of Laravel Mix didn't have the .vue() API, so make sure the webpack.mix.js entry matches the version you're running:

// Laravel Mix <v6

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

// Laravel Mix >=v6

mix.js('resources/js/canvas-ui/app.js', 'public/js/canvas-ui.js').vue()
    .sass('resources/sass/canvas-ui.scss', 'public/css/canvas-ui.css');

From there, you should be ready to run the compilation again.