Webpack Uncaught Error: Cannot find module への対処法

Shunsuke Sawada

最近 Vue.js を使って開発してるのですが、
Webpackが、ローカルではビルドできてもプロダクションでこけた。

こんなエラーがでよる。

1
main-fd7fd10….js:31837 Uncaught Error: Cannot find module "!!./../../../../../../shared/frontend/node_modules/css-loader/index.js!./../../../../../../shared/frontend/node_modules/sass-loader/index.js!./default.sass"

contextは絶対パスにする

context を __direname + 'src' とかにすると相対パスになるらしい。
絶対パスにするにはこんな感じとな。

1
$ npm install path --save-dev
1
2
3
4
5
6
7
8
9
10
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    myEntry: './my/entry.js'
  },
...
}

Promiseモジュールをインストール

nodeのバージョンによってこれが必要。
まず、ローカルとプロダクションのバージョンがあってないのがダメだな…。

なかなか上げられないこともあるので、
ひとまずの対処法としては es6-promise をインストールすればok。

こんな感じになりました。

1
2
3
4
5
6
7
8
9
10
11
var Promise = require('es6-promise').Promise;
var path = require('path');

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    myEntry: './my/entry.js'
  },
...
}

これでエラー解消されていい感じ。
以上です。

参考

Module build failed: ReferenceError: Promise is not defined · Issue #145 · webpack/css-loader

Cannot find module './node_modules/babel-loader/index.js' · Issue #1260 · webpack/webpack

added es6-promise to fix polyfill issue · gregkbarnes/blank-canvas@f21b1f1

resolving

Shunsuke Sawada

おすすめの記事

webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)
爆速でウェブアプリを公開する方法(無料でSSL独自ドメイン)/ React + Typescript + Cloud Function + Firebase Hosting
2