Is there any way to use kotlin resources in webpac...

# javascript

[Ilya Goncharov [JB]]

Is there any way to use kotlin resources in webpack bundle in Kotlin/JS 1.3.40? Now there is error

ERROR in ....
  Module not found: Error: Can't resolve 'foo/bar.svg' in ...

[Roman Artemev [JB]]

Unfortunately resources are not supported in K/JS yet.

[snrostov]

@Ilya Goncharov [JB] At this point, you can only configure it manually by puting custom webpack config in webpack.config.d directory under project root, for example:

const path = require("path");
config.module.rules.push(
    {
        test: /\.svg$/,
        loader: "svg-inline-loader",
        options: {removeSVGTagAttrs: false},
        include: [
            path.resolve(require.resolve("@jetbrains/logos"), "..", "..")
        ]
    }
);

See https://github.com/snrostov/kfsad/tree/6e3194d8db9ae99786771fdfeecd6293710a04e6/client/webpack.config.d for more details.

Feel free to create issue and describe your use case.

[Ilya Goncharov [JB]]

Ok, thanks, now we add our resources folder to webpack's resolve.modules and use svg-inline-loader to load it

[Ilya Goncharov [JB]]

And plus one question. Is DCE works with 1.3.40 plugin?

[snrostov]

Should work, but webpack task may not work with that configuration.

[Gurupad Mamadapur [FH]]

@snrostov Can you please help me understand what this line does -

path.resolve(require.resolve("@jetbrains/logos")

Say I have SVG files under src/main/resources/img folder. What should be used?

[Ilya Goncharov [JB]]

@Gurupad Mamadapur [FH] Imagine that you need to require svg in your Kotlin/JS
for example you need to require svg to present it as a plain string
You need to say webpack what loader it should use, for svg it is svg-inline-loader
path.resolve(require.resolve("@jetbrains/logos") this line says find @jetbrains/logo and get path to it
If you have svg in your resources, now we copy resources to build directory, you can use through webpack.config.d `path.resolve(__dirname, “<relative-path-to-your-resources-relative-to `build/js/packages/your-module-name`”)

[Gurupad Mamadapur [FH]]

@Ilya Goncharov [JB] Thank you.

Can you elaborate on this one -
`relative-path-to-your-resources-relative-to `build/js/packages/your-module-name``

I see that those resources have been copied to this path - build/processedResources/Js/main/img/ Should I put this path and ask webpack to find the resources here? Sorry, I know very little of webpack and js.

[Ilya Goncharov [JB]]

Yes, it is okay too
Consider, that if you want to build multiproject, build/js/packages - is in root project build level, but processedResources is in subproject level
While you have single project, it is no matter

[Ilya Goncharov [JB]]

You can just declare require external function (standard way in js)
external fun require(module: String): String for example
And then in code
val svg = require('my.svg')