webpacker周りの修正

webpacker3, rails5.2のアプリをクローンしたときにwebpacker周りのエラーに見舞われて直した時の自分用の備忘録です。

これを直した後、webpacker5.1.1、rails6にあげました。


# Cannot find module 'babel-plugin-syntax-dynamic-import' 
https://github.com/rails/webpacker/issues/1923

`.babelrc`削除


# pry-doc verisonup

```
08:35:35 web.1       | 	from bin/rails:4:in `<main>'
08:35:35 web.1       | ruby/2.7.1 isn't supported by this pry-doc version
08:35:35 web.1       | exited with code 1
08:35:35 system      | sending SIGTERM to all processes
08:35:40 system      | sending SIGKILL to all processes
nosappunoMacBook-Pro@nosappu ~/desktop/ruby/designcase_hp$ bundle update pry-doc

```

#  uninitialized constant Pry::Command::ExitAll (NameError)

```
 bundle update pry-byebug
```
https://github.com/pry/pry/issues/2121

#  undefined method `new_ostruct_member' for #<Config::Options> (NoMethodError)

https://qiita.com/tttkkkkk/items/f54adc8b7e48dea45e98
#Uncaught Error: Module parse failed: Unexpected token (2:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

https://github.com/symfony/webpack-encore/issues/321
https://github.com/webpack/webpack/issues/8656
↑より
package.jsonに

```
"acorn": "^6.0.5"
```

# Module Error (from ./node_modules/vue-loader/lib/index.js):vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.


未解決
https://qiita.com/kazutosato/items/c0e508f15b9a03f3dd6b
これみてみた



# Cannot find module 'postcss-cssnext'

```
rails webpacker:install 
```

webpack4以上だと自動的にpostcss.config.jsが作られるらしい
[Rails & Webpacker環境でPostCSSを使う](https://qiita.com/yamashun/items/587e487a885a5291e3a2)
[postcss github](https://github.com/postcss/postcss-loader)

gemfileでwebpackerのバージョンをあげていたのでwebpackerのinstallをし直さなければいけなかった

```
gem 'webpacker', '~> 5.0'
```


```
yarn add postcss-cssnext
```
```postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    require('postcss-cssnext') #追加
  ]
}
```


# Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example

http://babababand.hatenablog.com/entry/2019/04/22/173439

↑の通り修正したら書きエラーになった
# [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.

```
 yarn add extract-text-webpack-plugin
```

```js

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
// const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { ExtractTextPlugin }
  }]
}
```
https://qiita.com/kudo_kk/items/aef908a3434e85739323

-------

[【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報](https://techracho.bpsinc.jp/hachi8833/2018_05_17/56568)

[Rails5 / webpacker を heroku で動かす](https://blog.tanaka.world/rails5-webpacker-on-heroku/)

[Rails6でWebpackerの導入（Uikit・foreman）](https://www.blograils.com/posts/25)



------

なんかよくわかんないけど最初webpackerバージョンあげようとしたらこれにつまずいてこれもみてた
`UglifyJsPlugin`は4からは書かなくてもやってくれるらしい
[Webpack 4 - How to configure minimize?](https://stackoverflow.com/questions/49053215/webpack-4-how-to-configure-minimize)