Cannot run public demo in nrwl nx

[Stupidism]

I know this is not the first question about nrwl nx.

Thanks to this thread: #545, I figured out how to run the start project of payloadcms in NX monorepo. And this is the working repo: https://github.com/Stupidism/seo-mono.

However, when I tried to move the public-demo into my new repo, I met many new errors, I tried to fix them

• ts errors
• scss import error
• Unexpected token export

I cannot pass the third one and It's weird that only this ts file payload/components/forms.ts is throwing error.

I guess I'm making a very stupid mistake. I tried the following search words but got no luck for now.

• webpack how to parse export in node_modules,
• webpack SyntaxError: Unexpected token 'export'

To reproduce

Just clone this repo and switch to the new branch:

git clone git@github.com:Stupidism/seo-mono.git
pnpm i

And then run the project:

nx run seo-payload:serve

You will see this error:

/Users/.../.pnpm/payload@0.17.2_zxu4lunrffi22uinww7slmpxf4/node_modules/payload/components/forms.ts:1
export {
^^^^^^

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module._compile (/Users/stupidism/Documents/seo-mono/node_modules/.pnpm/pirates@4.0.5/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.newLoader [as .ts] (/Users/stupidism/Documents/seo-mono/node_modules/.pnpm/pirates@4.0.5/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)

Thanks in advance, this is the first key step for us to migrate from contentful to payloadCMS.

[jmikrut]

Hey @Stupidism — I just followed your reproduction steps and everything worked exactly as expected for me. Opened up in browser and everything.

Payload's webpack config should deliver you everything you need to parse export automatically.

Generally, when we see unexpected token 'export' there is something with your Babel configuration that is incorrect. Try and completely remove your node_modules folder and delete any lock files. Then reinstall dependencies.

[Stupidism]

Hi @jmikrut, just double confirm did u skipped this branch checkout step?

git checkout feng/copy-public-demo-and-run

PS: As u said about the the babel issue, I'm trying to set the babel path for in payload config. because the babel file path in nx is not in to root directory of the project

[jmikrut]

No, I checked out the branch and it worked perfectly actually!

[Stupidism]

But I still see this error and asked my colleague to try and he got the same error as well. Really weired.

[Stupidism]

Is it possible that it's related to system environment? Can u run nx report to verify the environment? mine is:

nx report

   Node : 16.15.1
   OS   : darwin x64
   pnpm : 7.1.9

   nx : 14.1.9
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.9
   @nrwl/detox : Not Found
   @nrwl/devkit : Not Found
   @nrwl/eslint-plugin-nx : 14.1.9
   @nrwl/express : 14.1.9
   @nrwl/jest : 14.1.9
   @nrwl/js : Not Found
   @nrwl/linter : 14.1.9
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.1.9
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.1.9
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : 14.1.9
   @nrwl/workspace : 14.1.9
   typescript : 4.6.4

[Stupidism]

Turned out it's related to pnpm. Detailed explanation in this thread: #665

[Stupidism]

It might need a configuration in payload.admin.webpack to modify the babel config. My solution now is:

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: 'commonjs',
        targets: {
          node: "current",
        },
      },
    ],
    '@babel/preset-typescript',
    '@babel/preset-react',
  ],
};

import { buildConfig } from 'payload/config';
import _ from 'lodash';

import babelConfig from '../babel.config';

import { Articles } from './collections/Articles';
import { Authors } from './collections/Authors';
	@@ -7,14 +10,42 @@ import { ColdArticles } from './collections/ColdArticles';
import { Media } from './collections/Media';
import { Users } from './collections/Users';
import { environment } from './environments/environment';
import { ContextField } from './collections/CoontextField';

export default buildConfig({
  serverURL: environment.payload.serverUrl,
  admin: {
    // the user collection slug to use for authenticating to the admin panel, one per express app
    user: Users.slug,
    webpack: (config) => {
      return _.merge({}, config, {
        module: {
          rules: [
            {
              // Override the babel loader
              // test: /\.(t|j)sx?$/,
              // exclude: /node_modules[\\/](?!(@payloadcms[\\/]payload)[\\/]).*/,
              use: [
                {
                  // loader: 'babel-loader',
                  options: babelConfig,
                },
              ],
            },
          ],
        },
      });
    },