Bug: Cr(...).__exportStar is not a function

[bodinsamuel]

Environments:

• Prettier Version: 2.6.0
• Running Prettier via: Node.js API, Browser API
• Runtime: Node 16.14.0
• Operating System: macOS

Context

Since 2.6.0, it seems Prettier can not be bundled with webpack, it throws this error Received: "Cr(...).__exportStar is not a function" (not at compile time but usage time).
I saw there was a change to esbuild, might be that?

Steps to reproduce:

Hard to say at this point I'm just reporting as I found out.

import babel from 'prettier/parser-babel';
import prettier from 'prettier/standalone';

// Providing this plugin is required in order for prettier to use 'babel' as parser.
const prettierPlugins = [babel];

export function prettify(code: string): string {
  return prettier
    .format(code, { parser: 'babel', plugins: prettierPlugins })
    .trim();
}

• webpack.config.js

const path = require('path');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { ProvidePlugin } = require('webpack');

const resolvedExtensions = ['.js', '.jsx', '.ts', '.tsx'];

module.exports = function pack(env, options) {
  const mode = options.mode || 'development';
  const production = mode === 'production';

  // See what changes what here: https://webpack.js.org/configuration/devtool/#devtool
  let devtool = 'eval-cheap-module-source-map';
  if (production) {
    devtool = 'cheap-source-map';
  } else if (process.env.CI) {
    devtool = undefined;
  }

  return {
    target: 'web',
    mode,
    devtool,
    entry: {
      extractor: path.resolve(__dirname, 'src', 'extractor', 'index.ts'),
      converter: path.resolve(__dirname, 'src', 'converter', 'index.ts'),
    },
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].js',
      libraryTarget: 'umd',
      library: 'exported',
      globalObject: 'this',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    {
                      targets: {
                        browsers: ['last 2 versions'],
                      },
                    },
                  ],
                  [
                    '@babel/preset-typescript',
                    { isTSX: false, onlyRemoveTypeImports: true },
                  ],
                ],
                plugins: [
                  '@babel/plugin-proposal-object-rest-spread',
                  '@babel/plugin-proposal-class-properties',
                  '@babel/plugin-proposal-private-methods',
                  '@babel/plugin-proposal-private-property-in-object',
                  '@babel/plugin-proposal-optional-chaining',
                  '@babel/plugin-proposal-nullish-coalescing-operator',
                ],
                cacheDirectory: true,
                cacheCompression: false,
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: resolvedExtensions,
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      fallback: {
        buffer: 'buffer',
        path: 'path-browserify',
        process: 'process/browser',
        url: 'core-js/stable/url',
        util: 'util',
        fs: false,
        tls: false,
        net: false,
        zlib: false,
        http: false,
        https: false,
        stream: false,
        crypto: false,
      },
    },
    plugins: [
      new CleanWebpackPlugin(),
      new ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer'],
        URL: 'core-js/stable/url',
      }),
    ],
    optimization: {
      minimize: production,
      minimizer: [
        new TerserPlugin({
          parallel: true,
          terserOptions: {
            /* eslint-disable camelcase */
            keep_classnames: true,
            keep_fnames: true,
            /* eslint-enable camelcase */
          },
        }),
      ],
    },
    stats: {
      assets: true,
      assetsSort: 'size',
      builtAt: false,
      cached: false,
      cachedAssets: false,
      children: false,
      chunks: false,
      colors: true,
      entrypoints: false,
      hash: false,
      loggingTrace: true,
      modules: false,
      version: false,
    },
    performance: {
      maxEntrypointSize: 920000,
      maxAssetSize: 920000,
    },
  };
};


**Expected behavior:**

**Actual behavior:**

[fisker]

Can you try replace these two files from #12485, and see if it fixes you problem?

• https://deploy-preview-12485--prettier.netlify.app/lib/standalone.js
• https://deploy-preview-12485--prettier.netlify.app/lib/parser-babel.js

[chassteel]

@fisker I had the same issue

TypeError: s.__exportStar is not a function

Replacing those two files didn't make any difference. Reverting to version 2.5.1 worked fine.

[fisker]

It's fine, I can look into this later.

[fisker]

If you can simply webpack.config.js, that will be helpful.

