Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support "on the fly" public path definitions from webpack #269

Closed
ryanboswell opened this issue Mar 12, 2019 · 2 comments · Fixed by #292
Closed

Support "on the fly" public path definitions from webpack #269

ryanboswell opened this issue Mar 12, 2019 · 2 comments · Fixed by #292

Comments

@ryanboswell
Copy link

🐛 Bug Report

When using Webpack's "on the fly" definition of the public path, the loadable paths don't match.
https://webpack.js.org/guides/public-path/

In this usage, the publicPath property isn't defined in the webpack file but instead in a global variable read at runtime, but loadable seems to expect a hard-coded public path that gets copied into loadable-stats.json. So when the "on the fly" method is used, the public path that loadable uses ends up empty and the files aren't referenced properly.

To Reproduce

Steps to reproduce the behavior:

Follow Webpack's instructions to use the "on the fly" public path definition, and do not include publicPath as an option in the webpack config file: https://webpack.js.org/guides/public-path/

In our case we include a fully qualified CDN URL and a version, both pulled from environment variables only available at runtime:

__webpack_public_path__ = "https://cdn.example.org/assets/1.2.3/"

After this, using one of the methods like extractor.getScriptTags(); outputs something like this:

<script async data-chunk="~options-page" src="/~options-page.bundle.js"></script>
<script async data-chunk="main" src="/vendors-main.bundle.js"></script>
<script async data-chunk="main" src="/main.bundle.js"></script>

Expected behavior

With the webpack public path configuration as outlined above, we'd expect the script tags to be generated as:

<script async data-chunk="~options-page" src="https://cdn.example.org/assets/1.2.3/~options-page.bundle.js"></script>
<script async data-chunk="main" src="https://cdn.example.org/assets/1.2.3/vendors-main.bundle.js"></script>
<script async data-chunk="main" src="https://cdn.example.org/assets/1.2.3/main.bundle.js"></script>

Env info

## System:
 - OS: macOS 10.14.3
 - CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
 - Memory: 81.94 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 10.15.0 - /usr/local/bin/node
 - Yarn: 1.10.1 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
## npmPackages:
 - @loadable/babel-plugin: 5.5.0 => 5.5.0 
 - @loadable/component: 5.5.0 => 5.5.0 
 - @loadable/server: 5.3.0 => 5.3.0 
 - @loadable/webpack-plugin: 5.5.0 => 5.5.0 
@gregberge gregberge added the bug label Mar 13, 2019
@gregberge
Copy link
Owner

Hello @ryanboswell, yes this option is currently not supported. Any help to fix it is welcome!

@BRKalow
Copy link
Contributor

BRKalow commented Apr 1, 2019

Hey @ryanboswell I've added support for passing in publicPath to ChunkExtractor here: #292

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants