search

rails / webpacker

Use Webpack to manage app-like JavaScript modules in Rails
MIT License
5.31k stars 1.47k forks source link

Module not found: Error: Can't resolve '@rails/activestorage' #2546

Closed deepj closed 4 years ago

deepj commented 4 years ago

I'm quite frustrated by this kind of error. I tried many things including removing .yarnclean (https://stackoverflow.com/questions/59344632/cannot-find-module-rails-ujs-rails-6-webpack-app) ./node_modules/@rails/activestorage folder exists. No success yet. I'm transfering legacy application to modern one. And one of thing is sprockets => webpacker upgrade. 90 % have converted successfully.

Error:

Note: ~/acme2 is not real path

ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '@rails/activestorage' in '~/acme2/app/javascript/packs'
resolve '@rails/activestorage' in '~/acme2/app/javascript/packs'
  Parsed request is a module
  using description file: ~/acme2/package.json (relative path: ./app/javascript/packs)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in ~/acme2/app/javascript
        using description file: ~/acme2/package.json (relative path: ./app/javascript)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: ~/acme2/package.json (relative path: ./app/javascript/@rails/activestorage)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage doesn't exist
            .erb
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.erb doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.vue doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.js doesn't exist
            .sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.sass doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.scss doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.css doesn't exist
            .module.sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.module.sass doesn't exist
            .module.scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.module.scss doesn't exist
            .module.css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.module.css doesn't exist
            .png
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.png doesn't exist
            .svg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.svg doesn't exist
            .gif
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.gif doesn't exist
            .jpeg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.jpeg doesn't exist
            .jpg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/javascript/@rails/activestorage.jpg doesn't exist
            as directory
              ~/acme2/app/javascript/@rails/activestorage doesn't exist
      looking for modules in ~/acme2/app/stylesheets
        using description file: ~/acme2/package.json (relative path: ./app/stylesheets)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: ~/acme2/package.json (relative path: ./app/stylesheets/@rails/activestorage)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage doesn't exist
            .erb
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.erb doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.vue doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.js doesn't exist
            .sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.sass doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.scss doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.css doesn't exist
            .module.sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.module.sass doesn't exist
            .module.scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.module.scss doesn't exist
            .module.css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.module.css doesn't exist
            .png
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.png doesn't exist
            .svg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.svg doesn't exist
            .gif
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.gif doesn't exist
            .jpeg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.jpeg doesn't exist
            .jpg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/stylesheets/@rails/activestorage.jpg doesn't exist
            as directory
              ~/acme2/app/stylesheets/@rails/activestorage doesn't exist
      looking for modules in ~/acme2/app/images
        using description file: ~/acme2/package.json (relative path: ./app/images)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: ~/acme2/package.json (relative path: ./app/images/@rails/activestorage)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage doesn't exist
            .erb
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.erb doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.vue doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.js doesn't exist
            .sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.sass doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.scss doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.css doesn't exist
            .module.sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.module.sass doesn't exist
            .module.scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.module.scss doesn't exist
            .module.css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.module.css doesn't exist
            .png
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.png doesn't exist
            .svg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.svg doesn't exist
            .gif
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.gif doesn't exist
            .jpeg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.jpeg doesn't exist
            .jpg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/app/images/@rails/activestorage.jpg doesn't exist
            as directory
              ~/acme2/app/images/@rails/activestorage doesn't exist
      ~/acme2/app/javascript/packs/node_modules doesn't exist or is not a directory
      ~/acme2/app/javascript/node_modules doesn't exist or is not a directory
      ~/acme2/app/node_modules doesn't exist or is not a directory
      /Users/deepj/dev/cloudsystems/node_modules doesn't exist or is not a directory
      /Users/deepj/dev/node_modules doesn't exist or is not a directory
      /Users/deepj/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in ~/acme2/node_modules
        using description file: ~/acme2/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: ~/acme2/node_modules/@rails/activestorage/package.json (relative path: .)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage is not a file
            .erb
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.erb doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.vue doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.js doesn't exist
            .sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.sass doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.scss doesn't exist
            .css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.css doesn't exist
            .module.sass
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.module.sass doesn't exist
            .module.scss
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.module.scss doesn't exist
            .module.css
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.module.css doesn't exist
            .png
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.png doesn't exist
            .svg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.svg doesn't exist
            .gif
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.gif doesn't exist
            .jpeg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.jpeg doesn't exist
            .jpg
              Field 'browser' doesn't contain a valid alias configuration
              ~/acme2/node_modules/@rails/activestorage.jpg doesn't exist
            as directory
              existing directory
                use ./app/assets/javascripts/activestorage.js from main in package.json
                  using description file: ~/acme2/node_modules/@rails/activestorage/package.json (relative path: .)
                    Field 'browser' doesn't contain a valid alias configuration
                    using description file: ~/acme2/node_modules/@rails/activestorage/package.json (relative path: ./app/assets/javascripts/activestorage.js)
                      no extension
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js doesn't exist
                      .erb
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.erb doesn't exist
                      .vue
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.vue doesn't exist
                      .mjs
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.mjs doesn't exist
                      .js
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.js doesn't exist
                      .sass
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.sass doesn't exist
                      .scss
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.scss doesn't exist
                      .css
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.css doesn't exist
                      .module.sass
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.sass doesn't exist
                      .module.scss
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.scss doesn't exist
                      .module.css
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.css doesn't exist
                      .png
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.png doesn't exist
                      .svg
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.svg doesn't exist
                      .gif
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.gif doesn't exist
                      .jpeg
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.jpeg doesn't exist
                      .jpg
                        Field 'browser' doesn't contain a valid alias configuration
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.jpg doesn't exist
                      as directory
                        ~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js doesn't exist
                using path: ~/acme2/node_modules/@rails/activestorage/index
                  using description file: ~/acme2/node_modules/@rails/activestorage/package.json (relative path: ./index)
                    no extension
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index doesn't exist
                    .erb
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.erb doesn't exist
                    .vue
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.vue doesn't exist
                    .mjs
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.mjs doesn't exist
                    .js
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.js doesn't exist
                    .sass
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.sass doesn't exist
                    .scss
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.scss doesn't exist
                    .css
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.css doesn't exist
                    .module.sass
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.module.sass doesn't exist
                    .module.scss
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.module.scss doesn't exist
                    .module.css
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.module.css doesn't exist
                    .png
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.png doesn't exist
                    .svg
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.svg doesn't exist
                    .gif
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.gif doesn't exist
                    .jpeg
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.jpeg doesn't exist
                    .jpg
                      Field 'browser' doesn't contain a valid alias configuration
                      ~/acme2/node_modules/@rails/activestorage/index.jpg doesn't exist
