TypeScript import '@types/handlebars'; leads to "Cannot resolve dependency '@types/handlebars'"

[spidgorny]

Choose one: 🐛 bug report

// index.ts
import '@types/handlebars';

parsel index.ts

X Cannot resolve dependency '@types/handlebars'

🎛 Configuration (.babelrc, package.json, cli command)

Babel: no

🤔 Expected Behavior

The import command tells TypeScript to include a declaration file. Without this line any reference to Handlebars module are highlighted as invalid (PhpStorm). Even if the JS file for handlebars is imported with

import 'handlebars/dist/handlebars.min.js';

😯 Current Behavior

parcel entry.html
Server running at http://localhost:1234
× RenderOpportunities.ts:3:8: Cannot resolve dependency '@types/handlebars'
1 | 'use strict';
2 |
3 | import '@types/handlebars';
| ^

💁 Possible Solution

No idea.

🔦 Context

It's hard/impossible to continue working with parcel-bundler and Handlebars library with TypeScript which requires the declaration file to be imported.

💻 Code Sample

See above.

🌍 Your Environment

parcel -V
1.4.1

node -v
v9.3.0

npm -v
5.6.0

yarn -v
1.3.2

ver
Microsoft Windows [Version 6.1.7601]

Thanks.

[spidgorny]

It may be related to microsoft/TypeScript#9725 but

> tsc index.ts

does not complain about anything.

[fathyb]

It's due to the fact that Parcel doesn't use the TypeScript compiler but the the transpiler, it doesn't do import ellidation or any type-checking related transformations.

Solution:

• Remove import '@types/handlebars' from index.ts
• Add this to your compileOptions:

  {
    "compilerOptions": {
      // ...
      "types": ["handlebars"]
    }
  }

[spidgorny]

Thank you. This helped a lot. I have a different (but related to handlebars) issue.

$ parcel entry.html
Server running at http://localhost:1234
×  ...\node_modules\handlebars\lib\index.js: Could not statically evaluate fs call

AFAIK, the issue is that handlebars module contains node fs call which is not available in the browser target.
Webpack has a workaround for this. They define an alias for 'handlebars' module which point to a different file.

Any suggestion for Parcel?

My import code

import * as Handlebars from 'handlebars';

Thanks.

[fathyb]

I created #587 to warn instead of throwing when a fs call cannot be statically evaluated, you can try it while it's being reviewed.

If it does not work I'm not aware of a resolve alias feature in Parcel, the TypeScript plugin supports TypeScript path rewriting using the paths compiler option, you can use it if the handlebars typings declares the handlebars/dist/handlebars.min.js module.

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "handlebars": ["handlebars/dist/handlebars.min.js"]
     }
  }
}

[joseluisq]

I got a similar error when I use custom paths:

tsconfig

"baseUrl": "./",
"paths": {
  "@src/*": [
    "src/*"
  ]
},

output

yarn build                                                                              (2s 663ms) │
yarn run v1.5.1
$ env NODE_ENV=production parcel build --no-source-maps --experimental-scope-hoisting --detailed-report --public-url ./
🚨  /home/joseluisq/myapp/src/main.tsx:2:37: Cannot resolve dependency '@src/app'
    at Resolver.resolve (/home/joseluisq/myapp/node_modules/parcel-bundler/src/Resolver.js:70:17)
    at <anonymous>
error An unexpected error occurred: "Command failed.

But in development mode curiously works.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.