Errors and warnings when serving/building with a private npm package in Vue CLI

Question

I have a Vue project for my company where I am importing some UI helpers that reside in a private npm package that I also created.

An example import:

import { UIPosition } from '@mycompany/ui-library'

However, when I run a build or serve command for my Vue app (with vue-cli-service build or vue-cli-service serve script), I see the following warnings in the command line:

Declaration file warning (I see a warning for every *.d.ts in my private package, but not for any other package in node_modules):

 warning  in ./node_modules/@mycompany/ui-library/library/utils/UIPosition.d.ts

Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. Output generation failed
    at Object.transpileModule (/myapp/node_modules/typescript/lib/typescript.js:116864:29)
    at getTranspilationEmit (/myapp/node_modules/ts-loader/dist/index.js:318:74)
    at successLoader (/myapp/node_modules/ts-loader/dist/index.js:66:15)
    at Object.loader (/myapp/node_modules/ts-loader/dist/index.js:22:12)

Map file warning (I see a warning only for source map files in my private package, not for any other project in node_modules):

 warning  in ./node_modules/@mycompany/ui-library/index.js.map

Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,..."}

I also created the @mycompany/ui-library private package, so I have the ability to make edits. I have dug around in articles and forums and haven't found out exactly what is the ideal setup for private packages.

A few questions:

• When you import a private package, should it be picking up declaration (.d.ts) files or map (.js.map) files and trying to compile them, per the above warnings?
• Should I be ignoring these files as compilation inputs somehow in my project setup?
• When I create a private package, should I output source map files and declaration files? (It seems like I should be outputting them since I at least see declaration files in other popular projects in node_modules, which enables type inference for anyone working with the packages in their IDEs.)

Answer 1

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