Sage9 replace buble with babel?

sage
1

Hi all,

I’ve recently had an issue with JS async/await and found out that the default transpiler for Sage9 (buble) does not support them Using async throws “unexpected token”
So I’m trying to switch to babel, but I don’t really know what I’m doing!

Here’s what I’ve tried:

yarn add babel-loader -dev followed by yarn-add @babel/core -dev
In my webpack.config.js from line 53 I have:

{
        test: /\.js$/,
        exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites))/],
        use: [
          { loader: 'cache' },
          {
            loader: 'babel-loader',
            options: {
              objectAssign: 'Object.assign',
              transforms: {
                modules: false,
                dangerousForOf: true,
              },
            },
          },
        ],
      },

Then I go yarn build and I get:

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                       2:25:17 PM

Module build failed: TypeError: this.getOptions is not a function
    at Object.loader (/Users/kevinpriceward/Sites/4x4tyres/public_html/app/themes/4x4tyres/node_modules/babel-loader/lib/index.js:46:28)
    at Object.<anonymous> (/Users/kevinpriceward/Sites/4x4tyres/public_html/app/themes/4x4tyres/node_modules/babel-loader/lib/index.js:41:12)

Module build failed: TypeError: this.getOptions is not a function
    at Object.loader (/Users/kevinpriceward/Sites/4x4tyres/public_html/app/themes/4x4tyres/node_modules/babel-loader/lib/index.js:46:28)
    at Object.<anonymous> (/Users/kevinpriceward/Sites/4x4tyres/public_html/app/themes/4x4tyres/node_modules/babel-loader/lib/index.js:41:12)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

What am I doing wrong?

2

Hi,

I have an ongoing issue where I need to allow async/await functions through, but the buble transpiler does not allow them.

I have found a branch on github that seems to do the trick on this - Correctly pass-through async class methods · bublejs/buble@584082a · GitHub but I am unsure if this will work, or how to switch to this branch in my package.json file.

Can anyone offer any advice here?

Thanks

3

I integrate Babel into Sage 9 a long time ago (to compile Gutenberg Blocks) Not sure about what I did to make it actually works. I checked package.json, these are packages I installed into devDep

    "@babel/core": "^7.11.4",
    "@wordpress/babel-preset-default": "^4.17.0",
    "@wordpress/block-editor": "^4.3.6",
    "@wordpress/blocks": "^6.20.3",
    "@wordpress/components": "^10.0.5",
    "@wordpress/compose": "^3.19.3",
    "@wordpress/element": "^2.16.0",
    "@wordpress/eslint-plugin": "^7.1.0",
    "@wordpress/hooks": "^2.9.0",
    "@wordpress/i18n": "^3.14.0",
    "@wordpress/scripts": "^12.1.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.3.0",
    "babel-loader": "^8.1.0",

and here is my added configuration

      {
        test: /\.js$/,
        exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites))/],
        use: [
          { loader: 'cache' },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@wordpress/default'],
            },
          },
        ],
      },

not sure if this would help