serverless-webpack
serverless-webpack copied to clipboard
serverless-heaven
Dynamic imports not set in the correct directory
This is a Bug Report
Description
- What went wrong?
@loadable/component helps with code splitting. When building the app, not with serverless-webpack, my chunks look like this:
When using serverless-webpack, the chunks are in a different folder and so the loadable library cannot find these files! As you will see below, the server code is inside .webpack/service/server and the loadable files are inside .webpack/service. Usually they are in the same folder.
- What did you expect should have happened?
Files emitted by webpack or loadable component be in the same directory.
- What was the config you used?
https://gist.github.com/bitttttten/48f4b860dae85281b4d0bdbee2799390
- What stacktrace or error message from your provider did you see?
Error: Cannot find module './vendors~about~faq~festival~flamyngo~flamyngoSignUp~home~index~invite~jobs~login~notFound~places~priv~0d8d17d2.js'
Where vendors is one of the files seen in the screenshot.
Dependencies
"webpack": "4.29.6",
"serverless-finch": "^2.4.2",
"serverless-offline": "^5.7.2",
"serverless-scriptable-plugin": "^1.0.0",
"serverless-webpack": "^5.3.1",
I also wanted to show what it looks like on the lambda, which is identical:
If I put this file into something like server/some/deep/dir/home.tsx and reference it like:
functions:
index:
handler: server/some/deep/dir/home.default
Then I get the same issue. Inside .webpack/service/server/some/deep/dir/home.js it is still trying to require from the current directory:
var chunk = require("./" + ({"13":"jobs","14":"login","15":"notFound","16":"places","17":"privacy","18":"security","20":"terms","21":"users"}[chunkId]||chunkId) + ".js");
Where "./" is the offending part. I imagine it should be "../../../../" instead, so it picks it up correctly.
Although I am not sure how to move forward since I do not know why webpack is not picking up the chunk paths correctly.
