Can I use search vue widget in nuxt.js?

🆘 Support
1

I tried to use search widget for vue.js in my nuxt.js project.
But get errors when I try to import widget from libraries

image
image804×547 25.5 KB

2

Het @ggavrilov can you send us the contents of your package.json file so we can take a look at what could be the issue? Thank you!

3

@m.finamor
Here it is

image
image822×835 43.5 KB

4

Hello @ggavrilov ,

I investigated your reported issue: it looks harder to fix than I thought. :frowning:

Something can be done by adding the following custom Webpack configuration to nuxt.config.js:

export default {
  build: {
    extend(config, ctx) {
      config.resolve.extensions.push('.mjs')

      config.module.rules.push(
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      )
    }
  }
}

But that’s not enough to have the project I created working.

I see from the screenshot that you’re working on Vue ^2.6.12: it could help to know the exact version of Vue and the dependencies the project is using: that can make the difference.

5

@sistrall Yes, I tried to customize the webpack in a similar way. But also without success.
My current vue version is
vue@“^2.7.10” from @nuxt/vue-app@2.17.0

6

Hi @ggavrilov

I found a solution: I’m not a Webpack expert, so it’s hard for me to say exactly where the blocking error is coming from, but if I define a couple of aliases for the clients modules, I finally have the project working with no errors:

const path = require('path');

export default {
  build: {
    extend(config) {
      config.resolve.alias["@datocms/cma-client"] =
        path.resolve(__dirname, 'node_modules/@datocms/cma-client/dist/cjs')
      config.resolve.alias["@datocms/cma-client-browser"] =
        path.resolve(__dirname, 'node_modules/@datocms/cma-client-browser/dist/cjs')
      
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },
}

With that Webpack config in place, I’m able to build a working page similar to the one available in this example. :slight_smile: