TS2304: cannot find name require and process

匿名 (未验证) 提交于 2019-12-03 01:33:01

问题:

When I want to start my angular 2 app using "npm start". I get errors:

I tried a lot of "solutions" from internet, but nothing works. My versions:

  1. npm - 4.1.2
  2. typings - 2.1.0
  3. node - 7.5.0

tsconfig.json

{   "compilerOptions": {     "target": "es6",     "module": "commonjs",     "moduleResolution": "node",     "sourceMap": true,     "emitDecoratorMetadata": true,     "experimentalDecorators": true,     "lib": ["es2015", "dom"],     "noImplicitAny": true,     "suppressImplicitAnyIndexErrors": true } } 

polyfills.ts

import 'core-js/es6'; import 'core-js/es7/reflect'; require('zone.js/dist/zone'); if (process.env.ENV === 'production') {   // Production } else {   // Development and test   Error['stackTraceLimit'] = Infinity;   require('zone.js/dist/long-stack-trace-zone'); } 

package.json

{   "name": "storyWorld",   "version": "1.0.0",   "description": "Write your story.",   "scripts": {     "start": "webpack-dev-server --inline --progress --port 8080",     "test": "karma start",     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"   },   "license": "MIT",   "dependencies": {     "@angular/common": "~2.4.0",     "@angular/compiler": "~2.4.0",     "@angular/core": "~2.4.0",     "@angular/forms": "~2.4.0",     "@angular/http": "~2.4.0",     "@angular/platform-browser": "~2.4.0",     "@angular/platform-browser-dynamic": "~2.4.0",     "@angular/router": "~3.4.0",     "core-js": "^2.4.1",     "rxjs": "5.0.1",     "zone.js": "^0.7.4"   },   "devDependencies": {     "@types/jasmine": "^2.5.35",     "@types/node": "^6.0.63",     "angular2-template-loader": "^0.6.0",     "awesome-typescript-loader": "^3.0.0-beta.18",     "css-loader": "^0.26.1",     "extract-text-webpack-plugin": "2.0.0-beta.5",     "file-loader": "^0.9.0",     "html-loader": "^0.4.3",     "html-webpack-plugin": "^2.16.1",     "jasmine-core": "^2.4.1",     "karma": "^1.2.0",     "karma-jasmine": "^1.0.2",     "karma-phantomjs-launcher": "^1.0.2",     "karma-sourcemap-loader": "^0.3.7",     "karma-webpack": "^2.0.1",     "node-sass": "^4.5.0",     "null-loader": "^0.1.1",     "phantomjs-prebuilt": "^2.1.7",     "raw-loader": "^0.5.1",     "rimraf": "^2.5.2",     "sass-loader": "^5.0.1",     "style-loader": "^0.13.1",     "typescript": "~2.0.10",     "webpack": "2.2.0",     "webpack-dev-server": "2.2.0-rc.0",     "webpack-merge": "^2.4.0"   } } 

webpack.common.js

    var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var helpers = require('./helpers');  module.exports = {   entry: {     'polyfills': './src/polyfills.ts',     'vendor': './src/vendor.ts',     'app': './src/main.ts'   },    resolve: {     extensions: ['.ts', '.js']   },    module: {     rules: [       {         test: /\.ts$/,         loaders: [{           loader: 'awesome-typescript-loader',           options: { configFileName: helpers.root('src', 'tsconfig.json') }         } , 'angular2-template-loader']       },       {         test: /\.html$/,         loader: 'html-loader'       },       {         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,         loader: 'file-loader?name=assets/[name].[hash].[ext]'       },       {         test: /\.css$/,         exclude: helpers.root('src', 'app'),         loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })       },       {         test: /\.css$/,         include: helpers.root('src', 'app'),         loader: 'raw-loader'       },       {           test: /\.scss$/,           exclude: /node_modules/,           loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader         }     ]   },    plugins: [     // Workaround for angular/angular#11580     new webpack.ContextReplacementPlugin(       // The (\\|\/) piece accounts for path separators in *nix and Windows       /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,       helpers.root('./src'), // location of your src       {} // a map of your routes     ),      new webpack.optimize.CommonsChunkPlugin({       name: ['app', 'vendor', 'polyfills']     }),      new HtmlWebpackPlugin({       template: 'src/index.html'     })   ] }; 

回答1:

tsconfig.json:

compilerOptions: {    ...    "typeRoots": [ "../node_modules/@types" ],    ... } 

or

main.ts:

/// <reference types="node" /> 


回答2:

tsconfig.json

"compilerOptions": {         ...,         "lib": [             "es2015",             "es2015.iterable",             "dom"         ],         "types": ["node"],         ...     } 

"types" property would remove error related to 'require', 'process' and "lib" would remove some other errors related to Map,...



回答3:

Building on @jordan28's answer, I also needed to add "node" to the types property array of tsconfig.app.json file in src as explained here



易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!