Problems with configuration::: jquery.js:10364 Uncaught Error: Module build failed: SyntaxError: Unexpected token (67:17)

[oscarlaf03]

Issue

Hi I've trying to configure my webpacker correctly in order to make use of attributes inside my instance classes as inputs for functions I am calculating on my javacripts But It seems I can't get the configuration right.

What are your thoughts?

Error message

I am getting a syntax error for <%=

jquery.js:10364 Uncaught Error: Module build failed: SyntaxError: Unexpected token (67:17)

  65 |   let input = document.getElementById('encrypt');
  66 |   // let pubKeyInput =  document.getElementById('public-key').value;
> 67 |   const pubKey = <%= @tour_store.public_key %>;
     |                  ^
  68 |     MoipCreditCard
  69 |     .setEncrypter(jsencrypt, 'ionic')
  70 |     .setPubKey(pubKey)

    at Object.defineProperty.value (jquery.js:10364)
    at __webpack_require__ (bootstrap d2c7880ac0bfa1303ab6:19)
    at Object.<anonymous> (application.js:1)
    at Object.<anonymous> (application.js:20)
    at __webpack_require__ (bootstrap d2c7880ac0bfa1303ab6:19)
    at bootstrap d2c7880ac0bfa1303ab6:62
    at bootstrap d2c7880ac0bfa1303ab6:62
Object.defineProperty.value @ jquery.js:10364
__webpack_require__ @ bootstrap d2c7880ac0bfa1303ab6:19
(anonymous) @ application.js:1
(anonymous) @ application.js:20
__webpack_require__ @ bootstrap d2c7880ac0bfa1303ab6:19
(anonymous) @ bootstrap d2c7880ac0bfa1303ab6:62
(anonymous) @ bootstrap d2c7880ac0bfa1303ab6:62

My settings

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.config.merge({
  module: {
    rules: [
     {
        test: /\.erb$/,
        enforce: 'pre',
        loader: 'rails-erb-loader',
        options: {
          runner: '../bin/rails runner',
          dependenciesRoot: '../app',
        }
      },

    ]
  }
});

// Bootstrap 3 has a dependency over jQuery:
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

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_output_path: packs
  cache_path: tmp/cache/webpacker

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

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

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

development:
  <<: *default
  compile: 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

  # Cache manifest.json for performance
  cache_manifest: true

[rhys-vdw]

The file ends in .js, but the test is for files that end in .erb. Rename the file to jquery.js.erb.

[rhys-vdw]

Closing this for now, we can reopen if there's any other confusion.

[oscarlaf03]

Hi @rhys-vdw thanks a for your answer. I tried to follow your recommendation but i don't have any 'jquery.js' file and the file from where I am causing the error already has the file extension *.js.erb

What are your thoughts?

app/javascript/components/moip.js.erb

// # [...]
let keyFromActiveRecord = <%= @tour_store.public_key %> ;
export {keyFromActiveRecord};

app/javascript/components/packs/application.js

import { keyFromActiveRecord } from '../components/moip';
console.log(keyFromActiveRecord);

[rhys-vdw]

This seems like an issue with the webpacker config. Perhaps try there.

Btw, once you solve the build error you'll probably get an error because the ERB scope doesn't include the field you're referencing.

[rhys-vdw]

Oh @oscarlaf03, just a thought...

Is it possible that you should add quotes? Perhaps you're getting some invalid output like:

let keyFromActiveRecord = <%= JSON.generate(@tour_store.public_key) %>;
export {keyFromActiveRecord};