How do I get typescript + webpack + vuejs to find packages in my node_modules/older/lib/ directory?

Question

I'm trying to turn an older typescript project into a library for a new vue.js project. The older package is configured to output to ./lib/ with tsconfig.json, and package.json includes all of the "this is where my library is" options I can think of. tsc compiles everything to lib/ in the older package, and npm link is used to connect the packages together.

My problem is that no matter what I've tried, I can't seem to remove the lib/ segment from my imports, like import { baz } from "older/common/thing" instead of import { baz } from "older/lib/common/thing". Should I just live with it? Or is there something else I should be doing for prettier imports?

package.json (partial)

{
    "main": "./lib/index.js",
    "module": "./lib/index.js",
    "types": "./lib/index.d.ts",
}

tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "sourceMap": true,
    "typeRoots": [
      "typings",
      "node_modules/@types"
    ],
    "outDir": "./lib",
    "declaration": true
  },
  "include": [
    "app/source/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

I can't tell you how to do it but I think it is possible. The `import` is used by typescript and webpack, so you should tell typescript and webpack how to resolve these modules. Maybe with a code source / example somewhere, it would be easier to help you. — HTN, Apr 25 '19 at 08:30

joeforker · Answer 1 · 2019-04-25T20:46:21.347

It looks like it is nigh impossible to remove the extra /lib/ path when using es6 modules and a JavaScript build system on top of Typescript. One StackOverflow answer mentioned something about that feature being explicitly rejected from the ECMA standard. Instead, libraries like lodash-es build a second output that puts everything in the root directory of the package, adjacent to package.json and tsconfig.json. Works for me since we probably need different build settings for the library and the application anyway.

I wound up putting a second tsconfig.json and package.json in ./lib/, and just instructed tsc to pull the sources from ../app/source/. The new program will npm link to the package name for the library instead of the application.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./",
    "rootDir": "../app/source",
    "baseUrl": "./"
  },
  "include": [
    "../app/source/**/*"
  ],
}

How do I get typescript + webpack + vuejs to find packages in my node_modules/older/lib/ directory?

1 Answers1