Won't compile with webpacker

[danigirl329]

I'm working through updating webpacker and receiving this error when trying to compile my assets:

ERROR in ./node_modules/tiny-timer/dist/tiny-timer.mjs 124:2-14
Can't import the named export 'EventEmitter' from non EcmaScript module (only default export is available)
 @ ./app/javascript/controllers/cart_timer_controller.js
 @ ./app/javascript/controllers sync \.js$
 @ ./app/javascript/packs/application.js

I am using the rails/webpacker yarn dependency and the webpacker rails gem. Any help in resolving this issue would be really great - thanks!

[mathiasvr]

Hello, I’m not sure so just guessing but can you try to add .mjs resolution to you webpack config, might look something like this:

resolve: {
    extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']
}

[danigirl329]

Thanks for your response! Since I'm using the webpacker rails gem, it's an issue with my config.

I added this to my config/webpack/environment.js file for anyone else who stumbles upon this issue:

const nodeModules = environment.loaders.get('nodeModules')
nodeModules.type = "javascript/auto"

[janosrusiczki]

3 years later, I had the same type of issue while trying to add Pinia to Vue 2.7 running on Rails 6. Searching around, first I found a solution mentioning vue.config.js, then I found and article saying that in Rails what is done by vue.config.js is actually done by webpacker, so I googled webpacker mjs and happened upon this issue. Applying your suggestion @danigirl329 fixed my issue. Thanks! 🙂