[Solved] Cannot find module './main.html' in `Meteor 1.7 + static-html package`

help
1

I tried test Meteor 1.7 + static-html

// package.json
{
  "name": "test1.7-bare",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "meteor-node-stubs": "^0.4.1"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}
-----------
// main.js (client)
import "./main.html";
........

Get error

Cannot find module './main.html'
2

Please show all the steps to reproduce this.

3

My Code

  • .meteor/packages
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base@1.4.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.5.0                   # The database Meteor supports right now
static-html             # Define static page content in .html files
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.2.0                 # Meteor's client-side reactive programming library

standard-minifier-css@1.4.1   # CSS minifier run for production mode
standard-minifier-js@2.3.4    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command

akryum:vue-component
  • client/main.html
<head>
  <title>Welcome to Meteor 1.7 + Vue</title>
</head>

<body>
  <app></app>
</body>
  • client/main.js
import { Meteor } from "meteor/meteor";
import Vue from "vue";

// Main app
import "./main.html"; // Cannot find module ‘./main.html’
import App from "./App.vue";

Meteor.startup(() => {
  new Vue(App).$mount("app");
});
  • package.json
{
  "name": "test1.7-bare",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0-beta.51",
    "meteor-node-stubs": "^0.4.1",
    "vue": "^2.5.16"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}
4

for html files you don’t have to import them, they will be eagerly loaded even with mainModule set

5

But in example of meteor create myapp --bare, it hase

// Main app
import "./main.html"

And then I would like to remove blaze to use static-html + vue

6

Yes and when you have removed blaze, you no longer need to import the html.

Blaze templates are different because they need to be compiled into javascript, so when you import main.html in Blaze you are actually importing the compiled main.html.js

1 Like
7

Very thanks @coagmano :blush:

1 Like