File to import not found or unreadable: activeadmin/quill_editor_input

While doing rake assets:precompile error came

yarn install v1.22.4
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.62s.
yarn install v1.22.4
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.62s.
Compiling...
Compilation failed:
Hash: 6cd44ea6996880e79c4b
Version: webpack 4.44.0
Time: 10107ms
Built at: 08/21/2020 11:27:10 PM
 16 assets
Entrypoint active_admin = js/active_admin-e37aab119cca8c723963.js js/active_admin-e37aab119cca8c723963.js.map
Entrypoint active_admin/print = css/active_admin/print-00bc6956.css js/active_admin/print-0ce7e3aa4d068f91afe4.js js/active_admin/print-0ce7e3aa4d068f91afe4.js.map
Entrypoint application = css/application-12aa721d.css js/application-877a5ded6ce244db0d6d.js js/application-877a5ded6ce244db0d6d.js.map
Entrypoint carousel = js/carousel-4e41295d4bda6a1b185d.js js/carousel-4e41295d4bda6a1b185d.js.map
Entrypoint custom = js/custom-a333ef4c836d3d026528.js js/custom-a333ef4c836d3d026528.js.map
[111] (webpack)/buildin/global.js 905 bytes {2} [built]
[114] (webpack)/buildin/module.js 552 bytes {2} [built]
[115] ./app/javascript/packs/carousel.js 489 bytes {2} {3} [built]
[131] ./app/javascript/packs/active_admin.js 246 bytes {0} [built]
[132] ./app/javascript/stylesheets/active_admin.scss 1.04 KiB {0} [built] [failed] [1 error]
[145] ./app/javascript/packs/active_admin/print.scss 39 bytes {1} [built]
[146] ./app/javascript/packs/application.js 1.01 KiB {2} [built]
[149] ./app/javascript/channels/index.js 205 bytes {2} [built]
[150] ./app/javascript/channels sync _channel\.js$ 160 bytes {2} [built]
[155] ./app/javascript/stylesheets/application.scss 39 bytes {2} [built]
[157] ./app/javascript/packs/custom.js 110 bytes {4} [built]
[158] ./node_modules/@rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {2} [built]
      |    2 modules
    + 149 hidden modules

ERROR in ./app/javascript/stylesheets/active_admin.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@import 'activeadmin/quill_editor_input';
^
      File to import not found or unreadable: activeadmin/quill_editor_input.
      in /home/piyush/palakart/app/javascript/stylesheets/active_admin.scss (line 19, column 1)
    at runLoaders (/home/piyush/palakart/node_modules/webpack/lib/NormalModule.js:316:20)
    at /home/piyush/palakart/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/piyush/palakart/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/piyush/palakart/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/home/piyush/palakart/node_modules/sass-loader/dist/index.js:89:7)
    at Object.done [as callback] (/home/piyush/palakart/node_modules/neo-async/async.js:8069:18)
    at options.error (/home/piyush/palakart/node_modules/node-sass/lib/index.js:294:32)
 @ ./app/javascript/packs/active_admin.js 3:0-36
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/packs/active_admin/print.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/packs/active_admin/print.scss 26.8 KiB {0} [built]
        + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/active_admin.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/active_admin.scss 310 bytes {0} [built] [failed] [1 error]
    
    ERROR in ./app/javascript/stylesheets/active_admin.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/active_admin.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    
    @import 'activeadmin/quill_editor_input';
    ^
          File to import not found or unreadable: activeadmin/quill_editor_input.
          in /home/piyush/palakart/app/javascript/stylesheets/active_admin.scss (line 19, column 1)
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--7-1!node_modules/postcss-loader/src/index.js??ref--7-2!node_modules/sass-loader/dist/cjs.js??ref--7-3!app/javascript/stylesheets/application.scss:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss 879 KiB {0} [built]
        + 1 hidden module

If I remove the line @import ‘activeadmin/quill_editor_input’; from active_admin.scss then no error in assets:precompile but also no toolbox in admin form input.

Thanks in advance.

[blocknotes]

Hey @pauloFernandes. Could you try this:

• add to your package.json: "activeadmin_quill_editor": "https://github.com/blocknotes/activeadmin_quill_editor"
• run yarn install
• add at the end of your app/javascript/packs/active_admin.js:

window.Quill = require('activeadmin_quill_editor/app/assets/javascripts/activeadmin/quill_editor/quill')
require('activeadmin_quill_editor/app/assets/javascripts/activeadmin/quill_editor_input')

• add at the end of your app/javascript/stylesheets/active_admin.scss:

@import 'activeadmin_quill_editor/app/assets/stylesheets/activeadmin/quill_editor/quill.snow';
@import 'activeadmin_quill_editor/app/assets/stylesheets/activeadmin/_quill_editor_input';

?

[blocknotes]

@Piyush-Chaudhary, @pauloFernandes: I opened a PR which permits to use my component in a Active Admin project installed with Webpacker.

If you want to make a test:

• execute: yarn add blocknotes/activeadmin_quill_editor#feature/webpacker-support
• add to app/javascript/packs/active_admin.js: require('activeadmin_quill_editor')