craftedbygc / taxi

Taxi is a 🤏 small and 🐊 snappy js library for adding slick PJAX navigation and beautiful transitions to your website.
https://taxi.js.org
569 stars 11 forks source link

[Help] How to upgrade from Highway to Taxi #11

Closed ArmandoAmador closed 1 year ago

ArmandoAmador commented 1 year ago

Describe the bug Currently trying to upgrade from Highway to Taxi and having a hard time getting passed this error. Any tips or loaders you recommend?

I already have a plugin-proposal-class-properties plugin installed, so I'm stuck on which loader I need in order to proceed.

ERROR in ./node_modules/@unseenco/taxi/src/Core.js 21:17
Module parse failed: Unexpected token (21: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 Core {
>   isTransitioning = false
|
|   /**
 @ ./node_modules/@unseenco/taxi/src/taxi.js 1:0-25 5:0-9:1
 @ ./web/src/scripts/index.js
jakewhiteley commented 1 year ago

Hi @ArmandoAmador.

So as a rule, Babel doesn't process node_modules at all. You can make it process individual packages if you want but that's probably not the best solution here.

What node.js version are you running? I suspect it's an older one which hadnt added class property support yet.

Another solution would be to include one of the Taxi versions from the dist folder instead of the default export of the package.


It is also worth noting, that @babel/preset-env includes plugin-proposal-class-properties by default these days, so you might not even need it at all in your setup :)

ArmandoAmador commented 1 year ago

Hi @jakewhiteley,

Thank you for the speedy response 🤗

I'm using node version 16.19.0

Another solution would be to include one of the Taxi versions from the dist folder instead of the default export of the package.

Any guide you can direct me to?

It is also worth noting, that @babel/preset-env includes plugin-proposal-class-properties by default these days, so you might not even need it at all in your setup :)

This is good to know, I've been slowly upgrading the repo that I'm working on to start using more up to date dependencies. Hence wanting to upgrade Highway to Taxi :-)

jakewhiteley commented 1 year ago

Updating webpack to at least 5.35.1 should fix it.

Otherwise this is the normal approach, but if you use Laravel mix, then laravel-mix-transpile-node-modules will help.

You can import one of the dist versions just like (there are a few versions to try in that folder): import { Core } from '@unseenco/taxi/dist/taxi'

ArmandoAmador commented 1 year ago

@jakewhiteley Thank you so much for the help. Upgrading to webpack did the trick.

Now I just have to see why webpack is breaking my netlify build 😅