convert webpack files to ts

We added more complexity to our bundling in: https://github.com/ash-bergs/pantry-pal/pull/33

A dev and prod webpack config were added, allowing us to skip the service worker for local environments, but trying to move the webpack files to ts came with some errors.

Relevant comment from this PR:

I don't love using the require syntax and js here... and I originally built all of these configs with ts, like:

import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import { Configuration } from 'webpack';

const config: Configuration = {
  entry: './index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new CopyWebpackPlugin({
      patterns: [
        { from: 'manifest.json', to: 'manifest.json' },
        { from: 'assets', to: 'assets' },
        { from: 'README.md', to: 'README.md' },
      ],
    }),
  ],
};

export default config;

This was nice because we get a lot of type safesty from webpack itself - but I kept running into issues with compiling:

import { merge } from 'webpack-merge';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module.m._compile (/Users/ash_bergs/Desktop/pantry-pal/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/ash_bergs/Desktop/pantry-pal/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)

and

export default config;
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module.m._compile (/Users/ash_bergs/Desktop/pantry-pal/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/ash_bergs/Desktop/pantry-pal/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)

and

[webpack-cli] Unable to use specified module loaders for ".ts".
[webpack-cli] Cannot find module 'ts-node/register' from '/Users/ash_bergs/Desktop/pantry-pal'
[webpack-cli] Cannot find module 'sucrase/register/ts' from '/Users/ash_bergs/Desktop/pantry-pal'
[webpack-cli] Cannot find module '@babel/register' from '/Users/ash_bergs/Desktop/pantry-pal'
[webpack-cli] Cannot find module 'esbuild-register/dist/node' from '/Users/ash_bergs/Desktop/pantry-pal'
[webpack-cli] Cannot find module '@swc/register' from '/Users/ash_bergs/Desktop/pantry-pal'
[webpack-cli] Please install one of them

I updated the ts.config, tweaked module rules, added ts-node, changed the target in the common config.... It seemed like everything I did solved one issue, but then gave me another.

Converting to js and using require got me around those errors, and gets everything building as desired.

But I know this is a solveable issue, I suspect my issue is most likely in the ts.config - there's something set, or not set. I will make an issue for this and dig into the config to see if I can't return ts and all the nice type support we get from it.

ash-bergs / pantry-pal

convert webpack files to ts #34