Marko: Upgrading Lasso 2.x -> 3.x: Unrecognized tag: lasso-page

Created on 28 Jan 2018 · 4Comments · Source: marko-js/marko

Marko Version: 4.7.5
Lasso version: 3.1.2

Hi! Just recently upgraded Lasso from 2.x to 3.x. I see there have been changes (for the better). However, I'm having a hard time finding how my template.marko file will include the browser.json dependencies.

It states currently to write <lasso-page package-path="./browser.json"/> in the template.marko file. However after updating Lasso it doesn't recognize the tag ([application/client/pages/home/home.template.marko:1:0] Unrecognized tag: lasso-page - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag). I looked over at the Lasso library documentation and it doesn't state how this works (it's been totally removed from the example, see below) and the Marko documentation still refers to using the tag lasso-page.

Reference:
https://markojs.com/docs/lasso/#lasso-custom-tags
https://github.com/lasso-js/lasso#lassojs-taglib

Example code on https://github.com/lasso-js/lasso#command-line-interface

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lasso.js Demo</title>
    <!-- <lasso-head> -->
    <link rel="stylesheet" href="static/style.less.css">
    <!-- </lasso-head> -->
</head>
<body>
    <h1>Lasso.js Demo</h1>
    <!-- <lasso-body> -->
    <script src="static/raptor-modules-1.0.1/client/lib/raptor-modules-client.js"></script>
    <script src="static/add.js"></script>
    <script src="static/raptor-modules-meta.js"></script>
    <script src="static/node_modules/jquery/dist/jquery.js"></script>
    <script src="static/main.js"></script>
    <script>$_mod.ready();</script>
    <!-- </lasso-body> -->
</body>
</html>

Error:

  Error: An error occurred while trying to compile template at path "/home/karl/dev/node/psycat/application/client/pages/home/home.template.marko". Error(s) in template:
  1) [application/client/pages/home/home.template.marko:1:0] Unrecognized tag: lasso-page - More details: https://github.com/marko-js/marko/wiki/Error:-Unrecognized-Tag

      at handleErrors (/home/karl/dev/node/psycat/node_modules/marko/src/compiler/Compiler.js:82:21)
      at Compiler.compile (/home/karl/dev/node/psycat/node_modules/marko/src/compiler/Compiler.js:155:9)
      at _compile (/home/karl/dev/node/psycat/node_modules/marko/src/compiler/index.js:99:33)
      at Object.compile (/home/karl/dev/node/psycat/node_modules/marko/src/compiler/index.js:113:12)
      at doLoad (/home/karl/dev/node/psycat/node_modules/marko/src/loader/index-default.js:156:45)
      at Object.load (/home/karl/dev/node/psycat/node_modules/marko/src/loader/index-default.js:35:16)
      at router.get (/home/karl/dev/node/psycat/application/routes/index.js:16:32)
      at dispatch (/home/karl/dev/node/psycat/node_modules/koa-router/node_modules/koa-compose/index.js:44:32)
      at next (/home/karl/dev/node/psycat/node_modules/koa-router/node_modules/koa-compose/index.js:45:18)
      at /home/karl/dev/node/psycat/node_modules/koa-router/lib/router.js:345:16

home.template.marko

<lasso-page package-path="./home.browser.json"/>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            ${data.title}
        </title>
        <!-- <lasso-head> -->
        <!-- </lasso-head> -->
    </head>
    <body>
        <!-- <lasso-body> -->
        <app-main(data.preloadedState)/>
        <script>
            window.__PRELOADED_STATE__ = ${JSON.stringify(data.preloadedState).replace(/</g, '\\u003c')}
        </script>
        <!-- </lasso-body> -->
        <browser-refresh enabled=true/>
    </body>
</html>

home.browser.json

{
    "dependencies": [
        "require-run: ~/application/client/index.js",
        "./home.client.js",
        "./home.style.scss"
    ]
}

question

Source

