ash-bergs / pantry-pal

Keep track of your shopping list and pantry stock
0 stars 0 forks source link

convert webpack files to ts #34

Open ash-bergs opened 2 months ago

ash-bergs commented 2 months ago

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 commented 2 months ago

https://www.npmjs.com/package/webpack-merge - notes on using TS here, should work relatively out-of-the-box?

https://github.com/webpack/webpack-cli/issues/1993 - an issue with the same error I faced above, but adding ts-node didn't seem to get me past it 🤔

https://www.npmjs.com/package/webpack-dev-server - more notes on TS use, the devServer option doesn't exist on the native webpack Configuration object, so we need to support it specially

https://stackoverflow.com/questions/62846123/getting-error-from-webpack-cli-typeerror-merge-is-not-a-function-in-webpack