I want to add TypeScript to my project and I got this error while adding a type to the array:

SyntaxError:
my/path/of/file:
Const declarations require an initialization value (2:28)

  1 | //keycodes of restricted characters for all our amount inputs    
  2 | export const restrictedChars: number[] = [ 43, 45, 69, 107, 109, 187, 188, 189, 190 ];         

Here's the code:

//keycodes of restricted characters for all our amount inputs
export const restrictedChars: number[] = [ 43, 45, 69, 107, 109, 187, 188, 189, 190 ];

I tried to declare the array and after that export but it didn't worked. Also I tried to create an interface for that array as mentioned in some solutions for problems like this but it didn't helped too.

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_ponents)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    historyApiFallback: true,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

package.json

{
  "name": "WhatToCook",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-addons-update": "^15.6.3",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.5.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

I want to add TypeScript to my project and I got this error while adding a type to the array:

SyntaxError:
my/path/of/file:
Const declarations require an initialization value (2:28)

  1 | //keycodes of restricted characters for all our amount inputs    
  2 | export const restrictedChars: number[] = [ 43, 45, 69, 107, 109, 187, 188, 189, 190 ];         

Here's the code:

//keycodes of restricted characters for all our amount inputs
export const restrictedChars: number[] = [ 43, 45, 69, 107, 109, 187, 188, 189, 190 ];

I tried to declare the array and after that export but it didn't worked. Also I tried to create an interface for that array as mentioned in some solutions for problems like this but it didn't helped too.

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_ponents)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    historyApiFallback: true,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

package.json

{
  "name": "WhatToCook",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.13",
    "@babel/core": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20",
    "react": "^17.0.1",
    "react-addons-update": "^15.6.3",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-jss": "^10.5.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

• javascript
• typescript

• 1 Does this answer your question? Typescript - Missing initializer in const declaration – Masood Commented Mar 28, 2021 at 12:22
• @Masood no, this answer didn’t solved my problem (( – Robert Hovhannisyan Commented Mar 28, 2021 at 12:23
• I had a similar problem when I've forgot to add .babelrc – user1632355 Commented Sep 20, 2021 at 14:18

3 Answers 3

Try to put ts-loader before js rule in webpack config

      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        // include: [path.resolve(__dirname, 'yourAppPath')],
        exclude: [/node_modules/, /bower_ponents/],
      },
      {
        test: /\.(js|jsx)$/,
...

don't need ts-load, only the following changes are required

     ...
     {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_ponents)/,
        loader: "babel-loader",
        options: { 
          // presets: ["@babel/env"],
          presets: ["@babel/env", "@babel/preset-react", "@babel/preset-typescript"]
        }
      },
     ...

It sounds like this code isn't being processed by TypeScript. That's the error you'd get if it were being processed directly by the JavaScript engine:

/* export */ const restrictedChars: number[] = [ 43, 45, 69, 107, 109, 187, 188, 189, 190 ];

Make sure this is in a .ts or .tsx file, not a .js or .jsx file, and that your project is set up to have TypeScript pile the .ts/.tsx files to JavaScript.

Side note: Because you have an initializer on it, there's no need to tell TypeScript the type of restrictedChars. TypeScript will correctly infer the type number[] from the initializer. (TypeScript is very smart at inferring types.)