nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
22.96k stars 2.3k forks source link

Module parse failed: Unexpected token (24:7) #16516

Closed simonpeters closed 1 year ago

simonpeters commented 1 year ago

Current Behavior

when running nx serve or nx build on any project that relies on a nx lib package I get the same error.

Module parse failed: Unexpected token (24:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Expected Behavior

for the build or serve to work

GitHub Repo

No response

Steps to Reproduce

I have no idea what of my project is causing this issue so its hard to reproduce.

If created new a nx lib and a new nx next project and pasted my old in it to see if it was any boilerplate code but I still have same issues. The issue came up after updating nx but I cannot seem to revert it anymore.

my package.json

{
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@emotion/babel-plugin": "11.10.6",
    "@nrwl/cli": "15.9.2",
    "@nrwl/cypress": "15.9.2",
    "@nrwl/eslint-plugin-nx": "15.9.2",
    "@nrwl/jest": "15.9.2",
    "@nrwl/js": "15.9.2",
    "@nrwl/linter": "15.9.2",
    "@nrwl/next": "^15.9.2",
    "@nrwl/nx-cloud": "16.0.2",
    "@nrwl/react": "15.9.2",
    "@nrwl/web": "15.9.2",
    "@nrwl/workspace": "15.9.2",
    "@rollup/plugin-url": "^7.0.0",
    "@svgr/rollup": "^6.1.2",
    "@swc/core": "^1.2.173",
    "@swc/jest": "0.2.20",
    "@testing-library/react": "14.0.0",
    "@types/jest": "29.4.4",
    "@types/lodash.get": "^4.4.7",
    "@types/node": "18.14.2",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@types/react-is": "17.0.3",
    "@types/styled-components": "5.1.26",
    "@typescript-eslint/eslint-plugin": "5.41.0",
    "@typescript-eslint/parser": "5.41.0",
    "babel-jest": "29.4.3",
    "babel-plugin-styled-components": "1.10.7",
    "cypress": "^12.2.0",
    "eslint": "~8.15.0",
    "eslint-config-next": "13.1.1",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "29.4.3",
    "jest-environment-jsdom": "29.4.3",
    "nx": "15.9.2",
    "prettier": "^2.6.2",
    "react-test-renderer": "18.2.0",
    "ts-jest": "29.0.5",
    "ts-node": "10.9.1",
    "typescript": "4.9.5"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.0.11",
    "@chakra-ui/react": "^2.3.5",
    "@clerk/localizations": "^1.11.3",
    "@clerk/nextjs": "^4.11.10",
    "@emotion/react": "11.10.6",
    "@emotion/server": "11.10.0",
    "@emotion/styled": "11.10.6",
    "@faire/mjml-react": "^3.2.0",
    "@hookform/error-message": "^2.0.0",
    "@mailchimp/mailchimp_marketing": "^3.0.78",
    "@react-hook/window-scroll": "^1.3.0",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/ui": "^1.0.1",
    "@sanity/webhook": "^2.0.0",
    "@supabase/auth-helpers-nextjs": "^0.5.6",
    "@supabase/supabase-js": "^2.11.0",
    "@types/nodemailer": "^6.4.7",
    "@vercel/analytics": "^0.1.3",
    "canvas-confetti": "^1.6.0",
    "core-js": "^3.6.5",
    "firebase": "^9.10.0",
    "framer-motion": "^6.5.1",
    "html-to-text": "^9.0.5",
    "lodash.get": "^4.4.2",
    "lottie-react": "^2.3.1",
    "mailgun-js": "^0.22.0",
    "mjml": "^4.13.0",
    "mjml-browser": "^4.13.0",
    "next": "13.2.4",
    "next-plausible": "^3.2.0",
    "next-sanity": "^3.1.2",
    "next-sanity-image": "^5.0.0",
    "next-seo": "^5.8.0",
    "next-sitemap": "^3.1.52",
    "nodemailer": "^6.9.1",
    "nodemailer-mailgun-transport": "^2.1.5",
    "nuka-carousel": "^5.4.1",
    "openai": "^3.2.1",
    "openai-streams": "^4.2.0",
    "prop-types": "^15.8.1",
    "puppeteer": "^19.10.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-firebase-hooks": "^5.0.3",
    "react-hook-form": "^7.34.0",
    "react-icons": "^4.4.0",
    "react-is": "18.2.0",
    "react-scroll": "^1.8.7",
    "react-web-share": "^2.0.2",
    "react-webcam": "^7.0.1",
    "regenerator-runtime": "0.13.7",
    "sanity": "^3.0.6",
    "sanity-plugin-iframe-pane": "^2.1.1",
    "sanity-plugin-media": "^2.0.2",
    "sass": "^1.62.0",
    "seeuletter": "^1.5.2",
    "sharp": "^0.31.1",
    "styled-components": "5.3.6",
    "ts-mailgun": "^0.5.1",
    "tslib": "^2.3.0",
    "use-sound": "^4.0.1"
  },
  "workspaces": [
    "packages/*"
  ]
}

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.19.0
   OS   : darwin arm64
   npm  : 8.19.3

   nx (global)             : 15.9.2
   nx                      : 15.9.2
   @nrwl/js                : 15.9.2
   @nrwl/jest              : 15.9.2
   @nrwl/linter            : 15.9.2
   @nrwl/workspace         : 15.9.2
   @nrwl/cli               : 15.9.2
   @nrwl/cypress           : 15.9.2
   @nrwl/devkit            : 15.9.2
   @nrwl/eslint-plugin-nx  : 15.9.2
   @nrwl/next              : 15.9.2
   @nrwl/react             : 15.9.2
   @nrwl/tao               : 15.9.2
   @nrwl/web               : 15.9.2
   @nrwl/nx-cloud          : 16.0.2
   typescript              : 4.9.5

