Unexpected token < with nuxt.js

[tchret]

plugin/feather_icon.js

import Vue from 'vue'
import VueFeatherIcon from 'vue-feather-icon'

Vue.use(VueFeatherIcon)

nuxt.config.js

...
  plugins: [{ src: '~/plugins/feather_icon.js' }],
...

[carcinocron]

I have the same issue. If I try this:

import Vue from 'vue';
import AlertTriangleIcon from 'vue-feather-icon/components/alert-triangle';
Vue.component('AlertTriangleIcon', AlertTriangleIcon);

then I get this:

NuxtServerError
Cannot find module 'vue-feather-icon/components/alert-triangle' from '/home/forge/link-queue/app'

When it was working in nuxt 0.10.

[carcinocron]

This worked:

import AlertTriangleIcon from '~~/node_modules/vue-feather-icon/components/alert-triangle';

[Deleted user]

@InstanceOfMichael indeed 👍 - thank you

[bsthomsen]

Anyone else struggling with this you can create a nuxt plugin with the following code:

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  '~/node_modules/vue-feather-icon/components',
  false,
  /[\w-]+\.vue$/
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName =
    'Feather' + upperFirst(camelCase(fileName.replace(/\.\w+$/, '')))
  Vue.component(componentName, componentConfig.default || componentConfig)
})

[MarcelloTheArcane]

@bsthomsen I had to use this because the components were named like Feather./<...>

import Vue from 'vue'

const requireComponent = require.context(
  '~/node_modules/vue-feather-icon/components',
  false,
  /[\w-]+\.vue$/
)

requireComponent.keys().forEach((fileName) => {
  const componentConfig = requireComponent(fileName)
  const componentName = 'Feather' + camelCase(fileName.replace(/(^\.\/|\.\w+$)/g, ''))
  Vue.component(componentName, componentConfig.default || componentConfig)
})

function upperFirst (string) {
  return string[0].toLocaleUpperCase() + string.slice(1)
}

function camelCase (string) {
  return string
    .toLocaleLowerCase()
    .split(/[ _-]+/g)
    .reduce((final, section) => {
      final += upperFirst(section)
      return final
    }, '')
}