Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
spidgorny opened this issue Jan 22, 2018 · 6 comments
Labels

Comments

@spidgorny
Copy link

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
Copy link
Author

It may be related to microsoft/TypeScript#9725 but

> tsc index.ts

does not complain about anything.

@fathyb
Copy link
Contributor

fathyb commented Jan 23, 2018

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
Copy link
Author

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
Copy link
Contributor

fathyb commented Jan 23, 2018

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
Copy link

joseluisq commented Jul 5, 2018

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
Copy link

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.

@github-actions github-actions bot added the Stale Inactive issues label Jan 18, 2020
@github-actions github-actions bot closed this as completed Feb 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants