Modul nicht definiert ist, wird die Exporte nicht definiert - mit Typoskript + reagieren

Ich habe eine sehr einfache Anwendung, mit ASP 4/MVC 5 und Typoskript (2.3.1.0)Modul nicht definiert ist, wird die Exporte nicht definiert - mit Typoskript + reagieren

Hier ist das Grundlayout:

tsconfig.json

{ 

    "compileOnSave": true, 
    "compilerOptions": { 
    "noImplicitAny": true, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "jsx": "preserve", 
    "module": "commonjs", 
    "allowSyntheticDefaultImports": true 
    }, 
    "include": [ 
    "node_modules/@types/**/*.d.ts", 
    "Scripts/**/*.ts", 
    "Scripts/**/*.tsx" 
    ] 
}

app.tsx (kompiliert für Visual Studio Typoskript Tools app.js)

import React, { Component } from 'react'; 

interface FooProps { 
    name: string; 
} 

export default class Hello extends React.Component<FooProps, undefined> { 
    render() { 
     return <h1>Hello from {this.props.name} !</h1> 
    } 
}

_Layout.cshtml

<body> 
    @RenderBody() 

    <script type="text/javascript" src="~/Scripts/jquery-2.2.4.js"></script> 
    <script type="text/javascript" src="~/node_modules/react/react.js"></script> 
    <script type="text/javascript" src="~/node_modules/react-dom/dist/react-dom.js"></script> 
    <script type="text/javascript" src="~/Scripts/app.js"></script> 
</body>

Wenn ich laufe, dies in der Konsole angezeigt:

Ich versuche, dies zu tun, ohne etwas mit wie browserify/webpack. Meine Frage ist, ist es möglich ... und wenn ja, wie?

bearbeiten

app.jsx sieht nach der TSX -> jsx transpilation:

"use strict"; 
var __extends = (this && this.__extends) || (function() { 
    var extendStatics = Object.setPrototypeOf || 
     ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 
     function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 
    return function (d, b) { 
     extendStatics(d, b); 
     function __() { this.constructor = d; } 
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 
    }; 
})(); 
Object.defineProperty(exports, "__esModule", { value: true }); 
var react_1 = require("react"); 
var Hello = (function (_super) { 
    __extends(Hello, _super); 
    function Hello() { 
     return _super !== null && _super.apply(this, arguments) || this; 
    } 
    Hello.prototype.render = function() { 
     return <h1>Hello from {this.props.name} !</h1>; 
    }; 
    return Hello; 
}(react_1.default.Component)); 
//# sourceMappingURL=app.jsx.map

Hinweis, der Fehler ausgelöst wird hier:

Object.defineProperty(exports, "__esModule", { value: true });

Uncaught ReferenceError: exports is not defined

Quelle

2017-05-02 mariocatch

Wie sieht das 'app.js' beim transpilieren aus ..? – Searching

@Searching Eine Bearbeitung mit der transpilierten jsx hinzugefügt. – mariocatch

Sie benötigen SystemJS oder Webpack, um diese ES-Modul-Syntax dynamisch zu analysieren. Einige Browser unterstützen dies derzeit, reichen jedoch nicht aus, um eine vollständige App zu erstellen. –

"Ich versuche es Tun Sie dies, ohne etwas wie browserify/webpack zu verwenden "- die kurze Antwort ist nein. Die ES2015-Import/Export-Syntax wird derzeit von keinem Browser unterstützt. Ich bin also nicht sicher, wie Sie erwarten, dass es ohne einen Transcompilationsschritt in einem Browser funktioniert. Der beliebteste Weg dazu ist mit Webpack/Babel, aber Sie könnten nur Babel verwenden ....

Wenn Sie wirklich keine Transkompilierung vermeiden wollen, müssen Sie zukünftige Sprachfunktionen vermeiden. Daher müssten sich React und ReactDOM im globalen Namespace befinden und alle Ihre Komponenten müssten entweder in derselben Datei sein oder in den globalen Namespace geladen werden. Ich habe das Gefühl, dass dies ein harter Kampf sein würde, aber es ist sicherlich machbar.

Quelle

2017-05-02 02:46:56

Ich verwende die unter https://reactjs.net/ dokumentierte API, um meine jsx zu transpilieren und zu bündeln. Es ist ein [BabelBundle] (https://github.com/reactjs/React.NET/tree/master/src/System.Web.Optimization.React). Ich würde annehmen, dass dies tun würde, was es tun muss, um lauffähiges ES5-Javascript zu erzeugen? – mariocatch

Modul nicht definiert ist, wird die Exporte nicht definiert - mit Typoskript + reagieren

Antwort

Verwandte Themen