Uncaught SyntaxError: Cannot use import statement outside a module

[afdev82]

Hello,

I am trying to run my JS code that runs in the browser also server side inside rspec tests using mini_racer.
I have a Ruby on Rails project, using shakapacker and webpack to handle that specific JS code of the website and in the browser is working fine.
I am initializing all the files I need loading them in the context, something like:

    ctx = MiniRacer::Context.new
    path = Rails.root.join('app', 'javascript')
    ctx.load(path.join('code.js'))

I have a syntax error with some files, where on the top I use the import statement to load some images:

import image_path from 'path/to/image.svg';

If I run the JS code inside an rspec test I get the following error:

RuntimeError:
        Uncaught SyntaxError: Cannot use import statement outside a module at undefined:3:0

...

# ./app/helpers/js_helper.rb:69:in `rescue in initialize_js'
      # ./app/helpers/js_helper.rb:8:in `initialize_js'
      # ./spec/models/configurations/configuration_design_glass_onwall_spec.rb:11:in `block (3 levels) in <top (required)>'
      # ------------------
      # --- Caused by: ---
      # MiniRacer::ParseError:
      #   Uncaught SyntaxError: Cannot use import statement outside a module at undefined:3:0
      #   ./app/helpers/js_helper.rb:43:in `block (2 levels) in initialize_js'

Does anyone have some idea how to solve this?
Many thanks for your help.

[afdev82]

I have searched a bit and I have found that probably is NodeJS that needs some configuration.
I have added a "package.json" file with the content as specified here, but I am still getting the syntax error.
I have also tried to use "require" instead of import, but I get another syntax error:

const image_path = require('path/to/image.svg');

      # MiniRacer::RuntimeError:
      #   ReferenceError: require is not defined
      #   JavaScript at <anonymous>:3:32

[tisba]

I think the error is misleading: Currently, mini_racer does not support ES6 modules and import statement for that matter.

See #126 or #143

Keep in mind, mini_racer is not NodeJS, it uses the same JavaScript engine (V8), but adds very little on top of it.

[afdev82]

Thank you for the reply.
I have read also the linked issues.
It seems that the best solution would be to use the compiled files instead of the sources to mini_racer (exactly like in the browser).
It would even better than now, because I require all the source files in one place (webpack).

[afdev82]

I was able to find the path to the specific bundle made with shakapacker/webpack for my tests.
Anyway now I am getting an error that I cannot solve if I try to load it:

ctx = MiniRacer::Context.new
ctx.load(Rails.root.join('public' + asset_pack_path('configurator_ssr.js')))

It's very difficult to find the source of the error:

rescue in initialize_js': ReferenceError: self is not defined (RuntimeError)
["JavaScript at <anonymous>:1:1", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:228:in `eval_unsafe'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:228:in `block (2 levels) in eval'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:348:in `timeout'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:227:in `block in eval'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:225:in `synchronize'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:225:in `eval'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/mini_racer-0.12.0/lib/mini_racer.rb:194:in `load'", "/Users/antonio.facciolo/Projects/adNotam/website/app/helpers/js_helper.rb:11:in `initialize_js'", "(irb):5:in `<main>'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb/workspace.rb:117:in `eval'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb/workspace.rb:117:in `evaluate'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb/context.rb:566:in `evaluate'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1023:in `block (2 levels) in eval_input'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1335:in `signal_status'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1016:in `block in eval_input'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1098:in `block in each_top_level_statement'", "<internal:kernel>:187:in `loop'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1093:in `each_top_level_statement'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1015:in `eval_input'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1002:in `block in run'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1001:in `catch'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:1001:in `run'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/irb.rb:903:in `start'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/commands/console/console_command.rb:70:in `start'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/commands/console/console_command.rb:19:in `start'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/commands/console/console_command.rb:102:in `perform'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/thor-1.3.1/lib/thor/command.rb:28:in `run'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/thor-1.3.1/lib/thor/invocation.rb:127:in `invoke_command'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/thor-1.3.1/lib/thor.rb:527:in `dispatch'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/command/base.rb:69:in `perform'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/command.rb:48:in `invoke'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/railties-6.1.7.7/lib/rails/commands.rb:18:in `<main>'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/bundled_gems.rb:74:in `require'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/bundled_gems.rb:74:in `block (2 levels) in replace_require'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/bootsnap-1.18.3/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:30:in `require'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/zeitwerk-2.6.13/lib/zeitwerk/kernel.rb:34:in `require'", "/Users/antonio.facciolo/Projects/adNotam/website/bin/rails:5:in `<main>'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/commands/rails.rb:6:in `load'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/commands/rails.rb:6:in `call'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/command_wrapper.rb:38:in `call'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/application.rb:226:in `block in serve'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:10:in `block in fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:10:in `block in fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:8:in `fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:8:in `fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:27:in `fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:8:in `fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/activesupport-6.1.7.7/lib/active_support/fork_tracker.rb:27:in `fork'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/application.rb:190:in `serve'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/application.rb:153:in `block in run'", "<internal:kernel>:187:in `loop'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/application.rb:147:in `run'", "/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/gems/3.3.0/gems/spring-4.2.1/lib/spring/application/boot.rb:25:in `<top (required)>'", "<internal:/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require'", "<internal:/Users/antonio.facciolo/.rbenv/versions/3.3.1/lib/ruby/3.3.0/rubygems/core_ext/kernel_require.rb>:136:in `require'", "-e:1:in `<main>'"]
JavaScript at <anonymous>:1:1: ReferenceError: self is not defined (MiniRacer::RuntimeError)

And there is no "self" in my javascript files.
Could someone help me with that? Many thanks.

[afdev82]

It turned out that it was a configuration needed for webpack, in order to run it server side.

shakacode/shakapacker#471 (comment)