Cannot find name 'require'. when specifying tsconfig path.

[vidartf]

When using ATL in a minimal webpack setup, with a file data.json (content e.g. [1,2,3]) the TS code:

const data = require('./data.json') as number[];

will normally compile correctly, unless you specify

query: {
  tsconfig: './tsconfig.json'
}

in the ATL loader configuration in the webpack config. If this configuration is present, the compilation fails with the error:

ERROR in [default] <path-to-TS-file>:1:13
Cannot find name 'require'.

[vidartf]

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "awesome-typescript-loader": "^2.2.4",
    "json-loader": "^0.5.4",
    "typescript": "^2.0.3",
    "webpack": "^1.13.2"
  }
}

webpack.config.js:

module.exports = {
  entry: './test.ts',
  output: {
    filename: "test.js"
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json-loader' },
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader',
        query: {
          tsconfig: './tsconfig.json'
        }
      }
    ]
  },
  resolve: {
    // Add '.ts' as resolvable extensions.
    extensions: ['', '.webpack.js', '.web.js', '.js', '.ts']
  }
}

[voxmatt]

@vidartf did you ever find a solution for this?

[vidartf]

My workaround was to put a dummy tsconfig.json file next to the webpack config file, and then remove the query argument. For me the dummy looks like this:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node"
  }
}

[vidartf]

I'd love to have a proper solution though, as the dummy might be confusing to others 👎

[vidartf]

The solution is to specify the config filename using the query entry configFileName. So:

query: {
  tsconfig: './tsconfig.json'
}

[vidartf]

Documentation fixed in #258.

[losnir]

I can still reproduce this issue on my machine, using atl@3.0.0-beta.12 to 14 (I haven't tried older versions).

My workaround was to explicitly declare @types dependencies within my main module using Triple-Slash-Directive:

main.ts:

/// <reference types="core-js" />
/// <reference types="node" />

That fixed the unknown type definition errors.

[ylibrach]

@voxmatt @vidartf @losnir it appears that at-loader isn't correctly handling the @types declarations because of the location of the tsconfig.json file being different than what it expects (ie, in the same folder that also contains node_modules). To fix this, I explicitly defined the root folder for @types so that at-loader would know where to look:

tsconfig.json:

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

Once I added this in and ran the webpack build again, everything worked fine. I think that at-loader should handle this implicitly, because tsc itself is able to without having this line in the tsconfig file.

Also relates to #232, #240 and #346.

[davidm-public]

@voxmatt worked for me, with a small change:
"./node_modules/@types"

note . instead of .. when tsconfig.json is in the parent directory!