search

nystudio107 / rollup-plugin-critical

Vite.js & Rollup plugin for generating critical CSS
MIT License
91 stars 11 forks source link

Warning: Missing base path. Consider 'base' option. #1

Closed Saboteur777 closed 3 years ago

Saboteur777 commented 3 years ago

Question

Getting the following error when running npm run build:

Warning: Missing base path. Consider 'base' option.

My config: 

    critical({
      criticalUrl: 'http://web',
      criticalBase: './web/dist/criticalcss/',
      criticalPages: [
        { uri: '/', template: 'index' },
      ],
    }),

web is one of my service in my Docker-based setup.

Full output:

> webmenedzser_craft@3.0.0 build /app
> vite build

postcss-discard: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
vite v2.3.7 building for production...
transforming (14) src/vue/Confetti.vue[vite:css] /app/src/css/utils/typography.pcss is empty
1  |  @import 'tailwindcss/base';
2  |  @import 'tailwindcss/components';
   |   ^
3  |  @import 'tailwindcss/utilities';
4  |  
[vite:css] /app/src/css/utils/vendor.pcss is empty
2  |  @import 'tailwindcss/components';
3  |  @import 'tailwindcss/utilities';
4  |  
   |   ^
5  |  @import 'utils/base.pcss';
6  |  @import 'components/base.pcss';
✓ 27 modules transformed.
rendering chunks (1)...Sourcemap is likely to be incorrect: a plugin (vite:css-post) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:import-analysis) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (3)...Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
web/dist/assets/lazysizes-legacy.f22f6e95.js   7.38kb / brotli: 3.05kb
web/dist/assets/lazysizes-legacy.f22f6e95.js.map 22.53kb
web/dist/assets/app-legacy.5f35c5f0.js         22.24kb / brotli: 4.91kb
web/dist/assets/app-legacy.5f35c5f0.js.map     0.10kb
web/dist/assets/vendor-legacy.bff03df2.js      22.88kb / brotli: 7.92kb
web/dist/assets/vendor-legacy.bff03df2.js.map  0.10kb
web/dist/assets/polyfills-legacy.549bb6d1.js   41.76kb / brotli: 14.76kb
rendering chunks (1)...Sourcemap is likely to be incorrect: a plugin (vite:import-analysis) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (3)...Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (vite:define) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Generating critical CSS from http://web/ to index_critical.min.css
web/dist/assets/WorkSans-Regular.ec25aa37.woff2      69.74kb
web/dist/assets/WorkSans-Italic.abb054a7.woff2       64.42kb
web/dist/assets/WorkSans-Bold.a616b751.woff2         74.10kb
web/dist/assets/WorkSans-BoldItalic.3afecc5a.woff2   68.47kb
web/dist/assets/WorkSans-Black.138beb40.woff2        68.54kb
web/dist/assets/FiraCode-Regular.105c876c.woff2      100.75kb
web/dist/assets/FiraCode-Bold.72e84e14.woff2         104.87kb
web/dist/assets/WorkSans-Italic.fe920528.woff        90.39kb
web/dist/assets/WorkSans-BoldItalic.8fa25a73.woff    95.96kb
web/dist/assets/WorkSans-Black.17ea169f.woff         92.05kb
web/dist/assets/WorkSans-Regular.6f8cccb6.woff       96.48kb
web/dist/assets/WorkSans-Bold.bddfac33.woff          102.63kb
web/dist/assets/FiraCode-Regular.33b9f771.woff       131.13kb
web/dist/assets/FiraCode-Bold.78408fee.woff          136.86kb
web/dist/manifest.json                               2.36kb
web/dist/assets/app.70bede6d.js                      2.00kb / brotli: 0.90kb
web/dist/assets/app.70bede6d.js.map                  0.09kb
web/dist/assets/lazysizes.6959aafd.js                7.30kb / brotli: 3.03kb
web/dist/assets/lazysizes.6959aafd.js.map            33.43kb
web/dist/assets/app.97a6b99f.css                     21.13kb / brotli: 4.39kb
web/dist/assets/vendor.323c439a.js                   22.81kb / brotli: 7.88kb
web/dist/assets/vendor.323c439a.js.map               23.83kb
Warning: Missing base path. Consider 'base' option. https://goo.gl/PwvFVb

Additional context

Did almost every changes (except for cms/templates/_boilerplate/_partials/critical-css.twig) found here: https://github.com/nystudio107/craft/commit/487ad1ff1197a22a78829c1fe6ee7bb26b7c9afe

Adding base option to critical itself or to criticalConfig did not help. The criticalCSS files are generated fine, though.

khalwat commented 3 years ago

So everything works, but you're seeing that warning?

It leads here: https://github.com/addyosmani/critical#options

Which is a little confusing to me, because we're setting it here:

https://github.com/nystudio107/rollup-plugin-critical/blob/master/src/index.ts#L57

Saboteur777 commented 3 years ago

Exactly, that's why I thought opening an issue would be useful.

image

As you can see, the index and contact criticalCSS files are generated fine (with different content inside them).

khalwat commented 3 years ago

Looks like it could happen due to lack of CSS:

https://github.com/addyosmani/critical/blob/master/src/file.js#L446

If you search on BASE_WARNING you can see 2 other places where this error is omitted, but I'm betting this is CSS-related, because we definitely are passing the path in, and I'm not seeing this error.

Saboteur777 commented 3 years ago

Thanks for going after this, it happens here: https://github.com/addyosmani/critical/blob/master/src/file.js#L575

image

It happens because there is no stylesheet referenced with <link rel="stylesheet" ...>. When I added this to the <head>, the warning was gone.

khalwat commented 3 years ago

That's pretty interesting -- I think you can ignore the warning, because the Critical plugin provides the CSS generated by Vite for Critical to use, so it shouldn't need to scrape anything from the HTML document itself.

svondervoort commented 2 years ago

The warning still occurs, but it's comforting to see we can ignore it, and the critical CSS is still being generated as it should.