[chassteel]

@fisker I take it you'd like me to post my webpack.config.js so here it is. I'm using CRA.

• webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

module.exports = {
  mode: 'development',
  entry: {
    theme: './src/assets/scss/theme.scss',
    user: './src/assets/scss/user.scss'
  },
  output: {
    path: path.resolve(__dirname, 'public/css')
  },
  plugins: [
    new FixStyleOnlyEntriesPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].min.css'
    }),
    new WebpackRTLPlugin({
      filename: '[name]-rtl.min.css',
      minify: true
    }),
    new CleanWebpackPlugin()
  ],
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              url: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

[alexander-akait]

@chassteel Do you consume commonjs version? Can you provide code how you do it?

[chassteel]

@alexander-akait Here's the import syntax:

import prettier from 'prettier/standalone'

Is that what you wanted?

[fisker]

I didn't notice you are not the one opens this issue.

[chassteel]

Sorry to jump in. I was trying to be helpful.

[bodinsamuel]

@fisker I will try tomorrow, thanks a lot for helping out 🙏🏻

[bodinsamuel]

@fisker Did not work entirely, I have a similar error but somewhere else: Nb.__exportStar is not a function maybe it's just an indirect import and since I haven't replaced them it's actually fixed.
Seems the correct direction at least ☺️

[fisker]

Can someone please try to replace standalone.js with this file https://deploy-preview-12506--prettier.netlify.app/lib/standalone.js?

[tiagoskaneta]

@fisker replacing standalone.js with the provided file (in #12493 (comment)) does fix the issue for me.

[recurser]

@fisker apologies for the delay - that file doesn't seem to fix the issue for me. See screenshot. The app is actually public if you want to try it out yourself.

[fisker]

@recurser Thanks for your feedback.

[fisker]

@recurser Which file did you try?

[recurser]

@fisker this one:

Can someone please try to replace standalone.js with this file https://deploy-preview-12506--prettier.netlify.app/lib/standalone.js?

It looks like something was caching though - if I blow away the entire repo, re-clone and rebuild, then your fix works 🎉 sorry for the confusion!

In case you want to reproduce it:

git clone git@github.com:recurser/string-is.git
cd string-is
git checkout dependabot/npm_and_yarn/prettier-2.6.0
yarn install
yarn build
yarn start
open http://localhost:3000

# Broken 👎

cd ../
rm -Rf string-is
git clone git@github.com:recurser/string-is.git
cd string-is
git checkout dependabot/npm_and_yarn/prettier-2.6.0
yarn install
curl https://deploy-preview-12506--prettier.netlify.app/lib/standalone.js -o node_modules/prettier/standalone.js
yarn build
yarn start
open http://localhost:3000

# Fixed 👍

[fisker]

@recurser Thank you! I've cloned the repo, was going to test..

[fisker]

I believe #12511 should fix your problems.

To test it, replace your node_modules/prettier/standalone.js with this file https://deploy-preview-12511--prettier.netlify.app/lib/standalone.js

Welcome to feedback.

[recurser]

To test it, replace your node_modules/prettier/standalone.js with this file https://deploy-preview-12511--prettier.netlify.app/lib/standalone.js

@fisker that works for me 🎉

[brianzinn]

will this fix be in 2.6.1?

edit: above standalone.js got my project building, but it was then failing at run-time:

TypeError: jr is not a function at eval (webpack-internal:///../../node_modules/prettier/parser-typescript.js:281:6111)

[bodinsamuel]

Amazing, thanks a lot for looking into it ❤️

[fisker]

@brianzinn I can't help without details.

[brianzinn]

@fisker that was just to indicate that more files may be needed. i brought in 'parser-typescript' from that netlify deploy and then it was working. May have been due to gatsby caching, but is currently working. Thanks for publishing the preview.

[sosukesuzuki]

I start to release 2.6.1. /cc @fisker

[fisker]

Sorry, didn't see this.

[sosukesuzuki]

Okay, my release script has been rejected by diff between local and remote. But no problem. I'll try to release again.

[sosukesuzuki]

done

[recurser]

@fisker I've upgraded to v2.6.1 and all works well - appreciate the quick work here! 👏