Брошюра "экспорт 'initMap' не найден в './components/map'

#webpack #leaflet #babeljs

#webpack #брошюра #babeljs

Вопрос:

Я пытаюсь создать приложение с помощью webpack и использовать листовку, но когда я пытаюсь экспортировать функцию initMap() из ./components /map в мой index.js у меня предупреждение: WARNING in ./src/js/index.js 6:2-9 "export 'initMap' was not found in './components/map' и карта не отображается.

Что я делаю не так?

components/map.js:

 import "leaflet/dist/leaflet.css";
import L from "leaflet/dist/leaflet";

export function initMap() {
    const mymap = L.map('map').setView([57.54523915, 38.32934606], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Arctic',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoidW1sYXV0LWEiLCJhIjoiY2tldjJpeDkyM3B3NDJ4cGkxcXhkb3MzeSJ9.vl5cjrqkQXYkfEP1rPQJ9g'
    }).addTo(mymap);
}

index.js:

 import "../css/main.css"
import { initMap, } from "./components/map";

document.addEventListener('DOMContentLoaded', () => {
    initMap();
});

это мои файлы webpack.config.js и babel.config.json , я совершенно новичок в webpack и babel, так что, возможно, это плохие примеры:

 const path = require('path');
const autoprefixer = require('autoprefixer');
const Entry = require('./webpack/Entry');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

const PUBLIC_PATH = path.join(__dirname, 'public', 'assets');
const IMG_PATH = path.join(PUBLIC_PATH, 'images');

module.exports = {
                        mode   : 'production',
                        devtool: false,
                        stats  : {
                            colors      : true,
                            hash        : true,
                            timings     : true,
                            assets      : true,
                            chunks      : true,
                            chunkModules: true,
                            modules     : false,
                            children    : false,
                        },
                        entry: { ...Entry.create(), },
                        output: {
                            filename: 'js/[name].[chunkhash:8].js',
                            chunkFilename: 'js/[name].[chunkhash:8].chunk.js',
                            path: PUBLIC_PATH,
                            publicPath: '/assets/',
                                },
                        optimization: {
                          minimize: true,
                          noEmitOnErrors: true,
                                          splitChunks: {
                                              chunks: 'all',
                                              name: false,
                                                      },
                                        },
                          node: {
                            fs: "empty",
                            },
  plugins: [
    new CleanWebpackPlugin(),
    new AssetsPlugin({
        filename   : 'assets.json',
        path       : PUBLIC_PATH,
        prettyPrint: true,
        entrypoints: true,
    }),
    new SpriteLoaderPlugin({
            plainSprite: false,
        }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash:8].css',
      chunkFilename: 'css/[name].[chunkhash:8].css',
    })
    ],
    module: {
        rules: [
                            {
                                test   : /.js$/,
                                exclude: /node_modules/,
                                use    : 'babel-loader'
                            },
                            {
                                test: /fonts[\/]. .(eot|ttf|woff|woff2)$/,
                                use: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'fonts/[name].[ext]'
                                    }
                                },
                            },
                            {
                                test: /images[\/]. .(gif|png|jpe?g|svg)$/i,
                                use: {
                                    loader: 'file-loader',
                                    options: {
                                        name: 'images/[name].[ext]',
                                    }
                                }
                            },
                            {
                                loader: 'image-webpack-loader',
                                options: {
                                    mozjpeg: {
                                        progressive: true,
                                        quality: 70
                                    },
                                    optipng: {
                                        enabled: true
                                    },
                                    pngquant: {
                                        quality: [0.7, 0.7],
                                        speed: 4
                                    },
                                    gifsicle: {
                                        interlaced: false
                                    },
                                }
                            },
                            {
                test: /.s?css/i,
                use : [
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '/assets/',
                        },
                    },
                    'css-loader',
                    {
                        loader : 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer,
                            ],
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /icons[\/]. .svg$/i,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: false,
                            spriteFilename: 'icons/icons.svg',
                        }
                    },
                    {
                        loader: path.resolve(__dirname, './svgClean.js'),
                    },
                ]
            }
            
        ]
    },
};

     {
      "presets": [
        "@babel/preset-env"
      ],
      "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-syntax-class-properties",
        "@babel/plugin-proposal-class-properties",
      ]
    }

это выглядит как index.js не видно конкретно ./components/map , потому что, когда я создал другую тестовую функцию в ./components , она работала хорошо.

Ответ №1:

Я думаю, что путь к компонентам неверен.

The index.js находится в /src/js/ , компоненты в /components/ .

Таким образом, относительный путь в index.js должно быть

 import { initMap, } from "../../../components/map"

Попробуйте.