"Could not load TypeScript. Try installing with `npm install -g typescript`"

[ldminoc]

I updated to 0.5.2 from 0.5.0 this morning but still seem to be having the same issue although the new error message is less useful for problem identification. After receiving the error message, I updated typescript to the latest nightly build using 'npm install -g typescript@next'.

Any insights would be appreciated.

Here's my webpack.config.js:

'use strict';

var webpack = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
  entry: './server/server.ts',
  output: {
    path: './build/',
    filename: 'server.js'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new WebpackNotifierPlugin()
  ],
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.ts', '.tsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: ['./node_modules/'],
        loader: 'babel-loader'
      },
      {
        test: /\.ts(x?)$/,
        exclude: ['./node_modules/'],
        loader: 'ts-loader'
      }
    ]
  }
};

And here is the tsconfig.js:

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "target": "ES5",
        "sourceMap": true
    }
}

With 0.5.0, the error message was: ERROR in ./server/server.ts

Module build failed: Error: Cannot find module 'typescript' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:278:25) at Module.require (module.js:365:17) at require (module.js:384:17) at ensureTypeScriptInstance (partial path elided .../node_modules/ts-loader/index.js:69:20) at Object.loader (partial path elided .../node_modules/ts-loader/index.js:228:14)

[jbrantly]

In both cases it just means that node can't resolve typescript for some reason. Usually if you have it installed globally it will "just work", which is why there is the new message in 0.5.2. You could try installing locally. Go to your project root and use npm install typescript. Maybe there is some weird configuration that is preventing node from being able to resolve typescript globally. I've run into weird resolution issues in the past on Windows with older versions of node. Maybe try updating node and npm if the local install doesn't work.

[ldminoc]

Wow impressive response time! Your suggestion of installing typescript locally works, but it does not feel like a very satisfying solution ;-). I'm running node v0.12.6, npm 2.11.2 on a mac so have no idea what the issue is.
Thanks for the help.

[jbrantly]

It's possible I should change the messaging to "Please install using npm install typescript" instead based on this. In any case, glad it's working for you.

[ldminoc]

Sorry, should have closed this earlier.

[jbrantly]

No worries :)

[jbrantly]

FYI, I changed the message in the latest release to no longer have the -g flag.

[OldrichDlouhy]

Another approach that worked for me is to install typescript globally (npm install -g typescript) and then link to it from the local folder (npm link typescript).

[jbrantly]

Just for documentation purposes: The preferGlobal flag was removed in TS 1.6.

[slavovojacek]

@OldrichDlouhy linking through npm link typescript works perfectly, thanks!

[ArgTang]

@jbrantly I found the link option that is suggested as a noce solution thats more elegant, when typescript is installed globally. maybe change the message again to reflect this?

[jbrantly]

@ArgTang sure, sounds good.

[jbrantly]

Resolved in #127

[jbrantly]

Published in v0.8.0

[uglycoyote]

It does not seem resolved at all. I still get this issue.

Attempted to resolve the problem using the prescribed methods in the error message (npm install typescript and npm link typescript) neither of these got rid of the problem.

awesome-typescript-loader does not have this issue. Switching to the alternative.

[plandem]

same issue here. after install of any module via npm install I have to re-run npm link typescript

[johnnyreilly]

I'd be very interested to see your repo - do you have one you can share?

[plandem]

not sure how repo will helps. here are files:

package.json

{
  "name": "catapult",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "antd": "^2.11.2",
    "babel-register": "^6.24.1",
    "firebase": "^4.1.3",
    "lodash": "^4.17.4",
    "polyglot": "^0.5.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1",
    "redux-multi": "^0.1.12",
    "redux-thunk": "^2.2.0",
    "type-to-reducer": "^1.0.3"
  },
  "devDependencies": {
    "@types/react": "^15.0.34",
    "@types/react-dom": "^15.5.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-lodash": "^3.2.11",
    "babel-plugin-minify-dead-code-elimination": "^0.1.7",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-preset-electron": "^1.4.15",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.4",
    "electron": "1.6.11",
    "env-cmd": "^5.1.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "react-hot-loader": "^3.0.0-beta.7",
    "ts-loader": "^2.2.2",
    "uglify-es": "git://github.com/mishoo/UglifyJS2.git#harmony",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "^3.0.0",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.5.0"
  },
  "scripts": {
    "build:desktop": "env-cmd ./env/prod.json tsc -p ./src/desktop",
    "build:web": "env-cmd ./env/prod.json webpack",
    "start": "npm run build:desktop && npm run start:desktop",
    "start:desktop": "env-cmd ./env/dev.json electron -r babel-register ./dist/desktop/main.js",
    "start:web": "env-cmd ./env/dev.json webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry: {
        app: './src/web/index.tsx',
        common: [
            'react',
            'react-dom',
            'moment',
            'lodash',
            'react-redux',
            'redux',
            // 'polyglot',
        ],
        ui: 'antd',
        // "locale-ru": './src/web/i18n/ru.js',
        // "locale-en": './src/web/i18n/en.js',
    },

    output: {
        filename: './[name].js',
        path: path.resolve(__dirname, 'dist/web'),
        publicPath: '/'
    },

    devServer: {
        hot: true,
        contentBase: path.resolve(__dirname, 'dist/web'),
        publicPath: '/',
        port: 8001,
        stats: { modules:false }
    },

    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
            web: process.cwd() + '/src/web',
            shared: process.cwd() + '/src/shared',
        },
    },
    module: {
        rules: [
            { test: /\.tsx?$/, use: 'ts-loader'},
            { test: /\.html?$/, use: { loader: 'file-loader', query: { name: '[name].[ext]'}}},
            { test: /\.less$/i, use: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])},
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.css'),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['common', 'ui'],
            minChunks: Infinity,
        }),
    ],
};

if (process.env.NODE_ENV === 'production') {
    config.devtool = false;
    config.plugins.push(new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
    }));
    config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            screw_ie8: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
        },
        output: {
            comments: false,
        },
    }));
} else {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = config;

and here is tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "outDir": "../../dist/web",
    "paths": {
      "web/*": ["../web/*"],
      "shared/*": ["../shared/*"]
    }
  },
  "extends": "../../tsconfig.base"
}

tsconfig.base.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowJs": true,
    "strictNullChecks": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src"
  },
  "exclude": [
    "node_modules"
  ]
}

[johnnyreilly]

You don't seem to have TypeScript installed as a devDependency?

[plandem]

@johnnyreilly yep, it installed globally. As I wrote - after any npm install I have to link it again :(

[johnnyreilly]

Install it as a devDependency and you shouldn't have an issue. That's how I use it.

[johnnyreilly]

I'm not sure why it wouldn't pick up the global - this could be something to do with your path?

[plandem]

@johnnyreilly of course I can install everything as local, but I would prefer to use globals for common things like webpack, typescript and etc.

[plandem]

@johnnyreilly I don't know why, but as I said - after any npm install (e.g. added a new package), I'm getting this error and have to link typescript.

[P0oOOOo0YA]

linking with npm is not a solution, i have typescript and electron globally installed by npm in /usr/lib/node_modules and in the tsconfig.json basedir is set to it. Running tsc works without complainig about paths. To use ts-loader i need to symlink everything installed globally. :(

tsc --version
Version 2.9.2