search

marko-js / marko

A declarative, HTML-based language that makes building web apps fun
https://markojs.com/
MIT License
13.35k stars 643 forks source link

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

Closed basickarl closed 6 years ago

basickarl commented 6 years ago

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"
    ]
}
austinkelleher commented 6 years ago

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.

basickarl commented 6 years ago

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?

pajaydev commented 6 years ago

@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.

mlrawlings commented 6 years ago

docs now mention @lasso/marko-taglib