Virtual module and virtual path

[Vincz]

Hi! I'm trying to use your plugin to add react components at build time in my project. My project has a the following folders:

./webpack-config.js
./src/routes/index.js
./src/extensions/

The folder ./src/extensions is empty. The src/routes/index.js looks like this:

import MyExtension from "../extensions/MyExtension"

In my webpack configuration, I have the babel-loader for js file and I tried to add a VirtualModule like this:

configuration.plugins.push(
    new VirtualModulePlugin({
        moduleName: __dirname + `/src/extensions/MyExtension.js`,
        contents:   fs.readFileSync(path_to_a_js_file_somewhere_on_the_disk).toString()
    })
) 

I'd like webpack to act like src/extensions/MyExtension.js was a real file but it keeps failing with:

Error: Can't resolve '../extensions/MyExtension' in `src/routes/index`

The idea is to be able to add "extensions" to my project at build time.

Don't know if it's related but when I use the plugin this way, I get the following output in the console:

(node:39653) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:39653) Warning: a promise was created in a handler at domain.js:102:23 but was not returned from it, see http://goo.gl/rRqMUw

Any idea?

Many thanks ! :)

[rmarscher]

Try using

configuration.plugins.push(
    new VirtualModulePlugin({
        moduleName: `extensions/MyExtension.js`,
        contents:   fs.readFileSync(path_to_a_js_file_somewhere_on_the_disk).toString()
    })
) 

The module name needs to be a relative path to the webpack context directory.

[Vincz]

So, I tried what you suggest, I set the webpack context to src/ and I used extensions/MyExtension.js as the moduleName. But I'm still unable to resolve this module within my react code. I keep getting Error: Can\'t resolve XXX no matter what config I use. I'm using webpack 4.5, could it be related ? Thanks!

[rmarscher]

It’s possible that 4.5 introduced a new issue. The last version I tested was 4.1. If you look at https://github.com/rmarscher/virtual-module-webpack-plugin/tree/master/examples/webpack-4 it sets the context to __dirname and includes /src in the moduleName. Perhaps that would work for you. Otherwise, I’ll probably need to dig in more and try with webpack 4.5. On Fri, Apr 20, 2018 at 8:03 AM Vincent notifications@github.com wrote:

So, I tried what you suggest, I set the webpack context to src/ and I used extensions/MyExtension.js as the moduleName. But I'm still unable to resolve this module within my react code. I keep getting Error: Can\'t resolve XXX no matter what config I use. I'm using webpack 4.5, could it be related ? Thanks!

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/rmarscher/virtual-module-webpack-plugin/issues/24#issuecomment-383074721, or mute the thread https://github.com/notifications/unsubscribe-auth/AAViqZ9r9EgAQSl_fiPU6QaJJ_VY5KkWks5tqc6NgaJpZM4TVaSk .

[Vincz]

I'm so sorry. I tested with webpack 4.5 and 4.6 and your example just works fine. I managed to make it works, and my problem was not related to your plugin. I'm sorry, I wasted your time 🙏