React、TypeScript 環境構築 その 3

/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/TemplatedPathPlugin.js:43
throw new Error(
^

Error: Path variable [contenthash:8] not implemented in this context: static/css/[name].[contenthash:8].css
at fn (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/TemplatedPathPlugin.js:43:11)
at fn (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/TemplatedPathPlugin.js:31:16)
at String.replace (<anonymous>)</anonymous>

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/763

A temporary solution that you can use until it’s fixed, is to replace [contenthash] with something like [md5:contenthash:hex:20].

一時的な解決策がこれみたい


/Users/hogehoge/workspace/example/web/config/webpack.config.prod.js


// Note: defined here because it will be used more than once.
- const cssFilename = 'static/css/[name].[contenthash:8].css';
+ const cssFilename = 'static/css/[name].[md5:contenthash:hex:20].css';

おまけにもうひとつビルドエラー


Failed to compile.

this.htmlWebpackPlugin.getHooks is not a function

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

  • HtmlWebpackPluginを追加したらエラーがなくなった
/Users/hogehoge/workspace/example/web/config/webpack.config.prod.js

- new InterpolateHtmlPlugin(env.raw),
+ new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),

さらにおまけにもうひとつビルドエラー

(node:19721) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Chunk.js:849
throw new Error(
^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
at Chunk.get (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Chunk.js:849:9)
at /Users/hogehoge/workspace/example/web/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
at Array.forEach (<anonymous>)
at /Users/hogehoge/workspace/example/web/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/hogehoge/workspace/example/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook (/Users/hogehoge/workspace/example/web/node_modules/tapable/lib/Hook.js:154:20)
at Compilation.seal (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Compilation.js:1242:27)
at hooks.make.callAsync.err (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Compiler.js:546:17)
at _done (eval at create (/Users/hogehoge/workspace/example/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:9:1)
at _err1 (eval at create (/Users/hogehoge/workspace/example/web/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:32:22)
at _addModuleChain (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Compilation.js:1093:12)
at processModuleDependencies.err (/Users/hogehoge/workspace/example/web/node_modules/webpack/lib/Compilation.js:1005:9)
at process.internalTickCallback (internal/process/next_tick.js:70:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</anonymous></anonymous></anonymous></anonymous>

  • 参考URL:https://koukitips.net/post1967/
  • yarn add extract-text-webpack-plugin@next"extract-text-webpack-plugin": "^4.0.0-beta.0",をインストールする。
  • extract-text-webpack-pluginはwebpack4に対応しないからmini-css-extract-pluginを使うようにしたほうがいいとかあるけど、4.0.0-beta.0をインストールしたら解決した。