Tips for resolving the error message "TypeError: System.config is not a function"

I recently started learning TypeScript and decided to incorporate SystemJS for importing files. Initially, I only imported the main file that needed to be executed, which was app.js, in my index.html.

<script src="node_modules/systemjs/dist/system.js"></script>
<script>
     System.import('app.js');
</script>

However, an error occurred: https://i.sstatic.net/lz7Hm.png

To address this issue, I modified my html code as follows:

<script src="node_modules/systemjs/dist/system.js"></script>
<script>
    System.config({
        baseURL: '/',
        packages: {
            "/ts": {
                defaultExtension: 'js'
            }
        }
    });
    System.import('app.js');
</script>

Now, a new error has surfaced: https://i.sstatic.net/RS0k7.png

This is my package.json:

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "jquery": "^3.4.0",
    "systemjs": "^3.1.2",
    "typescript": "^3.4.2"
  },
  "devDependencies": {
    "lite-server": "^2.4.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "",
  "license": "ISC"
}

In my app.ts, I have: console.log("Hello")

At this point, I am stuck. Any assistance would be greatly appreciated. Thank you in advance.

Answer №1

It appears that an accidental upgrade to the latest system.js version may have been made... SystemJS 2.0 no longer supports System.Config. For more information, please visit

Instead, the setup is now carried out using https://github.com/systemjs/systemjs/blob/2.0.0/docs/package-name-maps.md

If you have resolved the issue and updated your code, feel free to share the revised sample here for everyone's benefit.

Answer №2

To resolve the issue, you need to insert System.config() into the file called system.js.

<script src="node_modules/systemjs/dist/system.js">
        System.config({
        baseURL: "/",
        packages: {
          "/": {
            defaultJSExtensions: true
          }
        }
      })
      System.import("app.js")</script>
<script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to detect hover (etc) events after generating div elements with innerHTML method

After using the code below to generate some divs document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>'; I am encountering an issue with capturing hover events: $(".colorB ...

Intersecting objects with Raycaster in three.js

I'm currently working on customizing this particular example from three.js to enable character control via mouse clicks. My objective is to obtain the mouse coordinates upon clicking the canvas and then convert them into 3D space coordinates using THR ...

Sending back HTML in response to AJAX calls in Rails

After coming across David Heinemeier Hansson's interesting blog post regarding server-generated javascript, I was inspired to reassess my approach to handling AJAX calls within my Rails applications. According to David, the recommended method is to cr ...

Unable to scale image to full size using JavaScript

Seeking assistance on optimizing the width of a JavaScript slider to be 100%. Below is my existing HTML: <div id="mhblindsshow"> <style type="text/css"> #mhblindsshow img { display:none; } </style> <a href="blog ...

Associating checkbox options with an array that is void of elements

I have a series of arrays linked to checkboxes and I am trying to create a unique array based on the selected checkbox values. Here is an example of the HTML structure: <input type="checkbox" value="value1">Value 1 <input type="checkbox" value=" ...

Mastering the flow of control in Node.js programs

Attempting to grasp control flow within Node.js applications. Specifically, does control loop back to the original function once the callback method completes, similar to a callback stack in recursive calls? A simple program was crafted to make a GET call ...

Phantom.js WebDriver.io Error: Issue with Syntax - DOM Exception 12

Currently conducting tests using webdriver.io and phantom.js. The first test works successfully, providing a list of elements: return client .url(config.host) .waitForVisible('#myvenuelist', 2000) .click('#myvenuelist') ...

javascript mobile nav event

My website utilizes a bootstrap feature for mobile devices where a left sidebar pops up when clicking a button. I am not very familiar with bootstrap, but I would like to link a javascript event to determine if the left sidebar is visible. How can I achiev ...

Is it possible to integrate Polymer elements/WebComponents into TinyMCE?

I've been working on creating a unique TinyMCE editor for educational content, aiming to wrap specific blocks as interactive 'activities'. Each block of content will contain multiple activities with their own primary keys for identification. ...

Is it possible to use a Jasmine spy on a fresh instance?

In need of assistance with testing a TypeScript method (eventually testing the actual JavaScript) that I'm having trouble with. The method is quite straightforward: private static myMethod(foo: IFoo): void { let anInterestingThing = new Interesti ...

Access values in object array without iterating over it

I'm wondering if there is a way to extract the values of the name property from an object array without having to iterate through it. var objArray = [ { name: 'APPLE', type: 'FRUIT' }, { name: 'ONION', t ...

I want to design an attractive expandable mobile menu featuring plus and minus icons. It should look visually appealing and

Can someone please take a look at my code snippet here: http://jsfiddle.net/o2gxgz9r/2287/ Currently, the design shows a plus and minus sign, but I would like to style them using CSS instead of using symbols. Additionally, I need assistance with implement ...

I'm having trouble with Angular pipes in certain areas... but I must say, Stackblitz is truly incredible

Encountering this issue: ERROR in src\app\shopping-cart-summary\shopping-cart-summary.component.html(15,42): : Property '$' does not exist on type 'ShoppingCartSummaryComponent'. The error disappears when I remove the c ...

regex for extracting a hyperlink tag from an HTML snippet in a server-side environment

On the server-side, I have an HTML page source stored as a string. My goal is to extract <link rel="icons"... elements from the string and store them in an array. There may be multiple <link rel="icons"... elements with the same starting tag, and I ...

Troubleshooting issues with injecting MongoDB connection in NestJS as it fails to function

I am attempting to establish a basic connection with my localhost: Instead of using Models or Schemas due to the dynamic nature of the data structure, I prefer to work with the native Mongoose Connection app.module.ts import { Module } from '@nestjs ...

Tips for typing the following object/type in TypeScript

I need help with typing a user state in my application. I have the following: a user type which includes id, email, firstName, lastName, and verified fields. export type User = { id: string | null; email: string | null; firstName: string | null; l ...

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

I am facing an issue with my dynamic website where all links fetch new sections via ajax requests from other pages and replace the current section. The problem I encounter has two main aspects. When loading a new div from an Ajax get request, some sections ...

Steps for determining if a string is compatible with a user-defined type in Typescript

Just getting started with Typescript and currently working on a sudoku game. Here are the types and interface I have set up: export type GridCellValue = 1|2|3|4|5|6|7|8|9; export interface GridCell { readonly: boolean, value: GridCellValue|null, } ex ...

Looking for a method to incorporate an onclick function into a column for renderCell within the MUI Datagrid. Any suggestions?

I'm currently developing a react application and utilizing the MUI Datagrid to present some data. I have incorporated a rendercell to insert an edit icon which should trigger a pop-up modal when clicked. Below is the column setup. export const specifi ...

Parsing an ISO string in dayjs without automatically converting it to local time

I'm working on a project where I want to parse incoming ISO strings using the dayjs library, but ensure that the output is in UTC time rather than being converted to my local timezone. Below is a snippet of my code in progress: const dayjs = require( ...