webpacker 5.1.0 → 6.0.0.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (167) hide show
  1. checksums.yaml +4 -4
  2. data/.eslintrc.js +8 -8
  3. data/.github/workflows/jest.yml +38 -0
  4. data/.github/workflows/js-lint.yml +39 -0
  5. data/.github/workflows/rubocop.yml +39 -0
  6. data/.github/workflows/ruby.yml +70 -0
  7. data/.gitignore +2 -0
  8. data/.node-version +1 -1
  9. data/.rubocop.yml +11 -16
  10. data/6_0_upgrade.md +43 -0
  11. data/CHANGELOG.md +42 -2
  12. data/CONTRIBUTING.md +1 -1
  13. data/Gemfile.lock +91 -85
  14. data/README.md +226 -113
  15. data/lib/install/config/webpack/base.js +3 -0
  16. data/lib/install/config/webpack/development.js +2 -2
  17. data/lib/install/config/webpack/production.js +2 -2
  18. data/lib/install/config/webpack/test.js +2 -2
  19. data/lib/install/config/webpacker.yml +9 -38
  20. data/lib/install/javascript/packs/application.css +9 -0
  21. data/lib/install/javascript/packs/application.js +3 -1
  22. data/lib/install/template.rb +33 -19
  23. data/lib/tasks/webpacker.rake +2 -11
  24. data/lib/tasks/webpacker/binstubs.rake +6 -4
  25. data/lib/tasks/webpacker/check_binstubs.rake +4 -4
  26. data/lib/tasks/webpacker/check_node.rake +1 -1
  27. data/lib/tasks/webpacker/check_yarn.rake +2 -3
  28. data/lib/tasks/webpacker/compile.rake +4 -2
  29. data/lib/tasks/webpacker/info.rake +12 -10
  30. data/lib/tasks/webpacker/install.rake +6 -4
  31. data/lib/tasks/webpacker/verify_install.rake +2 -1
  32. data/lib/tasks/webpacker/yarn_install.rake +9 -1
  33. data/lib/webpacker/commands.rb +1 -1
  34. data/lib/webpacker/compiler.rb +20 -8
  35. data/lib/webpacker/configuration.rb +7 -23
  36. data/lib/webpacker/dev_server_runner.rb +23 -4
  37. data/lib/webpacker/helper.rb +51 -42
  38. data/lib/webpacker/manifest.rb +1 -1
  39. data/lib/webpacker/runner.rb +1 -0
  40. data/lib/webpacker/version.rb +1 -1
  41. data/lib/webpacker/webpack_runner.rb +7 -2
  42. data/package.json +27 -43
  43. data/package/__tests__/config.js +6 -27
  44. data/package/__tests__/development.js +18 -7
  45. data/package/__tests__/env.js +12 -4
  46. data/package/__tests__/production.js +6 -6
  47. data/package/__tests__/staging.js +7 -6
  48. data/package/__tests__/test.js +4 -5
  49. data/package/babel/preset.js +55 -0
  50. data/package/config.js +4 -9
  51. data/package/configPath.js +3 -0
  52. data/package/env.js +9 -4
  53. data/package/environments/__tests__/base.js +21 -36
  54. data/package/environments/base.js +63 -127
  55. data/package/environments/development.js +46 -39
  56. data/package/environments/production.js +63 -70
  57. data/package/environments/test.js +2 -2
  58. data/package/index.js +13 -8
  59. data/package/rules/babel.js +19 -10
  60. data/package/rules/coffee.js +6 -0
  61. data/package/rules/erb.js +15 -0
  62. data/package/rules/file.js +17 -18
  63. data/package/rules/index.js +16 -18
  64. data/package/rules/less.js +22 -0
  65. data/package/rules/raw.js +5 -0
  66. data/package/rules/sass.js +13 -10
  67. data/package/rules/svg.js +20 -0
  68. data/package/utils/get_style_rule.js +26 -36
  69. data/package/utils/helpers.js +26 -35
  70. data/test/compiler_test.rb +4 -11
  71. data/test/configuration_test.rb +2 -32
  72. data/test/dev_server_runner_test.rb +25 -6
  73. data/test/engine_rake_tasks_test.rb +39 -0
  74. data/test/helper_test.rb +18 -9
  75. data/test/mounted_app/Rakefile +4 -0
  76. data/test/mounted_app/test/dummy/Rakefile +3 -0
  77. data/test/mounted_app/test/dummy/bin/rails +3 -0
  78. data/test/mounted_app/test/dummy/bin/rake +3 -0
  79. data/test/mounted_app/test/dummy/config.ru +5 -0
  80. data/test/mounted_app/test/dummy/config/application.rb +10 -0
  81. data/test/mounted_app/test/dummy/config/environment.rb +3 -0
  82. data/test/mounted_app/test/dummy/config/webpacker.yml +75 -0
  83. data/test/mounted_app/test/dummy/package.json +7 -0
  84. data/test/rake_tasks_test.rb +1 -10
  85. data/test/test_app/config/webpacker.yml +3 -21
  86. data/test/test_app/config/webpacker_public_root.yml +0 -1
  87. data/test/test_app/public/packs/manifest.json +18 -13
  88. data/test/test_app/some.config.js +0 -0
  89. data/test/webpack_runner_test.rb +10 -4
  90. data/webpacker.gemspec +1 -1
  91. data/yarn.lock +2657 -6224
  92. metadata +50 -89
  93. data/.travis.yml +0 -43
  94. data/docs/assets.md +0 -119
  95. data/docs/cloud9.md +0 -310
  96. data/docs/css.md +0 -253
  97. data/docs/deployment.md +0 -130
  98. data/docs/docker.md +0 -68
  99. data/docs/engines.md +0 -213
  100. data/docs/env.md +0 -63
  101. data/docs/es6.md +0 -72
  102. data/docs/folder-structure.md +0 -66
  103. data/docs/integrations.md +0 -220
  104. data/docs/misc.md +0 -23
  105. data/docs/props.md +0 -223
  106. data/docs/testing.md +0 -136
  107. data/docs/troubleshooting.md +0 -156
  108. data/docs/typescript.md +0 -109
  109. data/docs/v4-upgrade.md +0 -142
  110. data/docs/webpack-dev-server.md +0 -92
  111. data/docs/webpack.md +0 -364
  112. data/docs/yarn.md +0 -23
  113. data/lib/install/angular.rb +0 -23
  114. data/lib/install/coffee.rb +0 -25
  115. data/lib/install/config/.browserslistrc +0 -1
  116. data/lib/install/config/babel.config.js +0 -72
  117. data/lib/install/config/postcss.config.js +0 -12
  118. data/lib/install/config/webpack/environment.js +0 -3
  119. data/lib/install/elm.rb +0 -39
  120. data/lib/install/erb.rb +0 -25
  121. data/lib/install/examples/angular/hello_angular.js +0 -7
  122. data/lib/install/examples/angular/hello_angular/app/app.component.ts +0 -9
  123. data/lib/install/examples/angular/hello_angular/app/app.module.ts +0 -16
  124. data/lib/install/examples/angular/hello_angular/index.ts +0 -8
  125. data/lib/install/examples/angular/hello_angular/polyfills.ts +0 -73
  126. data/lib/install/examples/coffee/hello_coffee.coffee +0 -4
  127. data/lib/install/examples/elm/Main.elm +0 -55
  128. data/lib/install/examples/elm/hello_elm.js +0 -16
  129. data/lib/install/examples/erb/hello_erb.js.erb +0 -6
  130. data/lib/install/examples/react/babel.config.js +0 -87
  131. data/lib/install/examples/react/hello_react.jsx +0 -26
  132. data/lib/install/examples/react/tsconfig.json +0 -21
  133. data/lib/install/examples/stimulus/application.js +0 -1
  134. data/lib/install/examples/stimulus/controllers/hello_controller.js +0 -18
  135. data/lib/install/examples/stimulus/controllers/index.js +0 -9
  136. data/lib/install/examples/svelte/app.svelte +0 -11
  137. data/lib/install/examples/svelte/hello_svelte.js +0 -20
  138. data/lib/install/examples/typescript/hello_typescript.ts +0 -4
  139. data/lib/install/examples/typescript/tsconfig.json +0 -24
  140. data/lib/install/examples/vue/app.vue +0 -22
  141. data/lib/install/examples/vue/hello_vue.js +0 -72
  142. data/lib/install/loaders/coffee.js +0 -6
  143. data/lib/install/loaders/elm.js +0 -25
  144. data/lib/install/loaders/erb.js +0 -11
  145. data/lib/install/loaders/svelte.js +0 -9
  146. data/lib/install/loaders/vue.js +0 -6
  147. data/lib/install/react.rb +0 -18
  148. data/lib/install/stimulus.rb +0 -12
  149. data/lib/install/svelte.rb +0 -29
  150. data/lib/install/typescript.rb +0 -42
  151. data/lib/install/vue.rb +0 -49
  152. data/lib/tasks/installers.rake +0 -42
  153. data/package/config_types/__tests__/config_list.js +0 -118
  154. data/package/config_types/__tests__/config_object.js +0 -43
  155. data/package/config_types/config_list.js +0 -75
  156. data/package/config_types/config_object.js +0 -55
  157. data/package/config_types/index.js +0 -7
  158. data/package/rules/module.css.js +0 -3
  159. data/package/rules/module.sass.js +0 -8
  160. data/package/rules/node_modules.js +0 -24
  161. data/package/utils/__tests__/deep_assign.js +0 -32
  162. data/package/utils/__tests__/deep_merge.js +0 -10
  163. data/package/utils/__tests__/get_style_rule.js +0 -65
  164. data/package/utils/__tests__/objectify.js +0 -9
  165. data/package/utils/deep_assign.js +0 -22
  166. data/package/utils/deep_merge.js +0 -22
  167. data/package/utils/objectify.js +0 -3