[~/acme2/app/javascript/@rails/activestorage]
[~/acme2/app/javascript/@rails/activestorage.erb]
[~/acme2/app/javascript/@rails/activestorage.vue]
[~/acme2/app/javascript/@rails/activestorage.mjs]
[~/acme2/app/javascript/@rails/activestorage.js]
[~/acme2/app/javascript/@rails/activestorage.sass]
[~/acme2/app/javascript/@rails/activestorage.scss]
[~/acme2/app/javascript/@rails/activestorage.css]
[~/acme2/app/javascript/@rails/activestorage.module.sass]
[~/acme2/app/javascript/@rails/activestorage.module.scss]
[~/acme2/app/javascript/@rails/activestorage.module.css]
[~/acme2/app/javascript/@rails/activestorage.png]
[~/acme2/app/javascript/@rails/activestorage.svg]
[~/acme2/app/javascript/@rails/activestorage.gif]
[~/acme2/app/javascript/@rails/activestorage.jpeg]
[~/acme2/app/javascript/@rails/activestorage.jpg]
[~/acme2/app/stylesheets/@rails/activestorage]
[~/acme2/app/stylesheets/@rails/activestorage.erb]
[~/acme2/app/stylesheets/@rails/activestorage.vue]
[~/acme2/app/stylesheets/@rails/activestorage.mjs]
[~/acme2/app/stylesheets/@rails/activestorage.js]
[~/acme2/app/stylesheets/@rails/activestorage.sass]
[~/acme2/app/stylesheets/@rails/activestorage.scss]
[~/acme2/app/stylesheets/@rails/activestorage.css]
[~/acme2/app/stylesheets/@rails/activestorage.module.sass]
[~/acme2/app/stylesheets/@rails/activestorage.module.scss]
[~/acme2/app/stylesheets/@rails/activestorage.module.css]
[~/acme2/app/stylesheets/@rails/activestorage.png]
[~/acme2/app/stylesheets/@rails/activestorage.svg]
[~/acme2/app/stylesheets/@rails/activestorage.gif]
[~/acme2/app/stylesheets/@rails/activestorage.jpeg]
[~/acme2/app/stylesheets/@rails/activestorage.jpg]
[~/acme2/app/images/@rails/activestorage]
[~/acme2/app/images/@rails/activestorage.erb]
[~/acme2/app/images/@rails/activestorage.vue]
[~/acme2/app/images/@rails/activestorage.mjs]
[~/acme2/app/images/@rails/activestorage.js]
[~/acme2/app/images/@rails/activestorage.sass]
[~/acme2/app/images/@rails/activestorage.scss]
[~/acme2/app/images/@rails/activestorage.css]
[~/acme2/app/images/@rails/activestorage.module.sass]
[~/acme2/app/images/@rails/activestorage.module.scss]
[~/acme2/app/images/@rails/activestorage.module.css]
[~/acme2/app/images/@rails/activestorage.png]
[~/acme2/app/images/@rails/activestorage.svg]
[~/acme2/app/images/@rails/activestorage.gif]
[~/acme2/app/images/@rails/activestorage.jpeg]
[~/acme2/app/images/@rails/activestorage.jpg]
[~/acme2/app/javascript/packs/node_modules]
[~/acme2/app/javascript/node_modules]
[~/acme2/app/node_modules]
[/Users/deepj/dev/cloudsystems/node_modules]
[/Users/deepj/dev/node_modules]
[/Users/deepj/node_modules]
[/Users/node_modules]
[/node_modules]
[~/acme2/node_modules/@rails/activestorage]
[~/acme2/node_modules/@rails/activestorage.erb]
[~/acme2/node_modules/@rails/activestorage.vue]
[~/acme2/node_modules/@rails/activestorage.mjs]
[~/acme2/node_modules/@rails/activestorage.js]
[~/acme2/node_modules/@rails/activestorage.sass]
[~/acme2/node_modules/@rails/activestorage.scss]
[~/acme2/node_modules/@rails/activestorage.css]
[~/acme2/node_modules/@rails/activestorage.module.sass]
[~/acme2/node_modules/@rails/activestorage.module.scss]
[~/acme2/node_modules/@rails/activestorage.module.css]
[~/acme2/node_modules/@rails/activestorage.png]
[~/acme2/node_modules/@rails/activestorage.svg]
[~/acme2/node_modules/@rails/activestorage.gif]
[~/acme2/node_modules/@rails/activestorage.jpeg]
[~/acme2/node_modules/@rails/activestorage.jpg]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.erb]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.vue]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.mjs]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.js]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.sass]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.scss]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.css]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.sass]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.scss]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.module.css]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.png]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.svg]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.gif]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.jpeg]
[~/acme2/node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js.jpg]
[~/acme2/node_modules/@rails/activestorage/index]
[~/acme2/node_modules/@rails/activestorage/index.erb]
[~/acme2/node_modules/@rails/activestorage/index.vue]
[~/acme2/node_modules/@rails/activestorage/index.mjs]
[~/acme2/node_modules/@rails/activestorage/index.js]
[~/acme2/node_modules/@rails/activestorage/index.sass]
[~/acme2/node_modules/@rails/activestorage/index.scss]
[~/acme2/node_modules/@rails/activestorage/index.css]
[~/acme2/node_modules/@rails/activestorage/index.module.sass]
[~/acme2/node_modules/@rails/activestorage/index.module.scss]
[~/acme2/node_modules/@rails/activestorage/index.module.css]
[~/acme2/node_modules/@rails/activestorage/index.png]
[~/acme2/node_modules/@rails/activestorage/index.svg]
[~/acme2/node_modules/@rails/activestorage/index.gif]
[~/acme2/node_modules/@rails/activestorage/index.jpeg]
[~/acme2/node_modules/@rails/activestorage/index.jpg]
ℹ ｢wdm｣: Failed to compile.

