Webpack and typescript semicolon missing error

webpacktypescript

Recently I had to add a piece of vue code to an older webpack setup. My vue code was using typescript but the webpack setup did not properly work with it yet...

After adding all packages like yarn add vue vue-loader babel-loader and more, I tried to run a yarn watch.

Alas the following error occured:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/rick/Developer/project/config/src/scripts/modules/apply-form/apply-form.ts: Missing semicolon. (4:4)

  2 | import App from './ApplyForm.vue';
  3 | import { translations } from './../../variables/translations';
> 4 | type Source = {
    |     ^
  5 |     id: number,
  6 |     text: String,
  7 | }

Missing semicolon? But this is a typescript type and file! What is going on?

I then tried to see difference between projects. I saw a .babelrc file in the other project. I then added a .babelrc file to my project with the following content:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

But the whole problem was that the entry file for webpack was not near the node_modules.

So this .babelrc wasnot even used. I then added the following to my webpack.config.js:

module: {
  rules: [
    {
      test: /\.(t|j)s?$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      options: {
        presets: [
          "@babel/preset-env",
          "@babel/preset-typescript"
        ],
      },
    }
  ]
}

Also import like these gave errors:

import { createApp } from 'vue';
ERROR in ../theme/src/scripts/apply-form/apply-form.ts 1:0-32
Module not found: Error: Can't resolve 'vue' in '/Users/rick/Developer/project/theme/src/scripts/apply-form'
 @ ../theme/src/index.ts 8:0-44

First I did not understand, but then I found out that I had to add the following to my webpack.config.js:

resolve: {
  extensions: [".js", ".jsx", ".ts", ".tsx", ".scss"],
  modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}

As to point webpack to the node_modules in the config directory of the project. Because this was an older setup which I was not familiar with...

The setup was like this:

project/
  config/
    node_modules/
    webpack.config.js
    package.json
    yarn.lock
  theme/
    src/
      scripts/
        apply-form/
          apply-form.ts
      index.ts

The node_modules was outside or theme/src. So I had to point webpack to the node_modules in the config directory.

Now everything worked again... This cost me an hour to figure out. But now I know how to fix this in the future.

If this pointed you in the right direction, please let me know on X.

p.s. I guess I should properly update the whole webpack setup to a newer version. But that was not really possible since this repository was for a client outside of my control.
I just wanted to make it work and add vue and typescript.