Cannot run public demo in nrwl nx

Stupidism

9 months ago

1 3

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

nx run seo-payload:serve

/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)

• Selected Answer
  

  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: [
      [
        '@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,
                  },
                ],
              },
            ],
          },
        });
      },
  

• 

  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
  

  Stupidism

  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

  

  jmikrut

  Payload Team

  9 months ago

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

  

  Stupidism

  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.

  

  Stupidism

  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