Build not including steal-conditional imports
leoj3n opened this issue · 6 comments
Steal conditional works fine in development, but when built and deployed, the conditional modules are not included in the bundle.
lib/file-a.js
:
let foo = 'aaa';
export default foo;
lib/file-b.js
:
let bar = 'bbb';
export default bar;
lib/a-or-b.js
:
const aOrB = System.isPlatform('window') ? 'a' : 'b';
export default aOrB;
lib/file.js
:
import conditionalFile from '~/lib/file-#{~/lib/a-or-b}';
export default conditionalFile;
index.js
:
import file from '~/lib/file';
console.log(file); // 'aaa' or 'bbb'
In development, this will log aaa
on the client and bbb
on the server.
After building with StealTools, the following error will appear on the client:
Error: 404 Not Found: https://fileapp.herokuapp.com/dist/lib/file-a.js
The module [file-app/lib/file-a] couldn't be fetched.
Clicking the link in the stack trace below takes you to the import.
See https://stealjs.com/docs/StealJS.error-messages.html#404-not-found for more information.
at (dist/index.js:1)
Is this a bug, or do I need to somehow tell StealTools to include file-{a,b}.js
during tree shake?
EDIT:
Original context: https://forums.donejs.com/t/solved-home-page-loads-fine-inner-pages-do-not-can-zone-ignore/977/8?u=leoj3n
I've created a repository to demonstrate this issue (see README for screenshots):
https://github.com/leoj3n/steal-conditional-culling-imports
The linked demo project above has these build options:
build.js
: https://github.com/leoj3n/steal-conditional-culling-imports/blob/master/build.js#L3-L9
const stealTools = require('steal-tools');
const buildPromise = stealTools.build(
{},
{
minify: false,
treeShaking: false,
}
);
Yet still file-a.js
is being culled from the build, even with treeShaking
set to false
.
I've found a configuration option for steal and steal-tools that I didn't previously know about: bundle
.
Using the bundle
configuration option, I was able to get these occluded files into the build:
"steal": {
"bundle": [
"~/models/file-a.js",
"~/models/file-b.js"
],
"configDependencies": [
"./node_modules/steal-conditional/conditional"
]
}
Wish I had known about the ability to manually bundle modules earlier... I guess these are the docs I needed to find:
https://stealjs.com/docs/config.bundle.html#usage-with-the-npm-plugin
I'm also having to use bundle
to manually include components in the build when using the new pageComponent
strategy; is this something that will perhaps be able to be communicated to steal more easily in the future? Maybe that's a separate issue.
In donejs apps it should generate with ~/pages/**/
in the bundles. This means that if you put modules in the pages/
folder those will automatically be assumed to be split into bundles.
Do you know which donejs (or steal?) repo is configured to look in ~/pages/**/
? I would be grateful for a link to the relevant code.
The generator writes that out. https://github.com/donejs/generator-donejs/blob/master/app/index.js#L212-L213