2

I'm trying to convert just two .js files to .ts files in my working webpack node.js project and compile it (actions.ts and flux.ts). When running

webpack --progress --colors

I get this error:

ERROR in ./src/app/tools/flux.ts
(2,11): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/tools/flux.ts
(4,1): error TS2304: Cannot find name 'module'.

ERROR in ./src/app/actions/actions.ts
(2,12): error TS2304: Cannot find name 'require'.

ERROR in ./src/app/actions/actions.ts
(11,1): error TS2304: Cannot find name 'module'.

How do I fix these please?

You can see my folder structure, and the code I'm trying to compile on the right, in this screenshot:

Folder structure

And here's my webpack config if it helps:

'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var rootPath = __dirname; //site
var srcPath = path.join(rootPath, 'src'); //site/src

module.exports =
{
    bail: true,
    cache: true,
    context: rootPath,
    debug: true,
    devtool: 'inline-source-map', //'eval-cheap-module-source-map','inline-source-map'
    target: 'web',
    devServer:
    {
        contentBase: './dist',
        historyApiFallback: true
    },
    entry:
    {
        app: path.join(srcPath, 'app/actions/actions.ts'),  //main.jsx
        lib: ['react', 'react-router']
    },
    output:
    {
        path: path.join(rootPath, 'dist'),
        publicPath: '',
        filename: '[name].js',
        library: ['[name]', '[name]'],
        pathInfo: true
    },
    resolve:
    {
        root: srcPath,
        extensions: ['', '.js', '.jsx', '.ts', '.tsx'],
        modulesDirectories: ['node_modules', 'src', 'typings']
    },
    module:
    {
        loaders:
        [
            {test: /\.js?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.jsx?$/, loader: 'babel-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.ts?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.tsx?$/, loader: 'ts-loader?cacheDirectory', exclude: /(node_modules|bower_components)/ },
            {test: /\.scss?$/, loaders: ['style', 'css', 'sass']},
            {test: /\.png?$/, loader: 'file-loader'},
            {test: /\.jpg?$/, loader: 'file-loader'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    },
    plugins:
    [
        new CopyWebpackPlugin
        ([
            { from: 'src/images', to: 'images' }
        ]),
        new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
        new HtmlWebpackPlugin
        ({
            inject: true,
            template: 'src/index.html'
        }),
        new webpack.NoErrorsPlugin()
    ]
};
Richard
  • 14,798
  • 21
  • 70
  • 103
  • Have you installed `alt` npm module? –  Nov 28 '15 at 10:57
  • Yes, everything was working before changing the two files to .ts. I have all npm modules, and now I also have all DefinitelyTyped definitions for the modules in the typings folder (though I don't know if webpack can see them) – Richard Nov 28 '15 at 11:21

2 Answers2

2

The error is basically TypeScript complaining that it's getting JavaScript as a CommonJS module (require, module) but it's expecting import and export =. The source on disk is correct, so something seems to be transforming that code prior to it getting to TypeScript.

I believe the issue is that TypeScript is actually being run twice. If you look at your loaders, you've got question marks (?) at the end of each extension regex. That is making the last letter of each extension optional, which is incorrect. In this case, a .ts extension will be matched by both /\.ts?$/ and /\.tsx?$/, and so webpack executes TypeScript twice for the same file. The first pass works fine but the second pass fails because it's already been transformed.

You should remove the question marks from pretty much all of your loader tests. The places where the question mark is a good idea is for tsx and jsx. So a single loader configured for /\.tsx?$/ will correctly match both .ts and .tsx. Same goes for jsx.

James Brantly
  • 561
  • 2
  • 9
  • Thank you so much! Been struggling with this for a week. But it's not quite right yet - now the 'require' is accepted, but it can't find module 'alt'. As you can see I have both 'node_modules' and 'typings' in my resolve.modulesDirectories config. What else must I do? – Richard Nov 30 '15 at 17:41
  • Someone told me to add /// to the top of my .ts file. That worked. I thought webpack would take care of it automatically, but it looks like I have to add these references individually to every file. – Richard Dec 01 '15 at 09:04
  • You don't need to add it to every file. It just needs to be loaded once for the whole program. (so you can put a `/// ` in your entry file, OR even better use tsconfig's `files` array) – James Brantly Dec 01 '15 at 14:00
  • Thanks James Brantly, if you'd like to add this answer to the question I opened ou can get some points: http://stackoverflow.com/questions/34018192/how-do-you-configure-webpack-to-see-all-your-typescript-definitions-automaticall – Richard Dec 02 '15 at 23:55
0

@Richard, maybe @Peter Varga answer can help you:

Instead of var mongoose = require('mongoose') try the following

import mongoose from 'mongoose'; //or

import mongoose = require('mongoose');

Community
  • 1
  • 1
Yauhen
  • 1,145
  • 12
  • 19
  • Thanks, I've tried both of those. I get the same error even though you can see the word 'require' isn't even in my code. – Richard Nov 28 '15 at 23:52