I'm getting error of .html extension not recognized using node command

Question

I got project from my client to update that project with some points. But I'm facing problem to run this project.

I install npm and all required node modules downloaded based on package.json information.

    {
  "name": "acelle-builder",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "type" : "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/ace": "0.0.42",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.6.0",
    "file-loader": "^4.1.0",
    "html-loader": "^0.5.5",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.14.1",
    "raw-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "svg-url-loader": "^3.0.0",
    "to-string-loader": "^1.1.5",
    "url-loader": "^2.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "ace-builds": "^1.4.12",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "js-beautify": "^1.13.0",
    "popper.js": "^1.16.1"
  }
}

there are some codes of importing html files like

    import controls from './controls.html';
import widgets from './widgets.html';

but when I run this project using node command I'm getting error with unknown file.html extension.

How can I solve this?

Answer 1

Node.js can only import JS modules.

If you want to use syntax which involves importing other kinds of things then you need to use an appropriate tool. The dependencies in the package.json file include WebPack. Use that.

There is even a script (named build ) listed that will run it.

npm run build

Answer 2

You can't import from an html file. You are trying to import from./controls.html and./widgets.html. You have to import from js files. Maybe you meant "./controls.html" and "./widgets.js".