@marko/webpack is appending assets after <body>?
…<main id="content"><h1>Hello!</h1></main><footer class="SiteFoot"></footer><script>window.$mwp="/sa/";(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,["/sa/Home_A33h~Search_wYEn~SignIn_TR6h-5f888ea.js","/sa/Home_A33h-3453059.js"])</script><link rel="stylesheet" href="/sa/Home_A33h~Search_wYEn~SignIn_TR6h-9d1bf3c.css"></body></html><body>
<head>
@ybitso unescaped attribute values were never supported and previously did nothing. It may have been updated to now error. In your case the template should just be
<input.input.is-static value=state.Value readonly/>There is no need for interpolating in the attribute values, any valid javascript expression* should just work!
test: /\.css$/. That is going to tell webpack to process all css files with the loader (in your case postcss). Marko basically just makes the css available to the bundler as if it was a standard css file.
mz package manually. The second was that with your example code I got the following errow Error: [object Object] is not a PostCSS plugin. If I comment out the postcss block in your example it runs but then in the browser console I get the following error Uncaught TypeError: commonjsRequire.resolve is not a function. I used the marko-rollup as a base and upgraded it to use the new Marko Rollup plugin.
I had a lot of fun trying Marko. I especially like the syntax, it’s a dream to use. Unfortunately I had quite a few issues getting things to work, so I thought I’d share my experiences in here.
I had the most luck with using the starter kit using marko create my-poject although it doesn’t work with Node v12 so I had to downgrade to v11.5.0 to use the cli. The build feature is somewhat broken. When you create a build it doesn’t include the static css and js in the build. I beleive this has something to do with Lasso. Maybe lasso has been updated recently and Marko Starter needs updating to work with Lasso for static builds. Another issue I encountered was the browser doesn’t refresh when changes are made, but I wasn’t able to find a way to fix it. Overall I really enjoyed using Marko, the templating structure for components is genius and really makes creating a static site a dream, but unfortunately without being able to build it as a static site I wasn’t able to use it. I had a go trying to get Rollup to work with it but I ran into troubles there, I’m not too familiar with what bundlers and loaders do so don’t fully know what I’m doing. I look forward to seeing updates to Marko and it’s supporting repos in the near future. If anyone has any knowledge of the issues I described please feel free to get in touch.
marko-starter serve but not on marko-starter static-serve or marko-starter build. When I look at the styles that have been built I can see neither the styles have been imported nor is the @import statement there, so I’m thinking something is removing the @import statement before postcss get’s chance to process it.
minify: false but then discovered there is minifyCSS. Disabling the minification fixes the issue of the styles not being imported.
@limitlessloop truthfully marko-starter has a number of things we are not happy with. If you are starting a fresh project I’d highly recommend just cloning down https://github.com/marko-js-samples/marko-webpack as it is currently the direction we are recommending for most apps.
Regarding your actual issue marko-starter will use lasso’s config and so the style minification is deferred to lasso. How have you enabled postcss?
marko-webpack a go. I was mainly trying to get marko-starter to work because it had everything setup for me including the routing, but if you recommend marko-webpackI’ll give that a try. I’m using lasso-postcss currently. I got it working by dissabling the CSS minification handled by lasso.
module.exports = require("marko-starter").projectConfig({
name: "marko-starter-demo", // Optional, but added here for demo purposes
lassoConfig: {
plugins: [
'lasso-marko',
{
plugin: 'lasso-postcss',
config: {
map: isProduction ? false : 'inline',
}
},
],
minifyCSS: false, // must disable for postcss-import to work
},
});I thought I’d have a quick go at greating a prerendered static site using a plugin. However the first issue I have is that the plugin needs a index.html file where all the assets are injected into it. I found a webpack plugin that allows you to create html files during compilation but I don’t know how to specify the template for it to use.
This is the configuration to create an index.html file from a template.
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'src/pages/home/template.marko'),
filename: path.resolve(__dirname, 'dist/index.html')
}),When I do this however I get the error.
Error: /Users/limitlessloop/Repos/marko-webpack/src/pages/home/template.marko:298
var markoUID = window.$MUID || (window.$MUID = { i: 0 });
^
ReferenceError: window is not definedIs there any easy way I can get an index file written to disk like the one the server generators when I run a build?
@limitlessloop the HTMLWebpackPlugin is not currently compatible with Marko. Primarily Marko is designed to be server side rendered and then hydrated, although we want to have better support for static sites.
Regarding hosting services https://zeit.co is great!
// now.json
{
"name": “marko",
"version": 2,
"builds": [{
"src": "dist/server/main.js",
"use": "@now/node-server"
}],
"routes": [{
"src": "/",
"dest": "dist/server/main.js",
"methods": ["GET"]
}]
}// now.json
{
"name": "test",
"version": 2,
"builds": [{
"src": "dist/server/main.js",
"use": "@now/node-server"
}, {
"src": "dist/client/**",
"use": "@now/static"
}],
"routes": [{
"src": "/static/(.*)",
"dest": "dist/client/$1",
"headers": {
"cache-control": "s-maxage=604800"
},
"methods": ["GET"]
},
{
"src": "/(.*)",
"dest": "dist/server/main.js",
"methods": ["GET"]
}
]
}