Error Unexpected token after import stimulus-autocomplete

[xama]

Hello,

I have this error once I import stimulus-autocomplete :

Module parse failed: Unexpected token (7:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export default class Autocomplete extends Controller {
>   static targets = ["input", "hidden", "results"]
|   static classes = ["selected"]
|   static values = {

thank you for your help

[afcapel]

@xama it seems there's a problem with your webpack configuration. What version of webpack are you using?

[jznadams]

I'm having the same issue and I'm on rails 5.2.6.2 with Webpack 4.44.2

[glaszig]

same here. rails 7.0.3.1, shakapacker 6.5.0, webpack 5.73.0.

[glaszig]

i figured it out for me.

setup:

• rails 7.0.3.1
• shakapacker 6.5.0
• webpack 5.73.0

i inspected the shakapacker-provided rule for js files by putting this in config/webpack/webpack.config.js:

const { webpackConfig, merge } = require('shakapacker')

const jsRule = webpackConfig.module.rules.find(rule => rule.test.test('.js'));

const { exclude, include } = jsRule
console.log({exclude, include})
process.exit()

which resulted in

{
  exclude: /node_modules/,
  include: [ '[...]/app/javascript' ]
}

i then fiddled around by adding /stimulus-autocomplete/ or require.resolve('stimulus-autocomplete') to the include array. i also tried the exclude pattern that the package are-you-es5 gives you. all to no avail.

then it appeared to me that exclude and include might be mutually exclusive. so i extended both options like this:

const { webpackConfig, merge } = require('shakapacker')

const jsRule = webpackConfig.module.rules.find(rule => rule.test.test('.js'));

const transpilePackages = [ /stimulus-autocomplete/ ]

jsRule.include = [
  ...jsRule.include,
  ...transpilePackages
]
jsRule.exclude = {
  and: [ jsRule.exclude ],
  not: transpilePackages
}

e voila. webpack transpiled the specified node packages (according to my babel/browserslist config).

[em77]

Using babel with webpacker and rails 6, we had code in the environment.js file setting options for babel and we've been excluding everything in node_modules until now and the following code was need to ensure stimulus-autocomplete is transpiled with babel during asset compilation. This is basically telling babel to exclude everything in node_modules except for stimulus-autocomplete.

environment.loaders.append(
  'babel',
  {
    test: /\.js(\.erb)?$/,
    exclude: /node_modules\/(?!(stimulus-autocomplete))/,
    loader: 'babel-loader'
  }
)

I'd like to know though why this is necessary. Is it because there is not an es4-compatible minified version of the code provided in the package? If this is the case, why not? It seems odd that special configuration would be needed only for this package. I'm sure there are probably a few other packages out there that require this, but I've never encountered any until now.

[glaszig]

I'd like to know though why this is necessary. Is it because there is not an es4-compatible minified version of the code provided in the package?

this package ships only modern js code (es6 if i'm not mistaken). most transpiler configurations exclude anything in node_modules because there is no way of knowing if a module actually needs transpiling or not. this assumption also reduces build times by a lot. so it's our job to configure.

If this is the case, why not?

i assume to reduce maintenance work and since everybody who needs older js output can run it through their transpiler...

It seems odd that special configuration would be needed only for this package.

you're gonna need this for other packages as well. i have a bunch of special cases that i use with my example config above.

see the package are-you-es5...

I'm sure there are probably a few other packages out there that require this, but I've never encountered any until now.

yes, there are.

until recently, the world basically ran on es5 or sth even older. now, ie 11 is officially dead and we like to ditch old things so maintainers are moving forward.