Import path cannot end with ".ts" - NodeJS and Visual Code

Question

I got an error while trying to create a simple NodeJS application:

Even if Visual Code throws an error, my code is running. When I remove the .ts extension from the import statement, I received an error message that the file was not found.

I use webpack, but these files are from the server. Here is my folder structure:

And here is my file on the Internet:

var webpack = require('webpack'); var helpers = require('./helpers'); //# Webpack Plugins var CopyWebpackPlugin = (CopyWebpackPlugin = require('copy-webpack-plugin'), CopyWebpackPlugin.default || CopyWebpackPlugin); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; var ExtractTextPlugin = require('extract-text-webpack-plugin'); //# Webpack Constants const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const HMR = helpers.hasProcessFlag('hot'); const METADATA = { title: 'My Application', baseUrl: '/', host: process.env.HOST || '0.0.0.0', port: process.env.PORT || 8080, ENV: ENV, HMR: HMR }; //# Webpack Configuration module.exports = { metadata: METADATA, entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'main': './src/main.ts', }, resolve: { extensions: ['', '.ts', '.tsx', '.js', '.scss'], root: helpers.root('src'), modulesDirectories: [ 'node_modules', 'server' ] }, module: { preLoaders: [ { test: /\.js$/, loader: 'source-map-loader', exclude: [ helpers.root('node_modules/rxjs'), helpers.root('node_modules/@angular2-material'), helpers.root('node_modules/@angular') ] } ], loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/] }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.css$/, loader: 'raw-loader' }, { test: /\.html$/, loader: 'raw-loader', exclude: [helpers.root('src/index.html')] }, { test: /\.scss|css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' }), exclude: [ helpers.root('node_modules') ] }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader : 'file-loader' } ] }, plugins: [ new ForkCheckerPlugin(), new webpack.optimize.OccurrenceOrderPlugin(true), new webpack.optimize.CommonsChunkPlugin({ name: ['polyfills', 'vendor'].reverse() }), new ExtractTextPlugin("[name].css"), new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]), new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'dependency' }), new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery', "Tether": 'tether', "window.Tether": "tether" }) ], node: { global: 'window', crypto: 'empty', module: false, clearImmediate: false, setImmediate: false } }; 

Can someone help me? Tks!

Answer 1

This is what I use and it works pretty well.

The full web package configuration is here: https://gist.github.com/victorhazbun/8c97dc578ea14776facef09a115ae3ad

webpack.config.js

 'use strict'; const webpack = require('webpack'); module.exports = { ... resolve: { extensions: [".ts", ".tsx", ".js"] }, ... }; 

Answer 2

I am not sure what the exact solution to this question is. Apparently, the solution is to remove the .ts extension - this is a configuration problem if it cannot find the file . For me, the configuration problem was resolved when I started using ts-loader.

Answer 3

This is due to the resolution of the TypeScript module, you can configure baseUrl in tsconfig.json in the compilerOptions field, for example:

 { "compilerOptions": { "outDir": "build", "allowJs": true, "target": "es5", "jsx": "react", "skipLibCheck": true, "allowSyntheticDefaultImports": true, "baseUrl": "./src/" }, "include": [ "src/**/*.tsx?" ], "exclude": [ "node_modules", "**/__snapshots__/*", "**/*.snap", "**/*.test.jsx?" ] } 

So, using this configuration, suppose you have a src/app/alarm/index.tsx into which you can import Validator from 'src / util / Validator.ts',

 import Validator from 'util/Validator'