Incorrect reference to source-map-support/register when using backpack in yarn workspaces

[SebastianG77]

Hi,

when calling backpack build on a Windows OS in a project that is contained in a yarn workspace, the reference to the module source-map-support/register will not be added correctly to the built main.js

Here is my example:

package.json of workspace:

{
  "private": true,
  "workspaces": ["check-backpack"]
}

package.json of check-backpack:

{
  "name": "ckeck-backpack",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "devDependencies": {
    "backpack-core": "^0.8.4"
  }
}

.babelrc of check-backpack:

{
    "presets": [
      "backpack-core/babel"
    ]
  }

src/index.js of check-backpack

console.log('Hello World!')

build/main.js of check-backpack after running yarn backpack build

require("C:VSC_Projectscheck-backpack-workspace\node_modulessource-map-support\register.js"),module.exports=function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="/",t(t.s=0)}([function(e,r,t){e.exports=t(1)},function(e,r){console.log("Hello World!")}]);
//# sourceMappingURL=main.map

The correct path to source-map-support\register would be C:\VSC_Projects\check-backpack-workspace\node_modules\source-map-support\register.js . So there are three backslashes missing in build\main.js. Apart from that, the referenced path should also be a relative one, because even if the path was correct, it would only work on my computer otherwise.

[Zlass]

I've just run into a similar issue as well. Seems to be caused here:

backpack/packages/backpack-core/config/webpack.config.js

Lines 121 to 128 in cf489d6

	banner: `require('${
	// Is source-map-support installed as project dependency, or linked?
	require.resolve('source-map-support').indexOf(process.cwd()) === 0
	? // If it's resolvable from the project root, it's a project dependency.
	'source-map-support/register'
	: // It's not under the project, it's linked via lerna.
	require.resolve('source-map-support/register')
	}');`,

Looks like the require.resolve('source-map-support/register') is resolved as an absolute path which is breaking when I try to copy the prebuilt bundle into my docker container.

[SebastianG77]

Hi,

thanks for figuring out the problem source. If you need a quick solution for this, you can follow the solution in this post: #42 (comment)

It would be better to fix this issue directly, but if you adjust the backpack.config.js as described in that post and add the dependency to source-map-support manually, there should be no problems with the dependency and you should still be able to get proper source maps.

[Zlass]

Thanks for the link. Ended up doing something similar, but kept the plugin. I was using yarn workspace <workspace name> run build which starts a process in the workspace's directory so I just overwrote the lerna logic. This is what I ended up adding to my backpack.config.js:

    // Quick fix for source-map-support path resolution
    if (config.plugins[1] && config.plugins[1].options && config.plugins[1].options.banner){
      config.plugins[1] = new webpack.BannerPlugin({
        raw: true,
        entryOnly: false,
        banner:  "require('source-map-support/register');",
      })
    }

[SebastianG77]

Hi,

I tested your code in my small test project and it worked! Thanks a lot. This solution is better than the other one as I do not need to add source-map-support dependency manually.

Meanwhile I also had a look into the source code and was thinking about how to fix this problem. As mentioned above, aside from the absolute path I also had a problem with missing backslashes. I think there must be an escaping problem somewhere, but I did not figure out where the actual problem occurs as the path itself is built correctly (apart from the fact that it is an absolute one),

Anyway, maybe the problem could be solved by changing the code as depicted in the following:

        banner: `require('${
          // Is source-map-support installed as project dependency, or linked?
          require.resolve('source-map-support').indexOf(process.cwd()) === 0
            ? // If it's resolvable from the project root, it's a project dependency.
              'source-map-support/register'
            : // It's not under the project, it's linked via lerna.
              path.isAbsolute(require.resolve('source-map-support/register'))
              ? 
                process.platform === 'win32'
                ?
                path.relative(config.buildPath, require.resolve('source-map-support/register')).replace(/\\/g,`/`)
                :
                path.relative(config.buildPath, require.resolve('source-map-support/register'))
                :
                process.platform === 'win32'
                ?
                require.resolve('source-map-support/register').replace(/\\/g,`/`)
                :
                require.resolve('source-map-support/register')

        }');

It looks a bit ugly, but this code works for me and should not break anything as on non-Windows OS no backslashes will be replaced. Furthermore, relative paths will only be built if they are absolute ones.

I think I will make a pull request the next days. Will in this context also try to clean up the code a bit.

[Zlass]

Glad I could help! I tried something similar with path.relative but was still having issues with it on macOS. I was also thinking about making a PR, but I'm still in the process of learning Lerna so I'm not positive if it'll break things on that front.