SystemJS: Почему возникает ошибка jquery_1.default не является функцией при импорте jquery

Я установил основание через jspm install foundation, затем импортирую фундамент и jquery.

Проблема, с которой я столкнулась, заключается в том, что если я импортирую jquery через import $ as 'jquery', я получаю ошибку. jquery_1.default не является функцией. Если я импортирую jquery через import * as $ from jquery, он будет работать как ожидалось

Я вызываю $(document).foundation(); для инициализации компонентов javascript. Ниже мой main.ts

import 'foundation'
import $ from  'jquery';
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();    

  aurelia.start().then(a => a.setRoot())
      .then(a => {
        // Initialize framework
        $(document).foundation();
      });
}

Остальная часть кода представляет собой просто навигацию по умолчанию на простую страницу, содержащую панель навигации с раскрывающимся списком

Примечание. Мне также пришлось явно установить jquery, хотя jquery указан как dep.

Я сделал оригинальное переопределение для основания 6, явно сделал что-то не так, но, похоже, он работал в то время. Тем не менее, с тех пор я узнал, что при установке bootstrap он помещает jquery в компоненты github: и это, похоже, делает так, что jquery не нужно явно устанавливать. Так что в то время все казалось прекрасным.

Для воспроизведения просто используйте скелет aurelia и добавьте страницу с помощью элемента управления основанием, добавив $(document).foundation(), как указано выше

Ответы

Ответ 1

Если вы используете typescript set module = system в своем tsconfig:

{
  "compilerOptions": {
    "module": "system",
    "target": "es6",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

Ответ 2

Я считаю, что это проблема машинописи. Из того, что я могу сказать, он не учитывает оператор импорта в стиле es6 для унаследованного кода, то есть кода, который не имеет экспорта. Если вы используете старый стиль var $ = require ('jquery'), это работает.

Исправление для этого состоит в том, чтобы использовать флаг --allowSyntheticDefaultImports в true.

Первая ссылка внизу проблемы машинописи описывает это исправление

Смотрите эти обсуждения для более подробной информации

SystemJS и импорт по default с export = предложение

Импорт значений по умолчанию с синтаксисом es6 не работает

Не удается найти правильный синтаксис экспорта переменных по умолчанию

Ответ 3

Добавьте "esModuleInterop": true в compilerOptions в файле tsconfig.json, например:

{
"compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,  // <-- ADD THIS LINE
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "node_modules/*",
            "src/types/*"
        ]
    }
},
"include": [
    "src/**/*"
  ]
}

Если вы используете IntelliJ, он может не обнаружить изменение в tsconfig.json сразу, поэтому может быть полезно попробовать перезапустить IntelliJ, чтобы посмотреть, работает ли он.

Важная заметка:

Обратите внимание, что на этот раз import * as express from 'express'; нотация будет генерировать ошибку.

См. Руководство по TypeScript 2.7 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html):

Примечание. Новое поведение добавлено под флагом, чтобы избежать необоснованных разрывов в существующих базах кода. Мы настоятельно рекомендуем применять его как для новых, так и для существующих проектов. Для существующих проектов импорт пространства имен (import * as express from "express"; express();) необходимо будет преобразовать в импорт по умолчанию (import express from "express"; express();).