別のファイルでTQUESTSCRIPTモジュールを解決できません -- reactjs フィールド と typescript フィールド と webpack フィールド 関連 問題

Can't resolve Typescript module in another file












0
vote

問題

日本語

私の反応アプリをTQUISTRIPTに移行しています。これは今問題ありませんが、TypeScriptコンパイラを追加し、ファイルの名前を変更し、.tsと.tsxにファイルを名前変更した後、その投げモジュールは見つかりません。どんなリードも役に立ちます。私は次のDIR構造を持っています。

<事前> <コード> | src | select.tsx | index.ts | WindowedSelect.tsx | MenuList.tsx | demo | index.tsx | webpack.config.demo.js | webpack.config.js | tsconfig.json | package.json

npm run build 9988777662 commandおよびsrc / index.tsx(webpack.config)のデモ/インデックス( webpack.config.demo )を実行します。しかし、Modduleが両方にエラーを見つけられなかった。

エラー(NPM START):

<事前> <コード> ERROR in ./demo/index.tsx Module not found: Error: Can't resolve '../src/WindowedSelect'

エラー(NPM RUNビルド):

<事前> <コード> ERROR in ./src/index.ts Module not found: Error: Can't resolve './MenuList' ERROR in ./src/index.ts Module not found: Error: Can't resolve './WindowedSelect'

IntelliSenseは元気に動作し、クリック時に対応するファイルに移動します。私はここで何が問題なのかわかりません。

PS:モジュールが見つからないエラーとは別に、これがJSプロジェクトであるため、いくつかの型誤差もあります。この計画は、TypeScriptに徐々に移行することです。それでは、デフォルトの重大度を "Warn"に設定する方法?

webpack.config.js

<事前> <コード> const path = require('path'); module.exports = { entry: './src/index.ts', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'commonjs2', }, module: { rules: [ { test: /.(ts|tsx)$/, exclude: /node_modules/, use: { loader: "ts-loader" } } ] }, externals: { react: 'commonjs react', 'react-dom': 'commonjs react-dom' }, };

編集:tsconfig.json

