@Artemis1

Как правильно сделать импорт модуля?

Захотел оптимизировать код и решил подключать к сайту swiper.js не топорно, просто добавляя целый файл, а через импрот. Но в итоге бразуер выдаёт ошибку на это место.
Код у меня на ванильном JS
import Swiper, { Navigation, Pagination } from 'swiper';

6126de8407ee4747392271.png
Если я сделаю импорт по тупому
import Swiper, { Navigation, Pagination }  from "../../node_modules/swiper";

Тогда заработает, но теперь не понятно как сделать импорт стилей конкретно для navigation и pagination

В общем спустя два дня я понел, что js не понимает import, так как использую gulp,а gulp не умеет работать с import, поэтому я решил использовать плагин webpack-stream, благодаря нему gulp даёт управление js файлами вебпаку.
Но ошибка осталась той-же. И тут дело теперь не в импортах, так как я файлу спокойно подключил: regenerator-runtime, чтобы async await работал и whatwg-fetch, чтобы fetch работал
Вот сама ошибка
[18:30:08] Using gulpfile D:\programming\productly\gulpfile.js
[18:30:08] Starting 'js'...
(node:8196) V8: D:\programming\productly\node_modules\ttf2woff2\jssrc\ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib
(Use `node --trace-warnings ...` to show where the warning was created)
[18:30:24] 'js' errored after 16 s
[18:30:24] Error in plugin "webpack-stream"
Message:
    ./src/js/main.js
Module not found: Error: Can't resolve 'swiper' in 'D:\programming\productly\src\js'
resolve 'swiper' in 'D:\programming\productly\src\js'
  Parsed request is a module
  using description file: D:\programming\productly\package.json (relative path: ./src/js)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\programming\productly\src\js\node_modules doesn't exist or is not a directory
      D:\programming\productly\src\node_modules doesn't exist or is not a directory
      D:\programming\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\programming\productly\node_modules
        using description file: D:\programming\productly\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: D:\programming\productly\node_modules\swiper\package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\programming\productly\node_modules\swiper is not a file
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              D:\programming\productly\node_modules\swiper.wasm doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\programming\productly\node_modules\swiper.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\programming\productly\node_modules\swiper.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\programming\productly\node_modules\swiper.json doesn't exist
            as directory
              existing directory
                using path: D:\programming\productly\node_modules\swiper\index
                  using description file: D:\programming\productly\node_modules\swiper\package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\programming\productly\node_modules\swiper\index doesn't exist
                    .wasm
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\programming\productly\node_modules\swiper\index.wasm doesn't exist
                    .mjs
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\programming\productly\node_modules\swiper\index.mjs doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\programming\productly\node_modules\swiper\index.js doesn't exist
                    .json
                      Field 'browser' doesn't contain a valid alias configuration
                      D:\programming\productly\node_modules\swiper\index.json doesn't exist
[D:\programming\productly\src\js\node_modules]
[D:\programming\productly\src\node_modules]
[D:\programming\node_modules]
[D:\node_modules]
[D:\programming\productly\node_modules\swiper]
[D:\programming\productly\node_modules\swiper.wasm]
[D:\programming\productly\node_modules\swiper.mjs]
[D:\programming\productly\node_modules\swiper.js]
[D:\programming\productly\node_modules\swiper.json]
[D:\programming\productly\node_modules\swiper\index]
[D:\programming\productly\node_modules\swiper\index.wasm]
[D:\programming\productly\node_modules\swiper\index.mjs]
[D:\programming\productly\node_modules\swiper\index.js]
[D:\programming\productly\node_modules\swiper\index.json]
 @ ./src/js/main.js 5:0-44 52:0-6 52:12-22 53:4-10
 @ multi ./src/js/main.js ./src/js/test.js
chunk main [entry]
main.js
D:\programming\productly\node_modules\babel-loader\lib\index.js!D:\programming\productly\src\js\main.js 9cbba724efb3e6a1d2496b3cac8da7c2
Unexpected token (54:4)
| fetchRequest();
| !(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()).use([!(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())]);
| new !(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())('.news__slider--container', {
|   direction: 'horizontal',
|   loop: true,
SyntaxError: D:\programming\productly\node_modules\babel-loader\lib\index.js!D:\programming\productly\src\js\main.js 9cbba724efb3e6a1d2496b3cac8da7c2
Unexpected token (54:4)
| fetchRequest();
| !(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()).use([!(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())]);
| new !(function webpackMissingModule() { var e = new Error("Cannot find module 'swiper'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())('.news__slider--container', {
|   direction: 'horizontal',
|   loop: true,
    at Parser.pp$4.raise (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2825:15)
    at Parser.pp.unexpected (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:689:10)
    at Parser.pp$3.parseExprAtom (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2270:12)
    at Parser.pp$3.parseNew (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2391:45)
    at Parser.pp$3.parseExprAtom (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2257:19)
    at Parser.pp$3.parseExprSubscripts (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2089:21)
    at Parser.pp$3.parseMaybeUnary (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2066:19)
    at Parser.pp$3.parseExprOps (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:2010:21)
    at Parser.pp$3.parseMaybeConditional (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:1993:21)
    at Parser.pp$3.parseMaybeAssign (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:1968:21)
    at Parser.pp$3.parseExpression (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:1933:21)
    at Parser.pp$1.parseStatement (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:877:47)
    at Parser.pp$1.parseTopLevel (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:746:23)
    at Parser.parse (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:553:17)
    at Function.parse (D:\programming\productly\node_modules\webpack\node_modules\acorn\dist\acorn.js:576:37)
    at Function.parse (D:\programming\productly\node_modules\webpack\lib\Parser.js:2409:22)
Details:
    domainThrown: true

Так выглядит структура моего проекта
6129081582c0e960416159.png
  • Вопрос задан
  • 303 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Alex_mos
Может в этом проблема, хотя статья 2017 года
61272754da41c736978518.jpeg
Ответ написан
@imko
Нерабочий вариант это импорт я подозреваю из node_modules, которых у тебя уже на сайте не будет. Вижу два стула, либо делай сборку и собирай свой плагин в общий JS файл, либо клади куда-нибудь папочку с плагином и абсолютным/относительным путем запрашивай через импорт
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы