[解決済み】WebpackとTypescript(ts-loader)でのセットアップの問題)
2022-02-20 03:30:28
質問
Webpack と ts-loader を使用して SolidJS をセットアップしようとしています。
での問題が発生し続けます。
return
関数を使用します。
この問題を解決するには、ローダーで何が足りないのでしょうか?
import { render } from "solid-js/web";
const App = () => {
// return "Hello World" // this works!
return (<div> Hello World </div>) // this doesnt work!
};
render(App, document.getElementById("app"));
エラーログの出力。
> webpack --watch --progress --config webpack.config.js
asset index.js 1.56 KiB [emitted] (name: main)
./src/test.tsx 290 bytes [built] [code generated]
ERROR in ./src/test.tsx 6:12
Module parse failed: Unexpected token (6:12)
File was processed with these loaders:
* ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const App = () => {
| // return "Hello World" // this works!
> return (<div> Hello World </div>); // this doesnt work!
| };
| render(App, document.getElementById("app"));
webpack 5.47.0 compiled with 1 error in 2081 ms
webpack.config
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/test.tsx',
module: {
rules: [
{
use: 'ts-loader',
test: /\.(ts|tsx)?$/,
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
}
UPDATEです。
# tsconfig.json
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js",
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"esModuleInterop": false
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"]
}
解決方法は?
解決済みです。
#webpack module rules:
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['solid'],
},
},
{
loader: 'ts-loader',
},
]
}
]
},
関連
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このエラーの原因は何ですか - "Fatal error: ローカルgruntを見つけることができません"
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み] テスト
-
[解決済み】未定義のプロパティ 'bind' を読み込めない。React.js【重複あり
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み] エラー。モジュールhtmlが見つからない