webpackスタイルのインポートでブラウザでUncaught TypeErrorが発生する

Question

webpackでCSSを読み込み、それをPrepactコンポーネント（Typescriptを使用）で使用しようとしています。そこにいくつかの例があり、それらのすべてが簡単に見えますが、私は（ビルドがうまくいく）ブラウザにエラーが表示されます。

app.tsx?78df:31 Uncaught TypeError: Cannot read property 'title' of undefined 
at App.render (app.tsx?78df:31) 
at renderComponent (preact.esm.js?acc9:728) 
at renderComponent (preact.esm.js?acc9:754) 
at renderComponent (preact.esm.js?acc9:754) 
at setComponentProps (preact.esm.js?acc9:676) 
at buildComponentFromVNode (preact.esm.js?acc9:856) 
at idiff (preact.esm.js?acc9:397) 
at diff (preact.esm.js?acc9:348) 
at Object.render (preact.esm.js?acc9:991) 
at eval (bootstrap.tsx?4488:13) 

私app.tsxファイルには、次のようになります。

import * as styles from "./style.css"; 
... 
     return (
     <div> 
      <h1 className={styles.locals.title}>PROPS: {props.name} state: {state.name}</h1> 
      <ul> 

" style.cssにファイルは単純です：

.title { 
    color: red; 
} 

'style.css.d.ts 'タイピング-用-CSS-モジュールローダ' を使用して生成された' と次のようになります。

export interface IStyleCss { 
    'title': string; 
} 

export const locals: IStyleCss; 

私はプロジェクトをhttps://github.com/RasPelikan/preact-warにプッシュしました。ファイルはsrc/main/frontendにあります。これはMavenプロジェクトです。サーバーコンポーネントはJavaになるからです。だから私はダウンロードのためにtarget/preact-war-0.0.1-SNAPSHOT.warに結果を入れます。

ビルド出力は次のようになります。

[INFO] Scanning for projects... 
[INFO]                   
[INFO] ------------------------------------------------------------------------ 
[INFO] Building preact-war 0.0.1-SNAPSHOT 
[INFO] ------------------------------------------------------------------------ 
[INFO] 
[INFO] --- frontend-maven-plugin:1.6:install-node-and-npm (install node and npm) @ preact-war --- 
[INFO] Installing node version v8.9.3 
[INFO] Copying node binary from C:\Users\pelikast\.m2\repository\com\github\eirslett\node\8.9.3\node-8.9.3-win-x64.exe to C:\Users\pelikast\workspace-jee\preact-war\target\node\node.exe 
[INFO] Installed node locally. 
[INFO] Installing npm version 5.5.1 
[INFO] Unpacking C:\Users\pelikast\.m2\repository\com\github\eirslett\npm\5.5.1\npm-5.5.1.tar.gz into C:\Users\pelikast\workspace-jee\preact-war\target\node\node_modules 
[INFO] Installed npm locally. 
[INFO] 
[INFO] --- frontend-maven-plugin:1.6:npm (npm install) @ preact-war --- 
[INFO] Running 'npm install --no-optional' in C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend 
[WARNING] npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-4g8BF3gKWBHeM1jAFmMPHofuJlwTUU4iHJ0i3mwXRHwy74RU6VBOgl9kDVMGpapvGcMlVqV5G6v9XmV66Qqd7w== integrity checksum failed when using sha512: wanted sha512-4g8BF3gKWBHeM1jAFmMPHofuJlwTUU4iHJ0i3mwXRHwy74RU6VBOgl9kDVMGpapvGcMlVqV5G6v9XmV66Qqd7w== but got sha1-IyEZIhebgfdEh1S3/fykW4N0oVo=. (63409 bytes) 
[WARNING] npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation. 
[INFO] 
[INFO] > node-sass@4.7.2 install C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass 
[INFO] > node scripts/install.js 
[INFO] 
[INFO] Cached binary found at C:\Users\pelikast\AppData\Roaming\npm-cache\node-sass\4.7.2\win32-x64-57_binding.node 
[INFO] 
[INFO] > uglifyjs-webpack-plugin@0.4.6 postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\webpack\node_modules\uglifyjs-webpack-plugin 
[INFO] > node lib/post_install.js 
[INFO] 
[INFO] 
[INFO] > node-sass@4.7.2 postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass 
[INFO] > node scripts/build.js 
[INFO] 
[INFO] Binary found at C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\node-sass\vendor\win32-x64-57\binding.node 
[INFO] Testing binary 
[INFO] Binary is fine 
[INFO] 
[INFO] > preact@8.2.7 postinstall C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend\node_modules\preact 
[INFO] > node -e "console.log('\u001b[35m\u001b[1mLove Preact? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/preact/donate\u001b[0m')" 
[INFO] 
[INFO] [35m[1mLove Preact? You can now donate to our open collective:[22m[39m 
[INFO] > [34mhttps://opencollective.com/preact/donate[0m 
[WARNING] npm WARN preact-test@0.0.0 No repository field. 
[ERROR] 
[INFO] added 746 packages in 64.565s 
[INFO] 
[INFO] --- frontend-maven-plugin:1.6:webpack (webpack build) @ preact-war --- 
[INFO] Running 'webpack.js -d --display-error-details --config ./webpack.config.js' in C:\Users\pelikast\workspace-jee\preact-war\src\main\frontend 
[INFO] Hash: e4bfaca42bf58e78e61c 
[INFO] Version: webpack 3.10.0 
[INFO] Time: 3062ms 
[INFO]              Asset Size Chunks    Chunk Names 
[INFO] ../../../target/preact-war-0.0.1-SNAPSHOT/public/bundle.js 174 kB  0 [emitted] main 
[INFO] [2] ./bootstrap.tsx 501 bytes {0} [built] 
[INFO] [3] ./app.tsx 1.89 kB {0} [built] 
[INFO] [4] ./style.css 1.04 kB {0} [built] 
[INFO] [5] ./node_modules/css-loader?{"camelcase":true,"namedexport":true,"modules":true,"importLoaders":2}!./style.css 271 bytes {0} [built] 
[INFO] [9] ./about.tsx 948 bytes {0} [built] 
[INFO]  + 5 hidden modules 
[INFO] Refreshing files after webpack: C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT\public 
[INFO] 
[INFO] --- maven-resources-plugin:3.0.2:resources (default-resources) @ preact-war --- 
[INFO] Using 'UTF-8' encoding to copy filtered resources. 
[INFO] Copying 0 resource 
[INFO] 
[INFO] --- maven-compiler-plugin:3.6.1:compile (default-compile) @ preact-war --- 
[INFO] Nothing to compile - all classes are up to date 
[INFO] 
[INFO] --- maven-resources-plugin:3.0.2:testResources (default-testResources) @ preact-war --- 
[INFO] Using 'UTF-8' encoding to copy filtered resources. 
[INFO] skip non existing resourceDirectory C:\Users\pelikast\workspace-jee\preact-war\src\test\resources 
[INFO] 
[INFO] --- maven-compiler-plugin:3.6.1:testCompile (default-testCompile) @ preact-war --- 
[INFO] No sources to compile 
[INFO] 
[INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ preact-war --- 
[INFO] No tests to run. 
[INFO] 
[INFO] --- maven-war-plugin:3.2.0:war (default-war) @ preact-war --- 
[INFO] Packaging webapp 
[INFO] Assembling webapp [preact-war] in [C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT] 
[INFO] Processing war project 
[INFO] Copying webapp resources [C:\Users\pelikast\workspace-jee\preact-war\src\main\webapp] 
[INFO] Webapp assembled in [63 msecs] 
[INFO] Building war: C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT.war 
[INFO] 
[INFO] --- maven-install-plugin:2.4:install (default-install) @ preact-war --- 
[INFO] Installing C:\Users\pelikast\workspace-jee\preact-war\target\preact-war-0.0.1-SNAPSHOT.war to C:\Users\pelikast\.m2\repository\at\phactum\test\preact-war\0.0.1-SNAPSHOT\preact-war-0.0.1-SNAPSHOT.war 
[INFO] Installing C:\Users\pelikast\workspace-jee\preact-war\pom.xml to C:\Users\pelikast\.m2\repository\at\phactum\test\preact-war\0.0.1-SNAPSHOT\preact-war-0.0.1-SNAPSHOT.pom 
[INFO] ------------------------------------------------------------------------ 
[INFO] BUILD SUCCESS 
[INFO] ------------------------------------------------------------------------ 
[INFO] Total time: 01:52 min 
[INFO] Finished at: 2017-12-17T21:27:07+01:00 
[INFO] Final Memory: 13M/220M 
[INFO] ------------------------------------------------------------------------ 

Thxを、 ステファン

PS：私はpreactするrequirejsと（多くの理由のため）のWebPACKにアンギュラ1.4.8から切り替えてい 。だから、私はwebpackの初心者です。

Answer 1

あなたはWebpackに巻き込まれ、Typescriptを見ていません。

そうした場合、import * as styles from "./style.css";、その後style.cssは、あなたがstylesオブジェクト上ではなくサブオブジェクトにあなたのクラスを見つけることができます、.title { color: red; }が含まれています。 styles.localが存在しません。

だから、最後に、私は考え出しstyles.CLASSNAME

Answer 2

でそれらにアクセスし、その代わり、styles.local.CLASSNAMEでそれらにアクセスしないでください。 Shawnのおかげで、私はcss-loaderの代わりにTypescript .d.tsファイルに焦点を当て、 "typings-for-css-modules-loader"のオプションにコピー/ペーストエラーがあることを理解しました。私はどこからでも

camelcase: true, 
namedexport: true, 

コピーを使用しますが、大文字と小文字が区別されなければならない

camelCase: true, 
namedExport: true, 

により誤った場合に、単に無視オプション！これでstyles.css.d.tsは次のようになります

export const title: string; 

これは正しい方法ですが、今はすべて問題ありません。

Thxを、ステファン