React導入

[306-san]

• やったことないけど、やってやるの精神
  Rails5.1系からは

rails new myapp --webpack=react

としてやればReact環境込みでRailsアプリが作れるようになってる

[306-san]

DockerにNode入っていたけど、v4と古いのでv8入れるようなDockerfile書かないと

[306-san]

http://tech.mof-mof.co.jp/blog/try-rails5-1-0-with-webpacker-react.html
を参考に

rails webpacker:install:react

[306-san]

root@9763cb1ef4f8:/share# rails webpacker:install:react

webpack binstubs not found.
Have you run rails webpacker:install ?
Make sure the bin directory or binstubs are not included in .gitignore
Exiting!

[306-san]

rails webpacker:install

先にこれを実行する必要がありそう
https://blog.inomar.me/note/10

[306-san]

root@9763cb1ef4f8:/share# rails webpacker:install:react
Webpacker is installed 🎉 🍰
Using /share/config/webpacker.yml file for setting up webpack paths
Copying react preset to your .babelrc file
Copying react example entry file to /share/app/javascript/packs
      create  app/javascript/packs/hello_react.jsx
Updating webpack paths to include .jsx file extension
      insert  config/webpacker.yml
Installing all react dependencies
         run  yarn add react react-dom babel-preset-react prop-types from "."
yarn add v1.6.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning " > webpack-dev-server@3.1.4" has unmet peer dependency "webpack@^4.0.0-beta.1".
warning "webpack-dev-server > webpack-dev-middleware@3.1.3" has unmet peer dependency "webpack@^4.0.0".
error An unexpected error occurred: "EIO: i/o error, scandir '/share/node_modules/escope/powered-test'".
info If you think this is a bug, please open a bug report with the information provided in "/share/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
Webpacker now supports react.js 🎉

[306-san]

これでいいのか・・・？

[306-san]

https://qiita.com/kikunantoka/items/54f1859496003b1b1aff
これベースに作業

[306-san]

ログが出ない・・・

[306-san]

自己解決→デフォルトのトップじゃだめだった。なにかしらコントローラー使うようなページじゃないと・・・

[306-san]

root@1e65bff21a1a:/share# bin/webpack-dev-server
module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/share/node_modules/webpack-cli/bin/config-yargs.js:1:85)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

[306-san]

Nooooooo

[306-san]

rails/webpacker#1303 (comment)
webpack-dev-server3系はだめみたい

yarn upgrade webpack-dev-server@^2.11.1

で動いた。

[306-san]

WDSうんたらってでる

[306-san]

webpacker.ymlを修正したら動いた
FYI: https://qiita.com/neko-neko/items/453a1a3cfb1eaa324ef6#webpacker-dev-server%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B

dev_server:
  host: 0.0.0.0
  port: 3035
  public: localhost:3035

[306-san]

root@df8a8a5b9a2a:/share# bin/webpack-dev-server
 10% building modules 2/2 modules 0 active
Project is running at http://localhost:3035/
webpack output is served from /packs/
Content not from webpack is served from /share/public/packs
404s will fallback to /index.html
Hash: d490cab3d803c8d8b959
Version: webpack 3.12.0
Time: 2549ms
                                  Asset       Size  Chunks                    Chunk Names
    hello_react-a00c0c6dde1cd7cd320e.js     331 kB       0  [emitted]  [big]  hello_react
    application-b80295cdd2b19c8c0752.js     331 kB       1  [emitted]  [big]  application
hello_react-a00c0c6dde1cd7cd320e.js.map     383 kB       0  [emitted]         hello_react
application-b80295cdd2b19c8c0752.js.map     383 kB       1  [emitted]         application
                          manifest.json  282 bytes          [emitted]
   [2] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} {1} [built]
   [3] ./node_modules/url/url.js 23.3 kB {0} {1} [built]
   [4] ./node_modules/punycode/punycode.js 14.7 kB {0} {1} [built]
   [7] ./node_modules/querystring-es3/index.js 127 bytes {0} {1} [built]
  [10] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
  [12] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} {1} [built]
  [13] (webpack)-dev-server/client/socket.js 1.08 kB {0} {1} [built]
  [15] (webpack)-dev-server/client/overlay.js 3.67 kB {0} {1} [built]
  [20] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} [built]
  [22] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
  [23] ./node_modules/events/events.js 8.33 kB {0} {1} [built]
  [24] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {1} [built]
  [25] ./app/javascript/packs/application.js 515 bytes {1} [built]
  [26] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_react.jsx 40 bytes {0} [built]
  [27] ./app/javascript/packs/hello_react.jsx 802 bytes {0} [built] [failed] [1 error]
    + 13 hidden modules

ERROR in ./app/javascript/packs/hello_react.jsx
Module build failed: SyntaxError: Unexpected token (10:2)

   8 |
   9 | const Hello = props => (
> 10 |   <div>Hello {props.name}!</div>
     |   ^
  11 | )
  12 |
  13 | Hello.defaultProps = {

BabelLoaderError: SyntaxError: Unexpected token (10:2)

   8 |
   9 | const Hello = props => (
> 10 |   <div>Hello {props.name}!</div>
     |   ^
  11 | )
  12 |
  13 | Hello.defaultProps = {

    at transpile (/share/node_modules/babel-loader/lib/index.js:65:13)
    at /share/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/share/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/hello_react.jsx
webpack: Failed to compile.

ぬーん

[306-san]

http://otiai10.hatenablog.com/entry/2016/04/17/190802