SVG loading breaks vue production build about ripple HOT 6 CLOSED

Thanks @abubics It sounds the Webpack build process called some client only code. document is a browser only thing. I think your app is a client side app not using server side rendering right? I will leave you to investigate and find more information. Thanks!

from ripple.

We figured this out. We were customising the svgRule in vue.config.js. We need to use url-loader so that

    config.module.rule('svg').exclude
      .add(resolve(__dirname, path.dirname(require.resolve('@dpc-sdp/ripple-global/package.json'))));

    config.module
      .rule('svg-url')
      .test(/\.svg$/i)
      .use('url-loader').loader('url-loader')
      .end();

from ripple.

Thanks @gazal-k for updating what you got! That make sense if you have your own loader. I will close this issue now as it's resolved in your side.

from ripple.

Thanks @abubics for raise the issue here!

For SVG icons, yes, we did a change on how to add custom icons. However, it's not a breaking change, your app can work without migrating to the new implementation. Do you know if your project has custom Ripple icons? If not, you can just remove old implementation like here https://github.com/dpc-sdp/ripple/pull/774/files#diff-e98f43f1a2c175915ef9aea0f011c5085b58c9fa241d6d20d19a9ef28b00c7eeL1
If you do, you can still remove as above and migrate to the new way to register custom icon https://github.com/dpc-sdp/ripple/blob/master/packages/components/Atoms/Icon/README.md#registering-custom-icons
Examples: https://github.com/dpc-sdp/ripple/tree/master/examples/basic-examples/assets/ripple-icon

For the error:

 error  in ./node_modules/@dpc-sdp/ripple-pagination/PrevNext.vue?vue&type=style&index=0&lang=scss&

Syntax Error: ReferenceError: document is not defined

I can't reproduce it in my example vue cli app when I add PrevNext component then run vue-cli-service build --mode production. Also I couldn't see document is used in PrevNext.vue so I am not able to debug it. The error self not make much sense to me.

I will suggest try migrate the svg icon then see if the issue fixed.
It also will be helpful if you can create a repo which can reproduce the issue. Cheers!

from ripple.

Thanks for the quick response, @tim-yao!

I can see a couple of custom <rpl-icon ...> tags in the codebase, I'll check them out, and try the new custom registration. If that doesn't get us anywhere, I'll see if we have time to make a repro repo . . . we have some delivery pressure atm.

I did look through the pagination package, and anything else that seemed to be implicated, and (just like you) also couldn't find any document references, so I assumed it's something weird in the webpack setup.

And also, since it was raised months ago (before we inherited it), I guessed it's also unlikely to be related to that PR's changes. Thanks for confirming :)

from ripple.

Yeah, exactly. We'll jump back in this thread once we figure more out :)

from ripple.