@@ -1,23 +0,0 @@
1
- # How-Tos
2
-
3
-
4
- ## Ignoring swap files
5
-
6
- If you are using vim or emacs and want to ignore certain files you can add `ignore-loader`:
7
-
8
- ```
9
- yarn add ignore-loader
10
- ```
11
-
12
- and add `ignore-loader` to `config/webpack/environment.js`
13
-
14
- ```js
15
- // ignores vue~ swap files
16
- const { environment } = require('@rails/webpacker')
17
- environment.loaders.append('ignore', {
18
- test: /.vue~$/,
19
- loader: 'ignore-loader'
20
- })
21
- ```
22
-
23
- And now all files with `.vue~` will be ignored by the webpack compiler.
@@ -1,223 +0,0 @@
1
- # Props
2
-
3
-
4
- ## React
5
-
6
- If you need more advanced React-integration, like server rendering, redux, or react-router, see [shakacode/react_on_rails](https://github.com/shakacode/react_on_rails), [react-rails](https://github.com/reactjs/react-rails), and [webpacker-react](https://github.com/renchap/webpacker-react).
7
-
8
- If you're not concerned with view helpers to pass props or server rendering, can do it yourself:
9
-
10
- ```erb
11
- <%# views/layouts/application.html.erb %>
12
-
13
- <%= content_tag :div,
14
- id: "hello-react",
15
- data: {
16
- message: 'Hello!',
17
- name: 'David'
18
- }.to_json do %>
19
- <% end %>
20
- ```
21
-
22
- ```js
23
- // app/javascript/packs/hello_react.js
24
-
25
- const Hello = props => (
26
- <div className='react-app-wrapper'>
27
- <img src={clockIcon} alt="clock" />
28
- <h5 className='hello-react'>
29
- {props.message} {props.name}!
30
- </h5>
31
- </div>
32
- )
33
-
34
- // Render component with data
35
- document.addEventListener('DOMContentLoaded', () => {
36
- const node = document.getElementById('hello-react')
37
- const data = JSON.parse(node.getAttribute('data'))
38
-
39
- ReactDOM.render(<Hello {...data} />, node)
40
- })
41
- ```
42
-
43
-
44
- ## Vue
45
-
46
- Add the data as attributes in the element you are going to use (or any other element for that matter).
47
-
48
- ```erb
49
- <%= content_tag :div,
50
- id: "hello-vue",
51
- data: {
52
- message: "Hello!",
53
- name: "David"
54
- }.to_json do %>
55
- <% end %>
56
- ```
57
-
58
- This should produce the following HTML:
59
-
60
- ```html
61
- <div id="hello-vue" data="{&quot;message&quot;:&quot;Hello!&quot;,&quot;name&quot;:&quot;David&quot;}"></div>
62
- ```
63
-
64
- Now, modify your Vue app to expect the properties.
65
-
66
- ```html
67
- <template>
68
- <div id="app">
69
- <p>{{test}}{{message}}{{name}}</p>
70
- </div>
71
- </template>
72
-
73
- <script>
74
- export default {
75
- // A child component needs to explicitly declare
76
- // the props it expects to receive using the props option
77
- // See https://vuejs.org/v2/guide/components.html#Props
78
- props: ["message","name"],
79
- data: function () {
80
- return {
81
- test: 'This will display: '
82
- }
83
- }
84
- }
85
- </script>
86
-
87
- <style>
88
- </style>
89
-
90
- ```
91
-
92
- ```js
93
- document.addEventListener('DOMContentLoaded', () => {
94
- // Get the properties BEFORE the app is instantiated
95
- const node = document.getElementById('hello-vue')
96
- const props = JSON.parse(node.getAttribute('data'))
97
-
98
- // Render component with props
99
- new Vue({
100
- render: h => h(App, { props })
101
- }).$mount('#hello-vue');
102
- })
103
- ```
104
-
105
- You can follow same steps for Angular too.
106
-
107
-
108
- ## Elm
109
-
110
- Just like with other implementations, we'll render our data inside a `data`
111
- attribute:
112
-
113
- ```erb
114
- <%= content_tag :div,
115
- id: "hello-elm",
116
- data: {
117
- message: "Hello",
118
- name: "David"
119
- }.to_json do %>
120
- <% end %>
121
- ```
122
-
123
- We parse the JSON data and pass it to Elm as flags:
124
-
125
- ```js
126
- import Elm from '../Main'
127
-
128
- document.addEventListener('DOMContentLoaded', () => {
129
- const node = document.getElementById('hello-elm')
130
- const data = JSON.parse(node.getAttribute('data'))
131
- Elm.Main.embed(node, data)
132
- })
133
- ```
134
-
135
- Defining `Flags` as a `type alias`, we instruct Elm to demand flags `message`
136
- and `name` of type `String` on initialization.
137
-
138
- Using `programWithFlags` we bring all the pieces together:
139
-
140
-
141
- ```elm
142
- module Main exposing (..)
143
-
144
- import Html exposing (Html, programWithFlags, h1, text)
145
- import Html.Attributes exposing (style)
146
-
147
-
148
- -- MODEL
149
-
150
-
151
- type alias Flags =
152
- { message : String
153
- , name : String
154
- }
155
-
156
-
157
- type alias Model =
158
- { message : String
159
- , name : String
160
- }
161
-
162
-
163
- type Msg
164
- = NoOp
165
-
166
-
167
-
168
- -- INIT
169
-
170
-
171
- init : Flags -> ( Model, Cmd Msg )
172
- init flags =
173
- let
174
- { message, name } =
175
- flags
176
- in
177
- ( Model message name, Cmd.none )
178
-
179
-
180
-
181
- -- UPDATE
182
-
183
-
184
- update : Msg -> Model -> ( Model, Cmd Msg )
185
- update msg model =
186
- case msg of
187
- NoOp ->
188
- ( model, Cmd.none )
189
-
190
-
191
-
192
- -- SUBSCRIPTIONS
193
-
194
-
195
- subscriptions : Model -> Sub Msg
196
- subscriptions model =
197
- Sub.none
198
-
199
-
200
-
201
- -- VIEW
202
-
203
-
204
- view : Model -> Html Msg
205
- view model =
206
- h1 [ style [ ( "display", "flex" ), ( "justify-content", "center" ) ] ]
207
- [ text (model.message ++ ", " ++ model.name ++ "!") ]
208
-
209
-
210
-
211
- -- MAIN
212
-
213
-
214
- main : Program Flags Model Msg
215
- main =
216
- programWithFlags
217
- { view = view
218
- , init = init
219
- , update = update
220
- , subscriptions = subscriptions
221
- }
222
-
223
- ```
@@ -1,136 +0,0 @@
1
- # Testing
2
-
3
- ## Karma setup for Typescript
4
-
5
- Webpacker does not setup `Karma` by default, so you've to manually install it along with its dependencies as per your need. Following things marked as optional can be used to fancify the test results (Recommended).
6
-
7
- ```js
8
- // package.json
9
- "scripts": {
10
- "test": "NODE_ENV=test karma start"
11
- },
12
- "dependencies": {
13
- "typescript": "^2.5.2"
14
- },
15
- "devDependencies": {
16
- "karma": "^1.7.1",
17
- "karma-webpack": "^2.0.4",
18
- "karma-chrome-launcher": "^2.2.0",
19
- "karma-jquery": "^0.2.2",
20
- "karma-jasmine": "^1.1.0",
21
- "karma-jasmine-jquery": "^0.1.1",
22
- "jasmine-core": "^2.8.0",
23
- [optional] "karma-coverage": "^1.1.1",
24
- [optional] "karma-coverage-istanbul-reporter": "^1.3.0",
25
- [optional] "karma-spec-reporter": "0.0.31",
26
- [optional] "istanbul-instrumenter-loader": "^3.0.0",
27
- }
28
- ```
29
-
30
- It is beneficial to use the same webpack configuration file (generated by webpacker) in Karma configuration to avoid redundancy. Following line tells Karma not to write transpiled source files onto filesystem while testing to avoid `Error: EACCES: permission denied, mkdir '/_karma_webpack_' ` error. Then inject a new rule a.k.a. loader in the existing ones (needed only if you have installed `istanbul-instrumenter-loader`) to generate a coverage report under `/coverage` directory.
31
-
32
- ```js
33
- // config/webpack/test.js
34
- const environment = require('./environment')
35
- environment.plugins.get('Manifest').opts.writeToFileEmit = process.env.NODE_ENV !== 'test'
36
- environment.loaders.append('istanbul-instrumenter', {
37
- test: /\.ts$/,
38
- enforce: "post",
39
- loader: "istanbul-instrumenter-loader",
40
- query: {
41
- esModules: true
42
- },
43
- exclude: ["node_modules", /\.test\.ts$/]
44
- }) /* optional */
45
- module.exports = environment.toWebpackConfig()
46
- ```
47
-
48
- Finally, update `karma.conf.js` to read the same `test.js` file mentioned above. Rest of the things are mandatory (few marked as optional wherever appropriate).
49
-
50
- ```js
51
- // karma.conf.js
52
- const webpackConfig = require('./config/webpack/test.js')
53
- module.exports = function(config) {
54
- config.set({
55
- basePath: "",
56
- frameworks: ["jquery-3.2.1", "jasmine-jquery", "jasmine"],
57
- plugins: [
58
- "karma-jquery",
59
- "karma-jasmine-jquery",
60
- "karma-jasmine",
61
- "karma-webpack",
62
- "karma-chrome-launcher",
63
- "karma-coverage-istanbul-reporter" /* optional */,
64
- "karma-spec-reporter" /* optional */
65
- ],
66
- files: [ "/* add spec files */" ],
67
- exclude: [],
68
- webpack: webpackConfig,
69
- preprocessors: {"/* add spec files */" : ["webpack"]},
70
- mime: { "text/x-typescript": ["ts"] },
71
- reporters: ["progress", "coverage-istanbul" /* optional */],
72
- coverageIstanbulReporter: {
73
- reports: [ 'html', 'lcovonly', 'text-summary' ],
74
- fixWebpackSourcePaths: true
75
- } /* optional */,
76
- port: 9876,
77
- colors: true,
78
- logLevel: config.LOG_INFO,
79
- autoWatch: true,
80
- browsers: ["Chrome"],
81
- singleRun: true
82
- });
83
- };
84
- ```
85
-
86
- ## Lazy compilation
87
-
88
- Webpacker lazily compiles assets in test env so you can write your tests without any extra
89
- setup and everything will just work out of the box.
90
-
91
- Here is a sample system test case with hello_react example component:
92
-
93
- ```js
94
- // Example React component
95
-
96
- import React from 'react'
97
- import ReactDOM from 'react-dom'
98
- import PropTypes from 'prop-types'
99
-
100
- const Hello = props => (
101
- <div>Hello David</div>
102
- )
103
-
104
- document.addEventListener('DOMContentLoaded', () => {
105
- ReactDOM.render(
106
- <Hello />,
107
- document.body.appendChild(document.createElement('div')),
108
- )
109
- })
110
- ```
111
-
112
- ```erb
113
- <%# views/pages/home.html.erb %>
114
-
115
- <%= javascript_pack_tag "hello_react" %>
116
- ```
117
-
118
- ```rb
119
- # Tests example React component
120
- require "application_system_test_case"
121
- class HomesTest < ApplicationSystemTestCase
122
- test "can see the hello message" do
123
- visit root_url
124
- assert_selector "h5", text: "Hello! David"
125
- end
126
- end
127
- ```
128
-
129
- ## Capybara setup for Rails
130
- Make sure you configure Rails to serve static files from the public directory in the test environment.
131
-
132
- ```rb
133
- # config/environments/test.rb
134
- # Configure public file server for tests with Cache-Control for performance.
135
- config.public_file_server.enabled = true
136
- ```
@@ -1,156 +0,0 @@
1
- # Troubleshooting
2
-
3
- ## Debugging your webpack config
4
-
5
- 1. Read the error message carefully. The error message will tell you the precise key value
6
- that is not matching what Webpack expects.
7
- 2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug`.
8
- If you have a node debugger installed, you'll see the Chrome debugger for your webpack
9
- config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
10
- set the option for the dev tools to open automatically. For more details on debugging,
11
- see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
12
-
13
- ## ENOENT: no such file or directory - node-sass
14
-
15
- If you get the error `ENOENT: no such file or directory - node-sass` on deploy with
16
- `assets:precompile` or `bundle exec rails webpacker:compile` you may need to
17
- move Sass to production `dependencies`.
18
-
19
- Move any packages that related to Sass (e.g. `node-sass` or `sass-loader`) from
20
- `devDependencies` to `dependencies` in `package.json`. This is because
21
- webpacker is running on a production system with the Rails workflow to build
22
- the assets. Particularly on hosting providers that try to detect and do the right
23
- thing, like Heroku.
24
-
25
- However, if you get this on local development, or not during a deploy then you
26
- may need to rebuild `node-sass`. It's a bit of a weird error; basically, it
27
- can't find the `node-sass` binary. An easy solution is to create a postinstall
28
- hook to ensure `node-sass` is rebuilt whenever new modules are installed.
29
-
30
- In `package.json`:
31
-
32
- ```json
33
- "scripts": {
34
- "postinstall": "npm rebuild node-sass"
35
- }
36
- ```
37
-
38
- ## Can't find hello_react.js in manifest.json
39
-
40
- * If you get this error `Can't find hello_react.js in manifest.json`
41
- when loading a view in the browser it's because webpack is still compiling packs.
42
- Webpacker uses a `manifest.json` file to keep track of packs in all environments,
43
- however since this file is generated after packs are compiled by webpack. So,
44
- if you load a view in browser whilst webpack is compiling you will get this error.
45
- Therefore, make sure webpack
46
- (i.e `./bin/webpack-dev-server`) is running and has
47
- completed the compilation successfully before loading a view.
48
-
49
-
50
- ## throw er; // Unhandled 'error' event
51
-
52
- * If you get this error while trying to use Elm, try rebuilding Elm. You can do
53
- so with a postinstall hook in your `package.json`:
54
-
55
- ```
56
- "scripts": {
57
- "postinstall": "npm rebuild elm"
58
- }
59
- ```
60
-
61
-
62
- ## webpack or webpack-dev-server not found
63
-
64
- * This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
65
-
66
- * If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
67
-
68
- ```bash
69
- bundle config --delete bin
70
- ./bin/rails app:update:bin # or rails app:update:bin
71
- ```
72
-
73
-
74
- ## Running webpack on Windows
75
-
76
- If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
77
- for the scripts generated in `bin/webpack` and `bin/webpack-dev-server`. Instead you'll want to run the scripts
78
- manually with Ruby:
79
-
80
- ```
81
- C:\path>ruby bin\webpack
82
- C:\path>ruby bin\webpack-dev-server
83
- ```
84
-
85
-
86
- ## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
87
-
88
- If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
89
-
90
- ## Running Elm on Continuous Integration (CI) services such as CircleCI, CodeShip, Travis CI
91
-
92
- If your tests are timing out or erroring on CI it is likely that you are experiencing the slow Elm compilation issue described here: [elm-compiler issue #1473](https://github.com/elm-lang/elm-compiler/issues/1473)
93
-
94
- The issue is related to CPU count exposed by the underlying service. The basic solution involves using [libsysconfcpus](https://github.com/obmarg/libsysconfcpus) to change the reported CPU count.
95
-
96
- Basic fix involves:
97
-
98
- ```bash
99
- # install sysconfcpus on CI
100
- git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
101
- cd libsysconfcpus
102
- .configure --prefix=$HOME/dependencies/sysconfcpus
103
- make && make install
104
-
105
- # use sysconfcpus with elm-make
106
- mv $HOME/your_rails_app/node_modules/.bin/elm-make $HOME/your_rails_app/node_modules/.bin/elm-make-old
107
- printf "#\041/bin/bash\n\necho \"Running elm-make with sysconfcpus -n 2\"\n\n$HOME/dependencies/sysconfcpus/bin/sysconfcpus -n 2 $HOME/your_rails_app/node_modules/.bin/elm-make-old \"\$@\"" > $HOME/your_rails_app/node_modules/.bin/elm-make
108
- chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
109
- ```
110
-
111
- ## Rake assets:precompile fails. ExecJS::RuntimeError
112
- This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
113
-
114
- ```ruby
115
- // production.rb
116
- # From
117
-
118
- Rails.application.config.assets.js_compressor = :uglifier
119
-
120
- # To
121
-
122
- Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
123
-
124
- ```
125
-
126
- ### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
127
-
128
- To silent these warnings, please update `config/webpack/environment.js`
129
-
130
- ```js
131
- // environment.js
132
- const webpack = require('webpack')
133
- const { resolve } = require('path')
134
- const { environment, config } = require('@rails/webpacker')
135
-
136
- environment.plugins.append('ContextReplacement',
137
- new webpack.ContextReplacementPlugin(
138
- /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
139
- resolve(config.source_path)
140
- )
141
- )
142
- ```
143
-
144
- ### Compilation Fails Silently
145
-
146
- If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
147
-
148
- ```yml
149
- # webpacker.yml
150
- default: &default
151
- source_path: app/javascript
152
- source_entry_path: packs
153
- public_root_path: public
154
- public_output_path: complaints_packs
155
- webpack_compile_output: true
156
- ```