From 16b4b949fa9a53df42ce609f7401ce7a4f90a570 Mon Sep 17 00:00:00 2001 From: Rafath Khan Date: Thu, 18 Feb 2021 07:19:59 +0100 Subject: [PATCH] js doesnt work, hot reload doesnt work, tailwind works --- app/javascript/packs/application.js | 13 +++- app/javascript/packs/hello_react.jsx | 2 + app/javascript/stylesheets/application.scss | 5 +- babel.config.js | 1 + config/webpack/custom.js | 20 ++---- config/webpacker.yml | 3 +- package.json | 7 +-- postcss.config.js | 2 + yarn.lock | 69 +++++++++++++++++++-- 9 files changed, 92 insertions(+), 30 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index b52d0ff..0d2f4aa 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -6,14 +6,23 @@ // import 'core-js/stable'; // import 'regenerator-runtime/runtime'; // console.log('**************') - +alert('xxx'); import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" -import '../stylesheets/application.scss'; +alert('yyyy'); +// +import '../stylesheets/application.scss'; +// Rails.start() Turbolinks.start() ActiveStorage.start() + + + +// +// console.log('helllo world --- ') +// alert('xxx'); diff --git a/app/javascript/packs/hello_react.jsx b/app/javascript/packs/hello_react.jsx index 772fc97..3a451ba 100644 --- a/app/javascript/packs/hello_react.jsx +++ b/app/javascript/packs/hello_react.jsx @@ -6,6 +6,8 @@ import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' +alert('react'); + const Hello = props => (
Hello {props.name}!
) diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 73f69bc..235e647 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -1,4 +1,7 @@ +@import "~tailwindcss/base"; +@import "~tailwindcss/components"; +@import "~tailwindcss/utilities"; body { - background-color: #333; + background-color: #111; } diff --git a/babel.config.js b/babel.config.js index 4df1949..e3bac31 100644 --- a/babel.config.js +++ b/babel.config.js @@ -38,6 +38,7 @@ module.exports = function(api) { ].filter(Boolean), plugins: [ 'babel-plugin-macros', + 'react-hot-loader/babel', '@babel/plugin-syntax-dynamic-import', isTestEnv && 'babel-plugin-dynamic-import-node', '@babel/plugin-transform-destructuring', diff --git a/config/webpack/custom.js b/config/webpack/custom.js index 318a0ee..e6a2fcc 100644 --- a/config/webpack/custom.js +++ b/config/webpack/custom.js @@ -6,20 +6,8 @@ module.exports = { ReactDOM: 'react-dom', } }, - module: { - rules: [ - { - test: /\.css$/i, - use: [ - "style-loader", - "css-loader" - ] - }, - { - test: /\.s[ac]ss$/i, - use: ["css-loader", "postcss-loader", { loader: "sass-loader", options: { implementation: require("sass") } }, - ], - }, - ], - } + devServer: { + compress: true, + port: 3035, + }, } diff --git a/config/webpacker.yml b/config/webpacker.yml index 8fec082..c237566 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -14,6 +14,7 @@ default: &default # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false +# extract_css: true development: <<: *default @@ -26,7 +27,7 @@ development: port: 3035 public: localhost:3035 # Hot Module Replacement updates modules while the application is running without a full reload - hmr: false + hmr: true # Inline should be set to true if using HMR; it inserts a script to take care of live reloading inline: true # Should we show a full-screen overlay in the browser when there are compiler errors or warnings? diff --git a/package.json b/package.json index 5ea2234..b77fb4d 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "postcss-import": "^14.0.0", "postcss-loader": "^5.0.0", "postcss-preset-env": "^6.7.0", + "react-hot-loader": "^4.13.0", "sass": "^1.32.6", "sass-loader": "^11.0.0", "style-loader": "^2.0.0", @@ -43,12 +44,6 @@ "./node_modules/@rails/webpacker/package/babel/preset.js" ] }, - "browserslist": [ - "defaults" - ], - "babel": { - "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"] - }, "browserslist": [ "defaults" ] diff --git a/postcss.config.js b/postcss.config.js index aa5998a..7b73401 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,8 @@ module.exports = { plugins: [ + require('autoprefixer'), require('postcss-import'), + require('tailwindcss'), require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { diff --git a/yarn.lock b/yarn.lock index 72c90aa..4d4a38e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2078,6 +2078,11 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" +dom-walk@^0.1.0: + version "0.1.2" + resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" + integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -2337,6 +2342,11 @@ fast-json-stable-stringify@^2.0.0: resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== +fast-levenshtein@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" + integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= + fastest-levenshtein@^1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2" @@ -2546,6 +2556,14 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6: once "^1.3.0" path-is-absolute "^1.0.0" +global@^4.3.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" + integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== + dependencies: + min-document "^2.19.0" + process "^0.11.10" + globals@^11.1.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" @@ -2625,6 +2643,13 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hpack.js@^2.1.6: version "2.1.6" resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2" @@ -3140,7 +3165,7 @@ loader-runner@^4.2.0: resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw== -loader-utils@^1.4.0: +loader-utils@^1.1.0, loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== @@ -3366,6 +3391,13 @@ mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +min-document@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" + integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU= + dependencies: + dom-walk "^0.1.0" + mini-css-extract-plugin@^1.3.5: version "1.3.5" resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.5.tgz#252166e78879c106e0130f229d44e0cbdfcebed3" @@ -4258,7 +4290,12 @@ process-nextick-args@~2.0.0: resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag== -prop-types@^15.7.2: +process@^0.11.10: + version "0.11.10" + resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" + integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= + +prop-types@^15.6.1, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -4354,11 +4391,30 @@ react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" -react-is@^16.8.1: +react-hot-loader@^4.13.0: + version "4.13.0" + resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202" + integrity sha512-JrLlvUPqh6wIkrK2hZDfOyq/Uh/WeVEr8nc7hkn2/3Ul0sx1Kr5y4kOGNacNRoj7RhwLNcQ3Udf1KJXrqc0ZtA== + dependencies: + fast-levenshtein "^2.0.6" + global "^4.3.0" + hoist-non-react-statics "^3.3.0" + loader-utils "^1.1.0" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + shallowequal "^1.1.0" + source-map "^0.7.3" + +react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" @@ -4767,6 +4823,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -4893,7 +4954,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@~0.7.2: +source-map@^0.7.3, source-map@~0.7.2: version "0.7.3" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==