Видел решения на разных форумах, но все равно не понимаю, что нужно делать, объясните пожалуйста.
Начал делать небольшой проект, возникла ошибка, сейчас постараюсь все расписать.
HTML:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<script type="module" src="app.js" ></script>
</body>
</html>
Вот моя структура файлов:
Основной файл app.js, модули apiConfig.js, apiservice.js и locations.js.
app.js:
import locations from './store/locations';
locations.Init().then(res => console.log(res));
apiConfig.js:
const config = {
url: 'https://aviasales-api.herokuapp.com',
};
export default config;
apiService.js :
import axios from 'axios';
import config from '../config/apiConfig';
class Api {
constructor(config) {
this.url = config.url ;
}
async countries() {
try {
const response = await axios.get(`${this.url}/countries`)
console.log(response);
} catch (err) {
console.log(err);
return Promise.reject(err);
}
}
async cities() {
try {
const response = await axios.get(`${this.url}/cities`)
console.log(response);
} catch (err) {
console.log(err);
return Promise.reject(err);
}
}
async prices(params) {
}
}
const api = new Api(config);
export default api;
locations.js:
import api from '../service/apiService';
class Locations {
constructor(api) {
this.api = api;
this.countries = countries;
this.cities = cities;
}
async Init() {
const response = await Promise.all([
this.api.countries(),
this.api.cities()
])
const [counties, cities] = response;
this.countries = counties;
this.cities = cities;
return response;
}
getCitiesByCountryCode(code) {
return this.cities.filter(city => city.county_code === code);
}
}
const locations = new Locations(api);
export default locations;
Вот webpack:
const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
app: './app.js',
},
context: path.resolve(__dirname, 'src'),
devServer: {
publicPath: '/',
port: 5500,
contentBase: path.join(process.cwd(), 'dist'),
host: '127.0.0.1',
historyApiFallback: true,
noInfo: false,
stats: 'minimal',
hot: true,
},
module: {
rules: [
{
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
test: /\.js$/,
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [precss, autoprefixer],
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
},
mode: 'development',
};
В итоге возникает такая ошибка:
