Why doesn’t the browser find the import? vscode recognizes “import {Animal} from ‘./dist/output'”. I have “animal.ts” file:
//animal.ts
export class Animal{
species: string;
breed: string;
age: string;
name: string;
constructor(species: string, breed: string, age: string, name: string) {
this.species = species;
this.breed = breed;
this.age = age;
this.name = name;
}
info() {
console.log("species: ", this.species);
console.log("breed :", this.breed);
console.log("age :", this.age);
console.log("name :", this.name);
}
}
In my terminal I have executed: npm install webpack webpack-cli –save-dev npm install ts-loader typescript –save-dev tsc –init npx webpack –config webpack.config.js the webpack.config.js is:
const path = require('path');
module.exports = {
mode: 'development',
entry: './animal.ts', // Cambiado el punto de entrada a prueba1.ts
output: {
filename: 'output.js', // Nombre del archivo de salida
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
devtool: 'source-map',
};
The ‘output.js’ file is:
/******/ (() => { // webpackBootstrap
/******/ "use strict";
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it uses a non-standard name for the exports (exports).
(() => {
var exports = __webpack_exports__;
/*!*******************!*
!*** ./animal.ts ***!
*******************/
//animal.ts
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Animal = void 0;
class Animal {
constructor(species, breed, age, name) {
this.species = species;
this.breed = breed;
this.age = age;
this.name = name;
}
info() {
console.log("species: ", this.species);
console.log("breed :", this.breed);
console.log("age :", this.age);
console.log("name :", this.name);
}
}
exports.Animal = Animal;
})();
/******/ })()
;
//# sourceMappingURL=output.js.map
And I have made the following files:
// myScript.js
import {Animal} from './dist/output'
const animal= new Animal('dog', 'German Shepherd', '3 years old', 'Bobby');
animal.info();
and the “index.html” is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question</title>
<script type="module" src="myScript.js"></script>
</head>
<body>
<h1>My question</h1>
</body>
</html>
When I load the page in the browser the console says: Uncaught SyntaxError: The requested module ‘./dist/output’ does not provide an export named ‘Animal’ (at myScript.js:3:9).