search

mrodal / vue-inheritance-loader

Webpack loader to be used along with vue-loader for Single File Components that provides template extension
38 stars 5 forks source link

Laravel 6 Mix errors #17

Open likemusic opened 3 years ago

likemusic commented 3 years ago

When added to webpack.mix.js (according to #4 ):

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: ['vue-inheritance-loader']
            }
        ]
    }
});

this error happens:

root@likemusic:~/ea# docker-compose run --rm node yarn watch
yarn run v1.22.4
$ npm run development -- --watch
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1606504130646-0.5953826234112498/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> @ development /var/www
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

/var/www/node_modules/webpack-cli/bin/cli.js:281
                                throw err;
                                ^

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/var/www/node_modules/vue-loader/lib/plugin-webpack4.js:59:13)
    at webpack (/var/www/node_modules/webpack/lib/webpack.js:51:13)
    at processOptions (/var/www/node_modules/webpack-cli/bin/cli.js:272:16)
    at /var/www/node_modules/webpack-cli/bin/cli.js:364:3
    at Object.parse (/var/www/node_modules/yargs/yargs.js:576:18)
    at /var/www/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/var/www/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Module.require (internal/modules/cjs/loader.js:1022:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/var/www/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ 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 ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-11-27T19_08_55_120Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

As I understand, this is because standard vue-loader still used. Threrefore I have tried to replace in node_modules/laravel-mix/src/components/Vue.js this:

    webpackConfig(webpackConfig) {
        webpackConfig.module.rules.push({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: Config.vue || {}
                }
            ]
        });

        webpackConfig.plugins.push(new VueLoaderPlugin());

        this.updateCssLoaders(webpackConfig);
    }

with that:

    webpackConfig(webpackConfig) {
        webpackConfig.module.rules.push({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-inheritance-loader',
                    options: Config.vue || {}
                }
            ]
        });

//        webpackConfig.plugins.push(new VueLoaderPlugin());

        this.updateCssLoaders(webpackConfig);

I've got many errors like this:

ERROR in ./resources/js/Domain/Common/Controls/Button/ButtonCreate.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseBootstrapButtonInfo from "../Base/BootstrapButton/BaseBootstrapButtonInfo";
|
 @ ./resources/js/app.js 47:31-86
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/Domain/Invoices/ExpenseConformities/Dkv/DkvExpenseConformityForm.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseExpenseConformityForm from "../Base/BaseExpenseConformityForm";
|
 @ ./resources/js/app.js 137:45-122
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/Domain/Invoices/ExpenseConformities/Bank/BankExpenseConformityForm.vue 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-inheritance-loader/src/index.js
You may need an additional loader to handle the result of these loaders.
> <script>
|     import BaseExpenseConformityForm from "../Base/BaseExpenseConformityForm";
|
 @ ./resources/js/app.js 140:46-125
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Any ideas how to fix? Does anyone use this package with laravel mix?

likemusic commented 3 years ago

According to Vue Loader docs:

The plugin is required! It is responsible for cloning any other rules you have defined and applying them to the corresponding language blocks in .vue files. For example, if you have a rule matching /\.js$/, it will be applied to <script> blocks in .vue files.

When used vue-inheritance-loader used with VueLoaderPlugin like this:

    webpackConfig(webpackConfig) {
        webpackConfig.module.rules.push({
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-inheritance-loader',
                    options: Config.vue || {}
                }
            ]
        });

       webpackConfig.plugins.push(new VueLoaderPlugin());

        this.updateCssLoaders(webpackConfig);
    }

I've got the error:

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.

Full log:

yarn run v1.22.4
$ npm run development
npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1606516686175-0.9667967946627836/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> @ development /var/www
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/var/www/node_modules/webpack-cli/bin/cli.js:281
                                throw err;
                                ^

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/var/www/node_modules/vue-loader/lib/plugin-webpack4.js:59:13)
    at webpack (/var/www/node_modules/webpack/lib/webpack.js:51:13)
    at processOptions (/var/www/node_modules/webpack-cli/bin/cli.js:272:16)
    at /var/www/node_modules/webpack-cli/bin/cli.js:364:3
    at Object.parse (/var/www/node_modules/yargs/yargs.js:576:18)
    at /var/www/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/var/www/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Module.require (internal/modules/cjs/loader.js:1022:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/var/www/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1118:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.Module._load (internal/modules/cjs/loader.js:875:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-11-27T22_38_10_926Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any ideas how to fix this?

likemusic commented 3 years ago

Finally I have created my own loader - vue-template-extends - that not replaced the default vue-loader.