Skip to content Skip to sidebar Skip to footer

Error Importing Local Npm Package

We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled

Solution 1:

This was caused by a mixture of two separate issues:

  • The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
  • When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
  • The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)

We have decided we will be using a git submodule for these files going forward

Post a Comment for "Error Importing Local Npm Package"