Like what we’re doing? Star us on GitHub!

Cannot run public demo in nrwl nx

9 months ago
1 3

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:

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
pnpm i

And then run the project:

nx run seo-payload:serve

You will see this error:

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.

  • Stupidism
    8 months ago

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

    // babel.config.js
    module.exports = {
      presets: [
            modules: 'commonjs',
            targets: {
              node: "current",
    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,
  • jmikrut
    Payload Team
    9 months ago

    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.

    4 replies
    9 months ago

    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

    Payload Team
    9 months ago

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

    9 months ago

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

    9 months ago

    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
    9 months ago

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

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More