What is the current behavior?
Using babel-plugin-module-resolver with the root alias to my project's src directory in tandem with a resourceQuery fails to compile. The module is not found when using an import that is project relative with a resourceQuery applied.
e.g. Suppose the root path for imports inside the build are aliased to my project's src folder. import FooSVG from "/root_relative_path_to/foo.svg?inline" will lead to a similar error message and the module will not be found.
Setup project according to that branch's README. Ignore the yarn errors, it'll work fine as that's an issue with our submodule, I promise.
Execute npm run dev in the main repository.
Please do note that this project uses a build script rather than relying on the webpack cli. The config files will be used slightly differently compared to regular projects.
The result should be an error within /src/pages/Home.vue where the resource with resourceQuery is not having its path resolved by babel-plugin-module-resolver despite having set a root alias (and therefore fails to compile). I've also switched around the svgRule settings in /config/webpack.config.js where the resourceQuery is applied to the file-loader rather than the vue-svg-loader and the same problem occurred with the file-loader as a test (not included in the HEAD of that branch). The aforementioned test demonstrated that the issue does not discriminate between loaders. The issue now lies with webpack or the babel plugin. I suspect the problem is coming from the application of babel-plugin-module-resolver not handling root relative queries correctly.
What is the expected behavior?
The project's home page should compile and load without issue and the the module should be found when using babel-plugin-module-resolver with an alias set to the project's src folder with a resourceQuery applied to the import statement.
I'm filing the issue here first since I was able to resolve it using webpack's built-in resolve aliased to ~/ instead of /, but babel-plugin-module-resolver was not.
Bug report
What is the current behavior? Using babel-plugin-module-resolver with the root alias to my project's
srcdirectory in tandem with aresourceQueryfails to compile. The module is not found when using an import that is project relative with aresourceQueryapplied.e.g. Suppose the root path for imports inside the build are aliased to my project's
srcfolder.import FooSVG from "/root_relative_path_to/foo.svg?inline"will lead to a similar error message and the module will not be found.If the current behavior is a bug, please provide the steps to reproduce. https://github.com/Thulinma/ACNLPatternTool/tree/webpack-issue
Clone the above repository
Setup project according to that branch's README. Ignore the yarn errors, it'll work fine as that's an issue with our submodule, I promise.
Execute
npm run devin the main repository.Please do note that this project uses a build script rather than relying on the webpack cli. The config files will be used slightly differently compared to regular projects.
The result should be an error within
/src/pages/Home.vuewhere the resource with resourceQuery is not having its path resolved by babel-plugin-module-resolver despite having set a root alias (and therefore fails to compile). I've also switched around thesvgRulesettings in/config/webpack.config.jswhere theresourceQueryis applied to the file-loader rather than the vue-svg-loader and the same problem occurred with the file-loader as a test (not included in the HEAD of that branch). The aforementioned test demonstrated that the issue does not discriminate between loaders. The issue now lies with webpack or the babel plugin. I suspect the problem is coming from the application of babel-plugin-module-resolver not handling root relative queries correctly.What is the expected behavior? The project's home page should compile and load without issue and the the module should be found when using babel-plugin-module-resolver with an alias set to the project's
srcfolder with a resourceQuery applied to the import statement.Other relevant information: webpack version: 4.41.6 Node.js version: 13.7.0 Operating System: macOS Additional tools:
I'm filing the issue here first since I was able to resolve it using webpack's built-in resolve aliased to
~/instead of/, but babel-plugin-module-resolver was not.