webpacker周りの修正

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

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

Cannot find module 'babel-plugin-syntax-dynamic-import'

.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

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

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を使う
postcss github

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

↑の通り修正したら書きエラーになった

[vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.

 yarn add extract-text-webpack-plugin

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 }
  }]
}

---

【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報

Rails5 / webpacker を heroku で動かす

Rails6でWebpackerの導入（Uikit・foreman）

---

なんかよくわかんないけど最初webpackerバージョンあげようとしたらこれにつまずいてこれもみてた
UglifyJsPluginは4からは書かなくてもやってくれるらしい
Webpack 4 - How to configure minimize?