Cannot run public demo in nrwl nx

default discord avatar
Stupidism
last year
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: 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.

  • default discord avatar
    Stupidism
    last year

    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,
                    },
                  ],
                },
              ],
            },
          });
        },
    
  • discord user avatar
    jmikrut
    Payload Team
    last year

    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
    default discord avatar
    Stupidism
    last year

    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

    discord user avatar
    jmikrut
    Payload Team
    last year

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

    default discord avatar
    Stupidism
    last year

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

    default discord avatar
    Stupidism
    last year

    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
    
  • default discord avatar
    Stupidism
    last year

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

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.