vue-router Failed to resolve async component default: ChunkLoadError: Loading chunk vendors~demo failed

Question

I wrote my program with Laravel and Vuejs and it works fine on the localhost, but it gets an error on the host.

Problem:

The program runs well on local host, but when I put it on the host, the following error is appears:

[vue-router] Failed to resolve async component default: ChunkLoadError: Loading chunk vendors~demo failed

ChunkLoadError: "Loading chunk vendors~demo failed.
(missing: http://example.com/vendors~demo.js)"
    requireEnsure http://example.com/js/manifest.js:127
    component webpack-internal:///./resources/js/router.js:56
    resolveAsyncComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1904
    flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1931
    flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1931
    flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1930
    resolveAsyncComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1866
    iterator webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2121
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1847
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1851
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1851
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1848
    iterator webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2140
    _callee$ webpack-internal:///./resources/js/permission.js:109

What I did:

• I assumed that the files might not be properly located on the host, but that was not the problem.
• The next possibility was to update Webpack, but that didn't solve the problem.

Where is the problem?

Answer 1

After several attempts, I used the following command to get the compiled js files, which was a mistake. These are good for development purposes.

npm run watch # npm run development -- --watch

or

yarn watch

Use the following command to get the output:

npm run prod

---

Script in package.json

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --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 --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
...