So lösen Sie im Import "Importanweisung kann nicht außerhalb eines Moduls verwendet werden" auf

11

Ich habe eine React-Anwendung (ohne Create React App), die mit TypeScript, Jest, Webpack und Babel erstellt wurde. Beim Versuch, "Garnscherz" auszuführen, wird die folgende Fehlermeldung angezeigt:

Scherzfehler

Ich habe versucht, alle Pakete zu entfernen und erneut hinzuzufügen. Dies wird nicht behoben. Ich habe mir ähnliche Fragen und Unterlagen angesehen und verstehe immer noch etwas falsch. Ich ging so weit, einer anderen Anleitung zum Einrichten dieser Umgebung von Grund auf zu folgen, und erhielt dieses Problem immer noch mit meinem Code.

Abhängigkeiten umfassen ...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

Die Importzeilen der Komponente ...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

Die Testdatei ....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
    const tree = renderer
        .create(<App />)
        .toJSON();
    expect(tree).toMatchSnapshot();
});

Ich hatte erwartet, benannte Importe in meinen Komponenten verwenden zu können, ohne dass meine Tests explodierten. Es scheint das Problem zu beheben, wenn ich nur Standardimporte über meine Lösung verwende, aber ich würde es vorziehen, diesen Weg nicht zu gehen.

Logan Schuhmacher
quelle
Zu Ihrer Information, ich bin darauf gestoßen, als ich einen benutzerdefinierten TestSequencer für Jest eingerichtet habe, und habe einfach auf die Verwendung von requireanstelle von importnur für diese eine Datei umgestellt .
Joshua Pinter

Antworten:

3

Lösung: Meine benannten Importe stammten aus index.js-Dateien und ich glaube, ts-jest brauchte sie als index.ts-Dateien (ich verwende Typescript). Wenn jemand anderes auf diesen Fehler stößt, kann es nicht schaden, zu überprüfen, ob Sie Ihre Dateierweiterungen derpediert haben.

Ich habe leider viel Zeit damit verschwendet, aber ich habe viel über Webpack-Konfigurationen und Babel gelernt.

Logan Schuhmacher
quelle
0

Für zukünftige Referenzen,

Nachdem ich die Antwort von Logan Shoemaker gelesen hatte, löste ich das Problem mit der folgenden Scherzkonfiguration.

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
  }
};
Onur Özkan
quelle
0

Versuchen Sie dies, wenn Sie babel 6 verwenden. 1) Hinzufügen von @ babel / plugin-transform-modules-commonjs im Plugin-Bereich von babel.config.js

oder

2) In meinem Fall war das Importproblem auf das Löschen der Reaktionsdatei zurückzuführen, indem das zu transfromIgnorePatterns "transformIgnorePatterns" hinzugefügt wurde: ["/ node_modules / (?! React-file-drop)"],

readytohackk
quelle
0

Ich habe das gleiche Problem mit Typescript, Jest und VueJS / VueCli 3 festgestellt. Der normale Build hat kein Problem. passiert nur für Jest. Ich kämpfte stundenlang mit der Suche. Aber keine Antwort funktioniert tatsächlich. In meinem Fall habe ich eine Abhängigkeit von meinem eigenen Typoskript-Paket, das ich in der Datei tsconfig.json als "Ziel" angegeben habe: "es6" . Das ist die Grundursache. Die Lösung besteht also einfach darin, die Abhängigen wieder in es5 tsconfig.json zu ändern:

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}
Jianwu Chen
quelle
Was hast du geändert?
Nida Munir
1
Entschuldigung für den Fehler in meinem ursprünglichen Beitrag. Ich habe es6 im abhängigen Modul verwendet. Das ist die Hauptursache des Problems. Nachdem ich wieder zu es5 gewechselt bin , ist das Problem gelöst
Jianwu Chen
-1

Verwenden Sie Babel, um diese JS-Module zu transpilieren, und Sie können Ihre Tests mit es6 schreiben.

Installieren Sie Babel / preset-env

npm i -D @babel/preset-env

Erstellen Sie eine Babel-Konfigurationsdatei mit der Voreinstellung

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}
Natan Williams
quelle