blocknotes/activeadmin_quill_editor

File to import not found or unreadable: activeadmin/quill_editor_input

Piyush-Chaudhary opened this issue · 10 comments

Piyush-Chaudhary commented

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 commented

Hey @Piyush-Chaudhary.

I made a test locally in this conditions:

  • created a new rails 6 (6.0.3.2) app using scaffolding
  • added ActiveAdmin
  • added activeadmin_quill_editor gem
  • changed database.yml production to point to development sqlite3 DB
  • precompiled assets with: RAILS_ENV=production bin/rails assets:precompile
  • launched with: RAILS_ENV=production RAILS_SERVE_STATIC_FILES=1 bin/rails s

It works as expected.

If you have more details related to this problem update the issue.

Piyush-Chaudhary commented

Thanks for the response @blocknotes.

I have a working application with Active Admin. After seeing your comment, I tried to install active_admin_quill_editor again.

  • I have added gem 'activeadmin_quill_editor', '~> 0.2.0' in Gemfile.
  • After bundle, I have added the
@import 'activeadmin/quill_editor/quill.snow';
@import 'activeadmin/quill_editor_input';

in app/javascripts/stylesheets/active_admin.scss due to which now it looks like:

@import "~@activeadmin/activeadmin/src/scss/mixins";
@import "~@activeadmin/activeadmin/src/scss/base";
@import 'activeadmin/quill_editor/quill.snow';
@import 'activeadmin/quill_editor_input';
  • Now by doing rake assets:precompile, it's giving the same error as above.
  • As per my current understanding for the Rails 6 architecture, there is no activeadmin/quill_editor/quil.snow under the node_modules folder due to which this happening.

Can you please confirm the line you have added in your app/javascripts/stylesheets/active_admin.scss and how are you importing the scss in your app? Also please confirm that is there any folder named as active_admin/quill_editor under your node_modules folder.

blocknotes commented

Can you please confirm the line you have added in your app/javascripts/stylesheets/active_admin.scss and how are you importing the scss in your app? Also please confirm that is there any folder named as active_admin/quill_editor under your node_modules folder.

node_modules is not relevant here because those styles are not imported from there but from the gem.
I have other gems that work in the same way without any issue.

You could try a bundle update on your project to see if some old dependency is breaking something.

Do you have a public repo for this project?

Piyush-Chaudhary commented

node_modules is not relevant here because those styles are not imported from there but from the gem.
I have other gems that work in the same way without any issue.

I got your point. And now I am able to resolve the above-mentioned error but the input in which I am mentioning as: :quill_editor is showing generally. Is there anything that I need to take care of. Please have a look at the screenshot for the current view what I am getting right now by adding it to the body column.
image

Do you have a public repo for this project?

No Dear.

blocknotes commented

Did you follow the install notes of the gem, right?
https://github.com/blocknotes/activeadmin_quill_editor#install
2 stylesheet files and 2 javascript files.
Any error in browser console? What's your browser?

Piyush-Chaudhary commented

Did you follow the install notes of the gem, right? 2 stylesheet files and 2 javascript files.

  • Yes

Any error in the browser console? What's your browser?

  • No error in the browser console. I am using google chrome.

Is this is allowed to put the below line in js files in rails 6 because I read somewhere that require word syntax is not anymore is use in rails 6 js and deprectaed now.

//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input
blocknotes commented

Is this is allowed to put the below line in js files in rails 6 because I read somewhere that require word syntax is not anymore is use in rails 6 js and deprectaed now.

//= require activeadmin/quill_editor/quill
//= require activeadmin/quill_editor_input

If you refer to using Webpacker in place of Sprocket then no, it's not deprecated - it is the "new standard" for Rails.
I think that ActiveAdmin supports webpacker but the default for them is still to use Sprocket.

pauloFernandes commented

I think I have the same problem here: I setup my new rails app using webpacker, so it cannot require js and scss direct from the gem, like the old ones. Now these assets comes from node_modules, imported as a npm dependency.

There's an awful way to do it, as a work around, which is described here. But I would like to know if there's already a way to work with this lib without doing that vendor trick

blocknotes commented

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';

?

  • 👍2
blocknotes commented

@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')