basickarl

Most helpful comment

docs now mention @lasso/marko-taglib

mlrawlings on 20 Jul 2018

🎉2

All 4 comments

Hey @basickarl. We need to update the documentation and sample apps. The Marko taglib was externalized into @lasso/marko-taglib in Lasso 3. You need to install this module and then add a marko.json in the root of your project to import the taglib:

{
    "taglibImports": [
        "@lasso/marko-taglib/marko.json"
    ]
}

Let me know if this fixes your issue.

austinkelleher on 29 Jan 2018

🎉1

After installing the following:

npm install lasso-marko
npm install @lasso/marko-taglib

I get the following error:

Render error. Exception: Error: Error while applying option of "plugin". Cause: Error: Plugin module not found for "minprops/lasso". Searched from "/home/karl/dev/node/psycat"
    at Object.plugin (/home/karl/dev/node/psycat/node_modules/lasso/src/config-loader.js:292:43)
    at invokeHandlers (/home/karl/dev/node/psycat/node_modules/property-handlers/lib/index.js:72:29)
    at Object.plugins (/home/karl/dev/node/psycat/node_modules/lasso/src/config-loader.js:285:21)
    at invokeHandlers (/home/karl/dev/node/psycat/node_modules/property-handlers/lib/index.js:72:29)
    at Object.load (/home/karl/dev/node/psycat/node_modules/lasso/src/config-loader.js:381:5)
    at create (/home/karl/dev/node/psycat/node_modules/lasso/src/index.js:49:31)
    at Object.getDefaultLasso (/home/karl/dev/node/psycat/node_modules/lasso/src/index.js:70:24)
    at getLassoRenderContext (/home/karl/dev/node/psycat/node_modules/@lasso/marko-taglib/taglib/getLassoRenderContext.js:10:22)
    at render (/home/karl/dev/node/psycat/node_modules/@lasso/marko-taglib/taglib/config-tag.js:5:28)
    at wrappedRenderer (/home/karl/dev/node/psycat/node_modules/marko/src/runtime/helpers.js:106:13) (config.plugins)
    at error (/home/karl/dev/node/psycat/node_modules/property-handlers/lib/index.js:33:17)
    at invokeHandlers (/home/karl/dev/node/psycat/node_modules/property-handlers/lib/index.js:75:17)
    at Object.plugins (/home/karl/dev/node/psycat/node_modules/lasso/src/config-loader.js:285:21)
    at invokeHandlers (/home/karl/dev/node/psycat/node_modules/property-handlers/lib/index.js:72:29)
    at Object.load (/home/karl/dev/node/psycat/node_modules/lasso/src/config-loader.js:381:5)
    at create (/home/karl/dev/node/psycat/node_modules/lasso/src/index.js:49:31)
    at Object.getDefaultLasso (/home/karl/dev/node/psycat/node_modules/lasso/src/index.js:70:24)
    at getLassoRenderContext (/home/karl/dev/node/psycat/node_modules/@lasso/marko-taglib/taglib/getLassoRenderContext.js:10:22)
    at render (/home/karl/dev/node/psycat/node_modules/@lasso/marko-taglib/taglib/config-tag.js:5:28)
    at wrappedRenderer (/home/karl/dev/node/psycat/node_modules/marko/src/runtime/helpers.js:106:13)

About the documentation. I feel like yous have written far too much to be able to maintain. Perhaps just keep all of the documentation in one repo.

Did any deprecations happen to anything when upgrading from lasso v2 to v3?

basickarl on 30 Jan 2018

@basickarl It's working fine for me with below configuration.

"@lasso/marko-taglib": "^1.0.9",
    "lasso": "^3.1.2",
    "lasso-marko": "^2.4.0",
    "marko": "^4.7.5"

Recently I have updated the docs. If you are using lasso@^3 (latest), make sure to install the lasso-marko-taglib, so that you can use the lasso custom tags.
Hope this solves your issue.