config/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: false

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/stylesheets', 'app/images']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: true

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .vue
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that versions and hashed value of the package contents in the project's package.json
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

staging:
  <<: *default
  compile: false
  extract_css: true
  cache_manifest: true

app/javascripts/application/js

// Load assets
import 'stylesheets/application.scss'
require.context('../images', true)

import Turbolinks from 'turbolinks'

require("@rails/activestorage").start()

import {} from 'jquery-ujs'
import {} from 'bootstrap'
import {} from 'select2'

Turbolinks.start()
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack')

const vue = require('./loaders/vue')
const jquery = require('./loaders/jquery')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('jquery', jquery)
environment.loaders.prepend('vue', vue)

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
});

module.exports = environment

package.json

{
  "name": "acme2",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/webpacker": "^4.0.7",
    "babel-plugin-prismjs": "^1.1.1",
    "bootstrap": "3.4.1",
    "clipboard": "^2.0.6",
    "core-js": "3",
    "expose-loader": "^0.7.5",
    "font-awesome": "^4.7.0",
    "jquery": "3.5.0",
    "jquery-ujs": "^1.2.2",
    "prismjs": "^1.17.1",
    "resolve-url-loader": "^3.1.1",
    "script-loader": "^0.7.2",
    "select2": "4.0.3",
    "select2-bootstrap-theme": "^0.1.0-beta.10",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "vue-turbolinks": "^2.0.4",
    "vue2-datepicker": "^2.9.1",
    "yarn": "^1.17.3"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }
}

Rails: 6.0.2.2 Ruby: 2.7.0 Webpacker: 5.0.1 Yarn: 1.22.4

deepj commented 4 years ago

The problem was in non-upgraded @rails/webpacker package to the latest

goulvench commented 3 years ago

Ran into the same issue today, upgrading @rails/webpacker didn't work but removing @rails/activestorage from package.json then adding it back again did the job, for no apparent reason.

yarn remove @rails/activestorage
yarn add @rails/activestorage
SufyanIqbal1622 commented 3 years ago

The problem was in non-upgraded @rails/webpacker package to the latest can you help please how you have fixed it

SufyanIqbal1622 commented 3 years ago

can you help please how you have fixed it