Many problems with multipage-app build

StealJS
1

@cherif_b and i am working on a multipage-app.
we want to make a workflow for using stealjs + steal-tools and maybe with PHP at the backend.

i jumped into several issues that came with the build.

the repro i am working on is:

it is pretty easy but the issues are mass.

in develop mode all is working correctly. @justinbmeyer and i have a meetup https://www.youtube.com/watch?v=3Xx4BeDKoFg
where we make some changes on steal-tools so that the build was working.
but after that it becomes apparent that there are other issues out there.

i am using:

  • steal-tools@0.13.3
  • npm 3.3.12
  • node 5.5.0
  • using the donejs vagrant box

to repoduce the issues please clone the repo and start http-server

  1. make a build. bundleSteal is true. the dist/bundles/dev1/main.js is without steal. open http://localhost:8080/prod_1.html
    Error: Uncaught ReferenceError: define is not defined

  2. open http://localhost:8080/prod_2.html. main is set as the same in dev_2.html. buildit is the app-name
    Error: http://localhost:8080/dist/bundles/buildit/dev2/main.js 404 (Not Found)

  3. open http://localhost:8080/prod_3.html. the dev2 bundle is funnily enough with steal. so dist file is loaded directly. got two errors
    Error: GET http://localhost:8080/dist/bundles/dev2/dist/bundles/dev2/main.css 404 (Not Found)
    Error: Potentially unhandled rejection [5] Error loading "buildit@1.0.0#button-comp/button-comp.less!$less" at file:/home/vagrant/buildit/src/button-comp/button-comp.less Error loading "buildit@1.0.0#button-comp/button-comp.less!$less" from "buildit@1.0.0#dev2/main" at file:/home/vagrant/buildit/src/dev2/main.js Error loading "bundles/dev2/main.css!$css" at http://localhost:8080/dist/bundles/dev2/dist/bundles/dev2/main.css Not Found: http://localhost:8080/dist/bundles/dev2/dist/bundles/dev2/main.css (WARNING: non-Error used)

  4. open src/button-comp/button-comp.js. change import './button-comp.less!'; to import './button-comp.scss!';. make a build!
    got a build error:
    Potentially unhandled rejection [7] Error: Error loading "buildit@1.0.0#button-comp/button-comp.scss!steal-sass@1.0.1#main" at <unknown> Error loading "buildit@1.0.0#button-comp/button-comp.scss!steal-sass@1.0.1#main" from "buildit@1.0.0#dev2/main" at file:/home/vagrant/buildit/src/dev2/main.js Error loading "nodesass" at file:/home/vagrant/buildit/nodesass.js Error loading "nodesass" from "steal-sass@1.0.1#main" at file:/home/vagrant/buildit/node_modules/steal-sass/main.js ENOENT: no such file or directory, open '/home/vagrant/buildit/nodesass.js' at Error (native)

  5. open the build.js and change to

var stealTools = require("steal-tools");
var buildPromise = stealTools.build({
	main: "buildit/dev1/main",
	config: __dirname + "/package.json!npm"
},{
	bundleSteal: true,

	minify: true,
	debug: true,
	quiet: false,
	bundleDepth: 3,
	mainDepth: 3
});

so there is no multi build anymore. make a build. got 2 errors:
Error 1:
GET http://localhost:8080/dist/bundles/dev1/dist/bundles/dev1/main.css 404 (Not Found)
the same as in 3)

Error 2:
Potentially unhandled rejection [5] Error loading "css/style.css!$css" at http://localhost:8080/dist/bundles/dev1/css/style.css Error loading "css/style.css!$css" from "buildit@1.0.0#dev1/main" at file:/home/vagrant/buildit/src/dev1/main.js Error loading "bundles/dev1/main.css!$css" at http://localhost:8080/dist/bundles/dev1/dist/bundles/dev1/main.css Not Found: http://localhost:8080/dist/bundles/dev1/dist/bundles/dev1/main.css (WARNING: non-Error used)
notice, that we import import 'css/style.css!'; in dev1/main.js and the css file is not located under the dist folder! but in css/styles under the root folder

Last Issue

  • Notice, that we have the module buildit/module1/module we import that module in dev1/main and in button-comp. why is that module not split into a separate bundle? it is used multiple times?
2

recap:

Issue 1: solved a multi-main build with 2 or more mains in the build method of steal-tools now work (in steal 1.0). made a PR for configless steal bundled scripts https://github.com/stealjs/steal-tools/pull/506

Issue 2: solved if building the app without bundleSteal and using steal.production.js you have to specify the main.

Issue 3: solved if bundled steal and want to load from a module (e.g. jquery) from a CDN or just want to load the css files within the link tag. follow these steps http://stealjs.com/docs/StealJS.loading-from-cdn.html
be careful ! with instantiated you have to use the moduleName http://stealjs.com/docs/moduleName.html

  • for css files pathToDistFolder/style.css!$css
  • for js modules lodash@3.0.0#main full qualified name

Issue 4: not solved the steal-sass plugin ins currently not working. steal-sass needs to be refactored!

Issue 5: solved you can import css files that are not located under directories.lib by importing like import 'css/style.css';. this means steal is loading the css file relativ to the root folder and the root folder is set to be where package.json is located.

Issue 6: solved with a multi-main build and bundleSteal = false steal-tools now created a bundle for buildit/module1/module

1 Like
3

:smiley: +10000000000000000000.!.