question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Moon packaged, using Webpack.

See original GitHub issue

I’m attempting to use Moon in an application, where the code is bundled via Webpack, and I am running into an issue.

The problem seems to be that Moon is attempting to make a reference to a global window.Moon instance, which does not exist when it is included via an import call.

The code looks something like this.

import Moon from 'moonjs/dist/moon.js';

// window.Moon = Moon;

Moon.component( 'cart', {
  data() {
    return {
      mylist: [ '1', '2', '3' ]
    }
  },
  template: '<div><ul><li m-for="item in mylist">{{item}}</li></ul></div>',
  computed: {
  }
} );


const moonapp = new Moon( {
  data: {
  },
  computed: {
  },
  hooks: {
    mounted() {
    }
  },
  template: '<div id="moonapp"><cart></cart></div>'
} );

try {
  moonapp.mount( document.querySelector( '#moonapp' ) );
} catch ( error ) {
  console.log( error );
}

export default moonapp;

If I run this code as is, the code builds, and then I get an error in the dev console that states:

======= Moon =======
moonapp.js:43 ReferenceError: Moon is not defined
    at MoonComponent.eval [as $render] (eval at generate (moon.js:2399), <anonymous>:3:179)
    at MoonComponent.Moon.render (moon.js:1919)
    at MoonComponent.Moon.build (moon.js:1962)
    at createComponentFromVNode (moon.js:626)
    at appendChild (moon.js:412)
    at hydrate (moon.js:760)
    at hydrate (moon.js:824)
    at Moon.patch (moon.js:1947)
    at Moon.build (moon.js:1977)
    at Moon.mount (moon.js:1907)

If I simply uncomment the line that defines window.Moon = Moon, then everything works as expected.

This problem also seems to be related to components. If I replace the template code for moonapp to read template: '<div id="moonapp"><span>hello</span></div>', without registering window.Moon, then the app mounts and works properly. But if the <cart> component is invoked in the template, then the error is thrown.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
kbrshcommented, Oct 13, 2017

@Capital-EX The next release will be a stable v1.0.0. The alpha will be released within the next to weeks, then the beta, and then either a release candidate or a final release 🚀

0reactions
Capital-EXcommented, Oct 13, 2017

Any estimate as to when 0.11.1 will be released?

Read more comments on GitHub >

github_iconTop Results From Across the Web

kbrsh/moon-loader: Webpack loader for Moon - GitHub
Use it as a JavaScript loader to compile your JavaScript files so that they can use the Moon view language. npm install moon-loader....
Read more >
@angular-moon/webpack-scp-client - npm package | Snyk
a plugin for webpack as an scp client For more information about how to use this package see README · Ensure you're using...
Read more >
Webpack - FAST design system
Open the fast-webpack folder in your favorite editor. You should see your package.json along with a package-lock.json and a node_modules folder.
Read more >
Using webpack with TypeScript - LogRocket Blog
Learn how to use webpack to compile TypeScript to JavaScript and bundle source code into a single JavaScript file.
Read more >
Compiling and bundling TypeScript libraries with Webpack
Since I started working on UI-Router React I've been enjoying writing TypeScript. There are both advantages and disadvantages working with a typed and ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found