Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix configuration for external images #44

Closed
rodfersou opened this issue Sep 28, 2018 · 3 comments · Fixed by #56
Closed

Fix configuration for external images #44

rodfersou opened this issue Sep 28, 2018 · 3 comments · Fixed by #56

Comments

@rodfersou
Copy link
Member

When try to reference images external from our CSS into SCSS files we get some traceback, for example if the image is from other package like this:

#contentchooser-content-search .close {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-image: url('++resource++plone.app.jquerytools.pb_close.png');
}

This traceback come from webpack:

ERROR in ./app/cover.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './++resource++plone.app.jquerytools.pb_close.png' in '/home/rodfersou/.projects/collective.cover/webpack/app'
    at factoryCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/webpack/lib/Compilation.js:282:40)
    at factory (/home/rodfersou/.projects/collective.cover/webpack/node_modules/webpack/lib/NormalModuleFactory.js:237:20)
    at resolver (/home/rodfersou/.projects/collective.cover/webpack/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
    at asyncLib.parallel (/home/rodfersou/.projects/collective.cover/webpack/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
    at /home/rodfersou/.projects/collective.cover/webpack/node_modules/async/dist/async.js:3888:9
    at /home/rodfersou/.projects/collective.cover/webpack/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/async/dist/async.js:1062:13)
    at /home/rodfersou/.projects/collective.cover/webpack/node_modules/async/dist/async.js:969:16
    at /home/rodfersou/.projects/collective.cover/webpack/node_modules/async/dist/async.js:3885:13
    at resolvers.normal.resolve (/home/rodfersou/.projects/collective.cover/webpack/node_modules/webpack/lib/NormalModuleFactory.js:119:22)
    at onError (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:65:10)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/rodfersou/.projects/collective.cover/webpack/node_modules/tapable/lib/Tapable.js:252:11)
    at /home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:40:4
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at runAfter (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:158:4)
    at innerCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:146:3)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/rodfersou/.projects/collective.cover/webpack/node_modules/tapable/lib/Tapable.js:252:11)
    at innerCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:144:11)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/rodfersou/.projects/collective.cover/webpack/node_modules/tapable/lib/Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:44:6)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at afterInnerCallback (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/Resolver.js:168:10)
    at loggingCallbackWrapper (/home/rodfersou/.projects/collective.cover/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
    at next (/home/rodfersou/.projects/collective.cover/webpack/node_modules/tapable/lib/Tapable.js:252:11)
 @ ./app/cover.scss
 @ multi ./app/img/dot.png ./app/img/tile-banner.png ./app/img/tile-basic.png ./app/img/tile-calendar.png ./app/img/tile-carousel.png ./app/img/tile-collection.png ./app/img/tile-contentbody.png ./app/img/tile-embed.png ./app/img/tile-file.png ./app/img/tile-generic.png ./app/img/tile-list.png ./app/img/tile-pfg.png ./app/img/tile-richtext.png ./app/cover.scss ./app/cover.js
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!app/cover.scss:
                  Asset       Size  Chunks             Chunk Names
     img/resize-hor.png  378 bytes          [emitted]
         img/remove.png  565 bytes          [emitted]
        img/spinner.gif    2.88 kB          [emitted]
           img/move.png  239 bytes          [emitted]
       img/drophere.png  579 bytes          [emitted]
           img/conf.png  303 bytes          [emitted]
     img/visibility.png    1.31 kB          [emitted]
    img/arrow-right.gif  128 bytes          [emitted]
     img/arrow-left.gif  149 bytes          [emitted]
           img/rows.png  197 bytes          [emitted]
        img/columns.png  220 bytes          [emitted]
          img/tiles.png  117 bytes          [emitted]
       [2] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss 21.5 kB {1} [built]
        + 14 hidden modules

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss
    Module not found: Error: Can't resolve './++resource++plone.app.jquerytools.pb_close.png' in '/home/rodfersou/.projects/collective.cover/webpack/app'
     @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss 7:6933-6992
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/postcss-loader/lib/index.js!node_modules/sass-loader/lib/loader.js!app/cover.scss:
                  Asset       Size  Chunks             Chunk Names
     img/resize-hor.png  378 bytes          [emitted]
         img/remove.png  565 bytes          [emitted]
        img/spinner.gif    2.88 kB          [emitted]
           img/move.png  239 bytes          [emitted]
       img/drophere.png  579 bytes          [emitted]
           img/conf.png  303 bytes          [emitted]
     img/visibility.png    1.31 kB          [emitted]
    img/arrow-right.gif  128 bytes          [emitted]
     img/arrow-left.gif  149 bytes          [emitted]
           img/rows.png  197 bytes          [emitted]
        img/columns.png  220 bytes          [emitted]
          img/tiles.png  117 bytes          [emitted]
       [0] ./app/img/remove.png 60 bytes {0} [built]
       [1] ./app/img/visibility.png 64 bytes {0} [built]
       [2] ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss 21.5 kB {0} [built]
       [5] ./app/img/spinner.gif 61 bytes {0} [built]
       [6] ./app/img/move.png 58 bytes {0} [built]
       [7] ./app/img/drophere.png 62 bytes {0} [built]
       [8] ./app/img/conf.png 58 bytes {0} [built]
       [9] ./app/img/resize-hor.png 64 bytes {0} [built]
      [10] ./app/img/arrow-right.gif 65 bytes {0} [built]
      [11] ./app/img/arrow-left.gif 64 bytes {0} [built]
      [12] ./app/img/rows.png 58 bytes {0} [built]
      [13] ./app/img/columns.png 61 bytes {0} [built]
      [14] ./app/img/tiles.png 59 bytes {0} [built]
        + 2 hidden modules

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss
    Module not found: Error: Can't resolve './++resource++plone.app.jquerytools.pb_close.png' in '/home/rodfersou/.projects/collective.cover/webpack/app'
     @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./app/cover.scss 7:6933-6992

Since this kind of URL is common we should avoid this error.

The current know method to fix it is to bring a copy of the image inside the project and reference locally.
@rodfersou rodfersou mentioned this issue Sep 28, 2018
Merged
10 tasks
@rodfersou
Copy link
Member Author

webpack-contrib/css-loader#779

@rodfersou
Copy link
Member Author

There is a new release of css-loader with the feature needed to fix this issue.

@rodfersou rodfersou mentioned this issue Dec 31, 2018
Merged
@rodfersou
Copy link
Member Author

@hvelarde @agnogueira @idgserpro I tried to create a PR here but don't have permissions anymore. Since this project is used by IDG, it should be in collective: #44

This PR fixes to don't try to evaluate plone external urls: https://github.com/simplesconsultoria/sc.recipe.staticresources/pull/56/files

I created this PR by a fork, this has a problem that I can't assign someone to make revision anymore.

Also will need a new release after merge this (I don't have permissions for this)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Respect Plone external url
1 participant
@rodfersou