CODEWITHSUNDEEP
typescriptvisual-studio-2015
Whit Waldo
Whit Waldo

Reputation: 5207

Cannot find name 'require' in Typescript

Based on the recommendations, this question has been asked many times, but I'm not seeing anything in the answers that solves my issue.

I have created a new ASP.NET Core project in Visual Studio 2015 with the goal of serving an Angular2 TypeScript app and using Webpack to package the scripts. I'm repurposing some of my components from a Webstorm project (same thing - Angular2 and TypeScript), and it works fine there.

Unfortunately, I just copied out the first component and found that I'm running into an error that's not solving itself. In the Visual Studio IDE, I'm getting red squigglies under "require" and the mouseover text reads "Cannot find name 'require'. Cannot resolve symbol 'require'".

Here's the offending component text (the require syntax being used for webpack/Angular2):

@Component({
    selector: "myComponent",
    template: require("./myComponent.html"),
    styles: [require("./myComponent.css")]
})

Similarly, I get the same issue with require with the following snippet too:

const sortBy = require('lodash.sortby');

Now, other posts have an answer that suggests that I add typeRoots and types to the tsconfig.json's compilerOptions. I have that as seen here:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node",
      "lodash.sortby"
    ]
  }
}

Of course, I've added these packages to my package.json:

{
  "dependencies": {
    "lodash.sortby": "^4.7.0"
  },
  "devDependencies": {
    "@types/node": "^6.0.60",
    "@types/lodash.sortby": "^4.7.0"
  }
}

And I've successfully npm installed these (and many other files).

The latter link above indicates that I could just put the following at the top of the file, but that seems rather hacky and isn't something I really want to persist indefinitely in the solution, though admittedly, it does resolve the issue:

declare var require: any

As described before, this use of require works fine within Webstorm and I've got the same configurations otherwise between the two IDEs. What's going on with Visual Studio that this isn't just working?

Thanks!

Edit:

I've since learned about the existence of the angular2-template-loader. Since I was looking to use Webpack with Angular2 here, that's why I was using require (per their docs), but this angular2-template-loader is responsible for letting you leave the templateUrl and styleUrls as relative references (and thus not using require to point at the files) and will just swap out everything for you during the packing process.

Using require anywhere else still requires the workaround as described in Gary's link to the Typescript Modules.

Upvotes: 1

Views: 3882

Answers (2)

Mike Eshva
Mike Eshva

Reputation: 1160

I've solved this kind of problem by installing the latest (for the moment) version of TypeScript for Visual Studio 2015. Currently it is 2.1.5. And update ReSharper, if you use it to the version 2016.3.2.

Upvotes: 1

Gary
Gary

Reputation: 2339

Please check Using require to set templateUrl in Angular 2 while getting error

It might not be possible right now since commonjs is a module system. https://www.typescriptlang.org/docs/handbook/modules.html

Depending on the module target specified during compilation, the compiler will generate appropriate code for Node.js (CommonJS), require.js (AMD), isomorphic (UMD), SystemJS, or ECMAScript 2015 native modules (ES6) module-loading systems. For more information on what the define, require and register calls in the generated code do, consult the documentation for each module loader.

Upvotes: 0

Related Questions