Module parse failed: Unexpected token (11:9)

[arunkumaralagesan]

Describe the bug
Getting Module parse failed: Unexpected token during yarn build

import { format } from 'sql-formatter';

    Module parse failed: Unexpected token (11:9)
    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
    | /** Formats a generic SQL expression */
    | export default class ExpressionFormatter {
    >   inline = false;
    |   nodes = [];
    |   index = -1;
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js 6:0-59 40:23-42
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/formatter/Indentation.js 14:14
    Module parse failed: Unexpected token (14:14)
    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 Indentation {
    >   indentTypes = [];
    |   /**
    |    * @param {string} indent A string to indent with
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js 8:0-43 44:29-40
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/formatter/Layout.js 24:8
    Module parse failed: Unexpected token (24:8)
    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 Layout {
    >   items = [];
    |
    |   constructor(indentation) {
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js 7:0-41 44:18-24 49:17-19 51:17-19
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/lexer/Tokenizer.js 28:53
    Module parse failed: Unexpected token (28:53)
    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
    |     }, {
    |       type: TokenType.LINE_COMMENT,
    >       regex: regex.lineComment(cfg.lineCommentTypes ?? ['--'])
    |     }, {
    |       type: TokenType.QUOTED_IDENTIFIER,
     @ ./node_modules/sql-formatter/lib/dialect.js 1:0-45 21:17-26
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/formatter/formatAliasPositions.js 61:98
    Module parse failed: Unexpected token (61:98)
    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
    |         as,
    |         alias
    >       }) => precedingText + (alias ? ' '.repeat(aliasMaxLength - precedingText.length + 1) + (as ?? '') + alias : ''));
    |       newQuery = [...newQuery, ...aliasLines];
    |     }
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js 5:0-61 59:14-34
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/parser/LexerAdapter.js 6:8
    Module parse failed: Unexpected token (6:8)
    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 LexerAdapter {
    >   index = 0;
    |   tokens = [];
    |   input = '';
     @ ./node_modules/sql-formatter/lib/parser/createParser.js 4:0-45 16:20-32
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

    ERROR in ./node_modules/sql-formatter/lib/formatter/formatCommaPositions.js 74:38
    Module parse failed: Unexpected token (74:38)
    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
    |   const [, code, comment] = line.match(/^(.*?),(\s*--.*)?$/) || [];
    |   const spaces = ' '.repeat(commaPosition - code.length);
    >   return `${code}${spaces},${comment ?? ''}`;
    | }
    |
     @ ./node_modules/sql-formatter/lib/formatter/Formatter.js 4:0-61 63:14-34
     @ ./node_modules/sql-formatter/lib/sqlFormatter.js
     @ ./node_modules/sql-formatter/lib/index.js
     @ ./src/components/QueryEditor/QueryEditor.jsx
     @ ./src/TabularAppContainer/TabularAppContainer.js
     @ ./src/index.js

my webpack config as follows

  { test: /\.ts$/, use: 'ts-loader' },
  {
    test: /\.js$|jsx/,
    use: ['babel-loader', 'source-map-loader'],
    exclude: /node_modules/,
  },
  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  {
    test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
    use: 'url-loader?limit=100000',
  },
];```

please let me know, if any thoughts on this, and any more info is needed from my end. TIA!

[nene]

You need support for class-properties syntax in Babel. This should be included by default if you're using @babel/preset-env. If not, you'll need to include that support explicitly.

See also: #536 #502

[arunkumaralagesan]

Thanks for the reply. But ideally the package should be compiled into < es6 versions, as like any other package?

sql-formatter-plus This is one such wrapper that is compiled into <ES6 version. The issue is, it does not support all params. Thanks!

[nene]

sql-formatter package is actually compiled to ES5, but it is also compiled as an ECMAScript module. If you really want to use the ES5-version, perhaps there's a way to configure Webpack to prefer that over the ECMAScript module.

The ECMAScript modules are built targeting Node.js 14, which is really a pretty old version of Node.js. The class instance fields (the syntax of which is causing a problem to you) are supported in all major browsers (except the old IE).