SVG Icon is not display for the Vue project (without NUXT) about ripple

[tim-yao]

@joseph-so I have added the example in above PR, it should solve your problem.
You will need to install some dependencies https://github.com/dpc-sdp/ripple/pull/535/files#diff-dc87251d6ad06a2a7c9c30d8ecc0fe8aR16 and update your webpack config https://github.com/dpc-sdp/ripple/pull/535/files#diff-087bca1ee15ae547fe848aae20091ce6R23

Cheers.

[joseph-so]

Hi @tim-yao ,
Thanks for it. I try to follow your instruction to add the npm package (i add as yarn) and update the webpack config,
but when i try to run it , i receive a lot of warning like this

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
Error: Cannot find module 'webpack/package.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)

and the vue serve still did not show any image

Thanks

[tim-yao]

@joseph-so Please make sure you test this example as an individual project.

1. In terminal, make sure you are inside the directory of examples/vue-example-app/.
2. Run yarn install or npm install to install all the dependencies.
3. Run yarn serve or npm run serve.

Let me know if it works for you. Cheers.

[joseph-so]

@tim-yao The error is gone when i downgrade the svg-sprite-loader from 4.1.6 to 4.1.0. I may try to find out which latest version without this issue. (I just pick 4.1.0 randomly)

[joseph-so]

@tim-yao get the error from svg-sprite-loader 4.1.4+ , if I use svg-sprite-loader 4.1.3- , I don't face this error

Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
Error: Cannot find module 'webpack/package.json'

[tim-yao]

@joseph-so I can't reproduce the issue with npm and the example code which has svg-sprite-loader v4.1.6. I did get build error in yarn, which looks like there are some package version conflicts within workspaces. But if you take this example out of this monorepo project and run it isolated with yarn, should be fine.

I am going to have look at that error and add tests later. Thanks for report! 👍

[tim-yao]

Example for vue.js app has been added in https://github.com/dpc-sdp/ripple/tree/develop/examples/vue-example-app