Rails, Webpacker и Elm: как правильно импортировать файлы?

1

У меня возникли проблемы с правильным импортом модулей Elm которые я пишу в своем приложении Rails 5.1.4, используя соглашения по умолчанию из Webpacker.

Здесь моя текущая структура каталогов для моего каталога app/javascript:

tree
.
├── heritage_survey
│   ├── Language.elm
│   ├── Languages.elm
│   ├── Main.elm
│   └── index.js
├── packs
│   └── heritage_survey.js
└── util
    ├── Maybe.elm
    └── String.elm

packs/heritage_survey.js Heritage_survey.js:

import 'heritage_survey'

Содержимое heritage_survey/index.js:

import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'

document.addEventListener('turbolinks:load', () => {
  const target = document.getElementById('heritage-survey')

  Elm.Main.embed(target);
});

И, наконец, здесь заявления import из heritage_survey/Main.elm:

import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import Language exposing (Languages, Language)
import Util.Maybe as May

К сожалению, я получаю следующую ошибку компиляции webpack:

14:39:59 webpack.1 | webpack: Compiling...
14:39:59 webpack.1 |  10% building modules 0/1 modules 1 active ...p/javascript/heritage_survey/Main.elmRunning /Users/mueller.128/repos/asctech/multicat/node_modules/.bin/elm-make /Users/mueller.128/repos/asctech/multicat/app/javascript/heritage_survey/Main.elm --yes --warn --debug --output /var/folders/lw/nfv4jfkj1tg1q0r9tt7n6yrcgknvck/T/117108-49541-128p571.4v28.js
Hash: 29154e6aed5cde6dc2e8
14:39:59 webpack.1 | Version: webpack 3.8.1
14:39:59 webpack.1 | Time: 417ms
14:39:59 webpack.1 |                                   Asset      Size  Chunks                    Chunk Names
14:39:59 webpack.1 | heritage_survey-4b40cb19cfb9f25f7791.js   2.19 MB       0  [emitted]  [big]  heritage_survey
14:39:59 webpack.1 |                           manifest.json  76 bytes          [emitted]
14:39:59 webpack.1 |    [2] multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js 40 bytes {0}
14:39:59 webpack.1 |    [3] (webpack)-dev-server/client?http://0.0.0.0:3035 7.95 kB {0}
14:39:59 webpack.1 |    [4] ./node_modules/url/url.js 23.3 kB {0}
14:39:59 webpack.1 |    [5] ./node_modules/punycode/punycode.js 14.7 kB {0}
14:39:59 webpack.1 |   [11] ./node_modules/strip-ansi/index.js 161 bytes {0}
14:39:59 webpack.1 |   [12] ./node_modules/ansi-regex/index.js 135 bytes {0}
14:39:59 webpack.1 |   [13] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0}
14:39:59 webpack.1 |   [14] (webpack)-dev-server/client/socket.js 1.05 kB {0}
14:39:59 webpack.1 |   [16] (webpack)-dev-server/client/overlay.js 3.73 kB {0}
14:39:59 webpack.1 |   [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
14:39:59 webpack.1 |   [23] (webpack)/hot/emitter.js 75 bytes {0}
14:39:59 webpack.1 |   [25] ./app/javascript/packs/heritage_survey.js 25 bytes {0}
14:39:59 webpack.1 |   [26] ./app/javascript/heritage_survey/index.js 261 bytes {0}
14:39:59 webpack.1 |   [30] ./app/javascript/util/String.elm 81 kB {0}
14:39:59 webpack.1 |   [31] ./app/javascript/util/Maybe.elm 80.8 kB {0}
14:39:59 webpack.1 |     + 17 hidden modules
14:39:59 webpack.1 |
14:39:59 webpack.1 | ERROR in ./app/javascript/heritage_survey/Main.elm
14:39:59 webpack.1 | Module build failed: Error: Compiler process exited with error Compilation failed
14:39:59 webpack.1 | I cannot find module 'Language'.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Module 'Main' is trying to import it.
14:39:59 webpack.1 |
14:39:59 webpack.1 | Potential problems could be:
14:39:59 webpack.1 |   * Misspelled the module name
14:39:59 webpack.1 |   * Need to add a source directory or new dependency to elm-package.json
14:39:59 webpack.1 |
14:39:59 webpack.1 |     at ChildProcess.<anonymous> (/Users/mueller.128/repos/asctech/multicat/node_modules/node-elm-compiler/index.js:141:27)
14:39:59 webpack.1 |     at emitTwo (events.js:126:13)
14:39:59 webpack.1 |     at ChildProcess.emit (events.js:214:7)
14:39:59 webpack.1 |     at maybeClose (internal/child_process.js:925:16)
14:39:59 webpack.1 |     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14:39:59 webpack.1 |  @ ./app/javascript/heritage_survey/index.js 1:0-25
14:39:59 webpack.1 |  @ ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 |  @ multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/heritage_survey.js
14:39:59 webpack.1 | webpack: Failed to compile.
Теги:
webpack
elm

1 ответ

0

Как оказалось, мне также нужно обновить source-directories в elm-package.json в корне моего приложения. Я попытался включить только ./app/javascript но это, похоже, не сработало. Мне также пришлось включить ./app/javascript/heritage_survey.

ОБНОВЛЕНИЕ:

Ладно, я сейчас все понимаю. Здесь моя окончательная структура каталогов, их содержимое и конфигурация elm-package.json.

Структура каталога app/javascript:

tree
.
├── HeritageSurvey
│   ├── Language.elm
│   ├── Languages.elm
│   ├── Main.elm
│   └── index.js
├── packs
│   └── heritage_survey.js
└── util
    ├── Maybe.elm
    └── String.elm

app/javascript/packs/heritage_survey.js contents_survey.js:

import 'HeritageSurvey'

app/javascripts/HeritageSurvey/index.js Содержание app/javascripts/HeritageSurvey/index.js:

import Elm from './Main'
import './Language'
import './Languages'
import 'util/String'
import 'util/Maybe'

document.addEventListener('turbolinks:load', () => {
  const target = document.getElementById('heritage-survey')

  Elm.Main.embed(target);
});

app/javascript/HeritageSurvey/Main.elm:

import Html exposing (Html, h1, text, form, div, input, label, select, option, button)
import Html.Attributes exposing (class, for, value, type_, disabled, selected, multiple, checked)
import Html.Events exposing (on, onCheck, onInput)
import Json.Decode
import HeritageSurvey.Language as Language exposing (Languages, Language)

source-directories в файле конфигурации elm-package.json:

"source-directories": [
    "./app/javascript",
    "./app/javascript/packs"
],

Ещё вопросы

Сообщество Overcoder
Наверх
Меню