Cannot set properties of undefined (setting 'shadowMode') at setLoaderRulesForShadowMode

[RaphaelSiller]

Describe the bug
When compiling my component, I get the following error:

 FATAL  Cannot set properties of undefined (setting 'shadowMode')
  at setLoaderRulesForShadowMode (node_modules/nuxt-custom-elements/utils/webpack.js:54:38)
  at getWebpackConfig (node_modules/nuxt-custom-elements/utils/webpack.js:98:13)
  at node_modules/nuxt-custom-elements/utils/webpack.js:262:22
  at Array.map (<anonymous>)
  at node_modules/nuxt-custom-elements/utils/webpack.js:262:8
  at Array.map (<anonymous>)
  at prepareConfigs (node_modules/nuxt-custom-elements/utils/webpack.js:260:49)
  at node_modules/nuxt-custom-elements/module.js:58:29
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:959)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:333:5)
  at async ensureBuild (node_modules/@nuxt/cli/dist/cli-generate.js:145:3)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)

console.log(vueLoaderRule) after line 51 gives this:

{
  test: /\.vue$/i,
  use: [
    {
      loader: '/path/to/project/node_modules/@nuxt/components/dist/loader.js',
      options: [Object]
    },
    {
      loader: '/path/to/project/node_modules/vue-loader/lib/index.js',
      options: [Object]
    }
  ]
}

I was able to fix it by changing vueLoaderRule.options.shadowMode = true; at line 54 to vueLoaderRule.use.find((temp)=>temp.loader.includes('/node_modules/vue-loader/')).options.shadowMode = true;

Additional context

• I'm currently on v1.9.1
• I saw that a similar fix is already on the beta branch (vueLoaderRule.use[0].options.shadowMode = true;), but that didn't work, because vue-loader was at index 1 and not 0

[ThornWalli]

Hello @RaphaelSiller,

you are still using nuxt@2?

beta is only for nuxt@3.

could you insert these lines under line 51 at your local?

if ('use' in vueLoaderRule) {
  vueLoaderRule = vueLoaderRule.use.find(rule => rule.loader === 'vue-loader');
} else if (!vueLoaderRule?.options) {
  vueLoaderRule = null;
}

This could be the solution, there comes a depth I didn't expect.

function setLoaderRulesForShadowMode (rules) {
  let vueLoaderRule = rules.find(({ test }) => test.test('.vue'));

  if ('use' in vueLoaderRule) {
    vueLoaderRule = vueLoaderRule.use.find(rule => rule.loader === 'vue-loader');
  } else if (!vueLoaderRule?.options) {
    vueLoaderRule = null;
  }

  if (vueLoaderRule) {
    vueLoaderRule.options.shadowMode = true;
  } else {
    throw new Error('Can\'t find `vue-loader`…');
  }

[RaphaelSiller]

Hey,

yeah, I'm still on nuxt@2. Thanks for clarifying.

I had to edit one small thing in your code. loader isn't the name, but the absolute path.
After changing rule.loader === 'vue-loader' to rule.loader.includes('vue-loader') the function works like a charm now.

Here's my version:

function setLoaderRulesForShadowMode (rules) {
  let vueLoaderRule = rules.find(({ test }) => test.test('.vue'));

  if ('use' in vueLoaderRule) {
    vueLoaderRule = vueLoaderRule.use.find(rule => rule.loader.includes('vue-loader'));
  } else if (!vueLoaderRule?.options) {
    vueLoaderRule = null;
  }

  if (vueLoaderRule) {
    vueLoaderRule.options.shadowMode = true;
  } else {
    throw new Error('Can\'t find `vue-loader`…');
  }

Thank you very much for your help.

[ThornWalli]

@RaphaelSiller Fix is deployed!