webpackでModule not found: Error: Cannot resolve module 'react'と叱られる問題

問題

% npm run build

> component-example@0.0.1 build /Users/otiai10/proj/web/react-examples/foo
> webpack

Hash: f59be0c76d47bf9f7a3e
Version: webpack 1.13.0
Time: 496ms
         Asset     Size  Chunks             Chunk Names
./lib/index.js  3.75 kB       0  [emitted]  main
    + 1 hidden modules

ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'react' in /Users/otiai10/proj/web/react-examples/foo/src
 @ ./src/index.jsx 9:13-29
%

いやー普通にnode_modules以下に配置してるから。

% npm list | grep react
react-jukebox@0.0.1 /Users/otiai10/proj/js/react-jukebox
├─┬ babel-preset-react@6.5.0
│ ├── babel-plugin-transform-react-display-name@6.8.0
│ ├─┬ babel-plugin-transform-react-jsx@6.8.0
│ │ └── babel-helper-builder-react-jsx@6.8.0
│ └── babel-plugin-transform-react-jsx-source@6.8.0
├─┬ react@15.0.2
%

調査

どうやら、webpackに --display-error-detailsを食わせるといいらしい

% ./node_modules/webpack/bin/webpack.js --display-error-details

# 中略

        use react.js from package.json
          resolve 'file' or 'directory' react.js in /Users/otiai10/proj/web/react-examples/foo/node_modules/react
            resolve file
              /Users/otiai10/proj/web/react-examples/foo/node_modules/react/react.js.js doesn\'t exist
              /Users/otiai10/proj/web/react-examples/foo/node_modules/react/react.js.jsx doesn\'t exist

# 中略

%

node_modules/react/react.js.js <- は？

解決

webpack.config.js

    resolve: {
-        extensions: ['.js', '.jsx']
+        extensions: ['', '.js', '.jsx']
    }

ソースコード

github.com

雑感

• subuta_nico先生、いつもありがとう

改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで