塩焼きブログ

塩焼きに関しての研究内容を公開しています

Webpack で Module not found: Error: Can't resolve './urls' と出る場合の解決策

このようなエラーが出るがエラーの箇所がライブラリ内であった。

$ yarn run webpack -w
yarn run v1.6.0
(node:10439) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
warning package.json: No license field
$ '/hoge/node_modules/.bin/webpack' -w

Webpack is watching the files…

Hash: 19fdbed237e35dbec338
Version: webpack 4.8.3
Time: 2207ms
Built at: 2018/05/22 11:14:55
     Asset      Size   Chunks             Chunk Names
example.js  26.2 KiB  example  [emitted]  example
Entrypoint example = example.js
[./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js!./src/css/example.scss] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/css/example.scss 2.71 KiB {example} [built]
[./src/css/example.scss] 1.2 KiB {example} [built]
[./src/file/logo.svg] 796 bytes {example} [built]
[./src/js/example.ts] 2.58 KiB {example} [built]
    + 3 hidden modules

ERROR in ./node_modules/style-loader/lib/addStyles.js
Module not found: Error: Can't resolve './urls' in '/hoge/node_modules/style-loader/lib'
 @ ./node_modules/style-loader/lib/addStyles.js 64:14-31
 @ ./src/css/example.scss
 @ ./src/js/example.ts

style-loaderのバグだと思ったらそうではなかった。issuecomment-335952390が参考になった。私は全ファイルをTypeScriptで書いていたので.jsをresolveに使っていなかったが、ライブラリは.jsファイルを使っているので、webpack.config.jsでは.jsを入れなければいけないようだ。

resolve: {
  extensions: [
    '.ts', '.js'
  ]
}

style-loaderを使う場合はresolveに.jsを入れるということか。