[Vuejs]-Errors and warnings when serving/building with a private npm package in Vue CLI

0👍

It turns out to be a simple solution for me, but admittedly hard to figure out. The problem actually had to do with a require statement to load images in the code of the private package.

The function below was in the private package:

public static get(res: string) {
    return require('@mycompany/ui-library/' + res)
}

Upon running vue-cli-service build or vue-cli-service serve, when Webpack sees this require statement, it apparently feels like it needs to parse/load ALL files, such as declaration files, source maps, readme, etc.

A simple solution was to change the code to explicitly list the file type in the require statement, which causes Webpack to only look for that specific file type:

public static getPNG(res: string) {
    return require('@mycompany/ui-library/' + res + '.png')
}

There are also some ways to make a more flexible require statement, using Webpack’s require.context, to be able to specify a RegEx for the types of files you’d like to load.

Also, below are some related stories I finally found that talk about Webpack trying to load README files. Although, I think my Stackoverflow question will still be relevant as I found the issue in problems loading declaration and source map files.

Nuxt – Module parse failed: Unexpected character '#'

Why does webpack try to parse my readme.md files

Leave a comment