导入路径不能以“.ts”结尾- NodeJS和Visual Code

31moq8wy  于 2023-05-28  发布在  Node.js
关注(0)|答案(7)|浏览(440)

我在尝试构建一个简单的NodeJS应用程序时遇到了一个错误:

即使Visual Code提示错误,我的代码也能运行。当我从import语句中删除.ts扩展名时,我得到一个错误,即无法找到该文件。
我使用的是webpack,但这些文件来自服务器。下面是我的文件夹结构:

这是我的webpack文件:

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
  }
};

有人能帮我吗谢谢

yiytaume

yiytaume1#

我遇到了这个问题,我花了一个小时的时间才意识到我所要做的就是从导入中删除.ts扩展名。对我来说:

// index.ts
import { renderSection, useConfig, writeToFile } from './hooks.ts'

// changed from `./hooks.ts` to `./hooks`
import { renderSection, useConfig, writeToFile } from './hooks'
xkrw2x1b

xkrw2x1b2#

这是我用的,效果很好。

完整的webpack配置如下:https://gist.github.com/victorhazbun/8c97dc578ea14776facef09a115ae3ad

webpack.config.js

'use strict';
const webpack = require('webpack');

module.exports = {
  ...
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  ...
};
z31licg0

z31licg03#

对我来说,情况是VSCode使用不同的Typescript版本,因为工作区依赖于不同的版本。需要从工作区中选择一个。
单击状态栏中的版本:

并从工作区中选择版本。

q9rjltbz

q9rjltbz4#

我也遇到了同样的问题,对我来说,解决方案就是重新运行应用程序。在我的情况下,我刚刚完成了一些文件转换为.tsx,也许这解释了它。

cl25kdpy

cl25kdpy5#

我不知道这个问题的确切答案是什么。显然,解决方案是remove the .ts extension — it is a configuration issue if it cannot find the file。对我来说,当我开始使用ts-loader时,配置问题就解决了。

j2cgzkjk

j2cgzkjk6#

要解决您的问题,您需要:
1.确保project.json中有一个tsconfig.json文件,其中包含代码
{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["src"] }
1.检查或创建一个react-app-env.in.ts文件,其中包含以下代码
/// <reference types="react-scripts" />
这个react-app-env.d.ts文件解释了TypeScript如何使用ts、tsx等文件扩展名

1.在导入中删除tsx文件扩展名。同时移除所有TypeScript将发誓的扩展
例如之前:
import { Header } from "./Header.tsx";
删除扩展后应该是这种情况:
import { Header } from "./Header";
1.如果在进行这些更改时有一个项目正在运行,请停止该项目,然后重新启动。由于这些更改仅在编译阶段启动项目时应用

k0pti3hp

k0pti3hp7#

上述解决方案都不起作用。在tsconfig.json中添加allowImportingTsExtensions解决了这个问题。
我的完整答案在这里:https://stackoverflow.com/a/76332913/1778834

  • 请注意,我在Webdriver上下文中遇到了此问题 *

相关问题