Failure Logs

No response

Additional Information

No response

jaysoo commented 1 year ago

I think this is due to the configuration being updated for 15.9. Previously withNx returned the configuration object, but now it returns a function. This is fine if you just exported with module.exports = withNx(config), but if you add other Next.js plugins you will need to do it like this:

// next.config.js

// ...

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  // ...
};

const plugins = [
  // Your plugins exlcuding withNx
];

module.exports = async (phase, context) => {
  let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig);

  // Apply the async function that `withNx` returns.
  updatedConfig = await withNx(updatedConfig)(phase, context);

  // If you have plugins that has to be added after Nx you can do that here.
  // For example, Sentry needs to be added last.
  updatedConfig = require('@sentry/nextjs')(updatedConfig, { silent: true });

  return updatedConfig;
};

See here for more details:

https://nx.dev/packages/next/documents/next-config-setup#manually-composing-plugins-(nx-15-and-prior)

For Nx 16, we are providing a composePlugins function that will allow the composition to be done correctly.

jaysoo commented 1 year ago

Closing this issue as it should be addressed. If my assumption is not correct, please re-open and provide a reproduction repo to demonstrate what is broken and we'll take a closer look.

simonpeters commented 1 year ago

hi @jaysoo , this doesn't seem to be the case with me.

This is what my next.config.js looks like.

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withNx } = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

module.exports = withNx(nextConfig);

Its the default next.config.js

simonpeters commented 1 year ago

I will try and create a reproduction repo when I have a bit of time.

simonpeters commented 1 year ago

@jaysoo I made a repo

https://github.com/simonpeters/nx-bug-repo

when running https://github.com/simonpeters/nx-bug-repo I get the following error.

> nx run ronnie:serve:development

error - ../ui/src/icons/FacebookIcon.tsx
Module parse failed: Unexpected token (3:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { Icon, IconProps } from "@chakra-ui/react";
| 
> export const FacebookIcon = (props: IconProps) => (
|   <Icon viewBox='0 0 27 26' {...props}>
|     <path d="M26.475 13.0886C26.475 5.98911 20.7198 0.233873 13.6203 0.233873C6.52086 0.233873 0.765625 5.98911 0.765625 13.0886C0.765625 19.5047 5.4664 24.8228 11.6118 25.7871V16.8044H8.34789V13.0886H11.6118V10.2565C11.6118 7.03481 13.5309 5.25524 16.4672 5.25524C17.8736 5.25524 19.3447 5.50631 19.3447 5.50631V8.66977H17.7237C16.1269 8.66977 15.6289 9.66066 15.6289 10.6772V13.0886H19.194L18.6241 16.8044H15.6289V25.7871C21.7742 24.8228 26.475 19.5047 26.475 13.0886Z" fill="currentColor"/>

Import trace for requested module:
../ui/src/icons/FacebookIcon.tsx
../ui/src/icons/index.tsx
../ui/src/index.ts
[ ready ] on http://localhost:4200
simonpeters commented 1 year ago

I don't think I can re-open the issue myself.

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.