Keep getting Uncaught SyntaxError: cannot use import statement outside a module

I keep getting message even after trying out the following:
btw, I am using the exact same code as the lecture, so I’m guessing it might be a version issue.

1. Add "type":"module" in package.json file
 //which throws a different error: [ERR_REQUIRE_ESM]: require() of ES Module not supported
2. use require() instead
// which throws another error: Uncaught ReferenceError: require is not defined
3. in html file, add type module
<script type = "module" src="./app/javascripts/app.js"></script>

app.js

// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";
//Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract';
import voting_artifacts from '../../build/contracts/Voting.json';
//require("../stylesheets/app.css")
//const Web3 = require("web3")
//const contract = require("truffle-contract")
//const voting_artifacts = require("../../build/contracts/Voting.json")

package.json

{
  "name": "truffle-init-webpack",
  "version": "0.0.1",
  "description": "Frontend example using truffle v3",

  "scripts": {
    "build-amd": "npm run bundle-amd && npm run minify-amd",
    "lint": "eslint ./",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "Douglas von Kohorn",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-register": "^6.22.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eslint": "^3.14.0",
    "eslint-config-standard": "^6.0.0",
    "eslint-plugin-babel": "^4.0.0",
    "eslint-plugin-mocha": "^4.8.0",
    "eslint-plugin-promise": "^3.0.0",
    "eslint-plugin-standard": "^2.0.0",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "truffle-contract": "^1.1.6",
    "web3": "^0.18.4",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "milsymbol": "^2.0.0",
    "node-fetch": "^2.6.1",
    "solc": "^0.8.10",
    "truffle": "^4.0.1",
    "truffle-hdwallet-provider": "latest"
  }
}