<事前> <コード> { "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Basic Options */ // "incremental": true, /* Enable incremental compilation */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "lib": [ /* Specify library files to be included in the compilation. */ "DOM", "DOM.Iterable", "ESNext" ], "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ // "outDir": "./", /* Redirect output structure to the directory. */ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /* Enable project compilation */ // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ // "removeComments": true, /* Do not emit comments to output. */ // "noEmit": true, /* Do not emit outputs. */ // "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ /* Strict Type-Checking Options */ "strict": false, /* Enable all strict type-checking options. */ "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ "strictNullChecks": false, /* Enable strict null checks. */ "strictFunctionTypes": false, /* Enable strict checking of function types. */ "strictBindCallApply": false, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ "strictPropertyInitialization": false, /* Enable strict checking of property initialization in classes. */ "noImplicitThis": false, /* Raise error on 'this' expressions with an implied 'any' type. */ "alwaysStrict": false, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ /* Module Resolution Options */ // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ // "types": [], /* Type declaration files to be included in compilation. */ // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ /* Source Map Options */ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ /* Advanced Options */ "skipLibCheck": true, /* Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ } }
英語

I'm migrating my react app to typescript. It works fine now, But after adding typescript compiler and renaming files to .ts and .tsx, its throwing module not found. Any lead will be helpful. I have got the following dir structure.

| src   | select.tsx   | index.ts   | WindowedSelect.tsx   | MenuList.tsx | demo   | index.tsx | webpack.config.demo.js | webpack.config.js | tsconfig.json | package.json 

I run demo/index (webpack.config.demo) for npm start command and src/index.tsx (webpack.config) for npm run build. But getting Moddule Not found error in both.

Error (npm start):

ERROR in ./demo/index.tsx Module not found: Error: Can't resolve '../src/WindowedSelect' 

Error (npm run build):

ERROR in ./src/index.ts Module not found: Error: Can't resolve './MenuList'  ERROR in ./src/index.ts Module not found: Error: Can't resolve './WindowedSelect' 

The IntelliSense works fine and navigates to corresponding files on click. I don't understand what is the issue here.

PS: apart from the module not found error, there are also several type errors as this is a js project. The plan is to gradually migrate to typescript. So how to set the default severity to "warn" for type errors?

webpack.config.js

const path = require('path');  module.exports = {   entry: './src/index.ts',   output: {     filename: 'main.js',     path: path.resolve(__dirname, 'dist'),     libraryTarget: 'commonjs2',   },   module: {     rules: [       {         test: /.(ts|tsx)$/,         exclude: /node_modules/,         use: {           loader: "ts-loader"         }       }     ]   },   externals: {     react: 'commonjs react',     'react-dom': 'commonjs react-dom'   }, }; 

Edit: tsconfig.json

{   "compilerOptions": {     /* Visit https://aka.ms/tsconfig.json to read more about this file */      /* Basic Options */     // "incremental": true,                   /* Enable incremental compilation */     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */     "lib": [                                  /* Specify library files to be included in the compilation. */       "DOM",       "DOM.Iterable",       "ESNext"     ],     "allowJs": true,                          /* Allow javascript files to be compiled. */     // "checkJs": true,                       /* Report errors in .js files. */     "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */     // "sourceMap": true,                     /* Generates corresponding '.map' file. */     // "outFile": "./",                       /* Concatenate and emit output to single file. */     // "outDir": "./",                        /* Redirect output structure to the directory. */     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */     // "composite": true,                     /* Enable project compilation */     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */     // "removeComments": true,                /* Do not emit comments to output. */     // "noEmit": true,                        /* Do not emit outputs. */     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */     "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */      /* Strict Type-Checking Options */     "strict": false,                           /* Enable all strict type-checking options. */     "noImplicitAny": false,                 /* Raise error on expressions and declarations with an implied 'any' type. */     "strictNullChecks": false,              /* Enable strict null checks. */     "strictFunctionTypes": false,           /* Enable strict checking of function types. */     "strictBindCallApply": false,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */     "strictPropertyInitialization": false,  /* Enable strict checking of property initialization in classes. */     "noImplicitThis": false,                /* Raise error on 'this' expressions with an implied 'any' type. */     "alwaysStrict": false,                  /* Parse in strict mode and emit "use strict" for each source file. */      /* Additional Checks */     // "noUnusedLocals": true,                /* Report errors on unused locals. */     // "noUnusedParameters": true,            /* Report errors on unused parameters. */     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */      /* Module Resolution Options */     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */     // "typeRoots": [],                       /* List of folders to include type definitions from. */     // "types": [],                           /* Type declaration files to be included in compilation. */     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */      /* Source Map Options */     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */      /* Experimental Options */     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */      /* Advanced Options */     "skipLibCheck": true,                     /* Skip type checking of declaration files. */     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */   } }  
</div
        
         
         

回答リスト

2
 
vote
vote
ベストアンサー
 

webpack.config の解決拡張機能を指摘するために問題が欠けている可能性が高いように聞こえます。そのプロパティをさらに追加してみてください:

 <コード> resolve: {   extensions: ['.ts', '.tsx', '.js', '.jsx'],     },   
 

It sounds like the issue is likely from missing to point out the resolve extensions in webpack.config. Try to add more that property:

resolve: {   extensions: ['.ts', '.tsx', '.js', '.jsx'],     }, 
</div
 
 
   
   

関連する質問

0  静的データをReactコンポーネントに渡すにはどうすればよいですか。  ( How should i pass static data into a react component ) 
既存のサイトのいくつかの部分を服用し、それらをWebPackでコンポーネントをバンドルして反応させます。既存のサイトはあらゆる種類のAPIを使用しており、そのマークアップの大部分をPHPで出力します。 私の最初のプロジェクトは、サイト上のいくつかの場所で使用さ...

22  ウェブパック(BABEL / ES6)でモーメントティムゾンとモーメント範囲のインポート  ( Importing moment timzone and moment range with webpack babel es6 ) 
Babel LoaderでWebPackを使用しています。 ES6規格で書く。瞬間 - タイムゾーンとモーメント範囲の両方をNPMでインストールしました。 これらのどちらも瞬間です.JSプラグイン、およびこれらの両方が瞬間パッケージに依存し、別の ライブラリ...

2  WebPack Dev ServerのCSSが見つかりません  ( Css not found error in webpack dev server ) 
SassとBabelのカスタムWebPack設定を構築しています。 My WebPack Devサーバーでは、 href="http://localhost:8082/dist/bundle.css" rel="nofollownoreferrer"> ...

0  webpack2の「プロジェクト」「資産/ IMG / coin.png解決できません」を  ( Webpack2 cant resolve assets img coin png in project ) 
私は動的に画像をインポートしようとしている文を必要とするが、でもその前に、などの正規輸入はそう動作しません。を <コード> import 'assets/img/coin.png' 実際のユースケースである: <コード> require( 資産/ IM...

4  WebPackでPDFKitライブラリを使用する方法  ( How to use pdfkit library with webpack ) 
プログラムでPDF文書を印刷したいです。そして、私は今何時間も作るためにこのPDFKitライブラリ WebPackを操作します。フォームを消しました: <コード> Can't resolve 'fs' in .. <コード> fs.readFile...

1  WebPackを使用して複数のページでREACT.JSを使用します  ( Using react js on multiple pages with webpack ) 
主な質問:このエラーを止めるにはどうすればよい: Uncaught Error: Target container is not a DOM element は、異なる要素タグを持つ複数のページを使用しています。 これは、これらのツールを設置しながら見落と...

8  Babel 6をIE8と協力させる(via gulp / webpack)  ( Getting babel 6 to work with ie8 via gulp webpack ) 
GULPとWebPackでギュラのうち6人をうまく働いています。 IE8のサポートを受けるためにそれをポリ魚類する必要があります。 私はBabel-Polyfillをインストールしましたが、それを働くことができず、ドキュメントとGoogleはこれまでのところ...

161  エラー:モジュール 'WebPack'が見つかりません  ( Error cannot find module webpack ) 
私はWebPackを始めようとしています。 - サンプルを構築するためのポイント。例のwebpack.config.jsファイルには、行が含まれています。 <事前> <コード> var CommonsChunkPlugin = require("../../...

5  WebPackとLETSを使用して複数のテーマを生成します  ( Generate multiple themes using webpack and less ) 
ビルドツールとしてWebPackを使用しています。 私は、カラー、サイト全体のサイズのような一般的な値を含む一般的な値を含むファイルの少ないファイルを持っています、次に異なるコンポーネントでは<コード> variable.less8 今度は、そのサイトに複...

1  WordPressプラグインを持つWebPack、最善の方法は何ですか?  ( Webpack with wordpress plugins whats the best way ) 
私はウェブパックを理解しています(少なくとも私をトラブルに入れるのに十分な)。 WordPress Plugin Authutを構築する方法(すなわち、1つのプラグインは別のプラグインを拡張することができますか? WebPACKを使用してプラグインを作成した...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有