nx serve command not working getting error "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"

Manu-Gupta619 commented 1 year ago

Current Behavior

nx serve command not working getting this error

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

export interface CopyTradeCreateVaultPayload { | name: string; | symbol: string;

Import trace for requested module:

Expected Behavior

Should be able to run nx serve command

GitHub Repo

No response

Steps to Reproduce

1. { "name": "sdf", "version": "0.0.0", "license": "MIT", "scripts": { "start": "nx serve", "build": "nx build", "test": "nx test", "test:cov": "nx test --code-coverage", "prepare": "husky install", "lint": "nx run-many --target='lint'", "lint-fix": "nx run-many --target=lint --fix", "preinstall": "pnpx only-allow pnpm", "cy:open": "CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open", "publish:wallets": "pnpx nx build wallets && npm publish dist/libs/wallets" }, "private": true, "packageManager": "pnpm@7.18.2", "husky": { "hooks": { "pre-commit": "lint-staged", "pre-push": "pnpx nx build" } }, "lint-staged": { "*.{js,tsx,ts}": [ "nx format --uncommitted", "nx lint --fix --max-warnings 25" ] }, "dependencies": { "@0xdeepak/transaction-monitor": "^1.0.5", "@analytics/google-analytics": "^1.0.5", "@coinbase/wallet-sdk": "^3.6.6", "@cubejs-client/core": "^0.33.12", "@cubejs-client/react": "^0.33.12", "@cubejs-client/ws-transport": "^0.33.12", "@emotion/cache": "^11.11.0", "@emotion/react": "11.10.5", "@emotion/styled": "11.10.5", "@hookform/resolvers": "^2.9.3", "@metamask/jazzicon": "^2.0.0", "@mui/icons-material": "^5.10.3", "@mui/lab": "^5.0.0-alpha.88", "@mui/material": "^5.8.6", "@mui/system": "^5.11.2", "@mui/x-data-grid": "^5.12.3", "@nrwl/next": "16.0.2", "@rainbow-me/rainbowkit": "^1.0.8", "@sentry/browser": "^7.55.2", "@sentry/nextjs": "^7.55.2", "@sentry/node": "^7.55.2", "@sentry/tracing": "^7.55.2", "@socket.tech/plugin": "^1.0.4", "@tanstack/react-query": "^4.3.9", "@walletconnect/ethereum-provider": "^2.7.8", "@web3-react/coinbase-wallet": "^8.2.0", "@web3-react/core": "^8.2.0", "@web3-react/eip1193": "^8.2.0", "@web3-react/empty": "^8.2.0", "@web3-react/gnosis-safe": "^8.2.0", "@web3-react/metamask": "^8.2.0", "@web3-react/network": "^8.2.0", "@web3-react/types": "^8.2.0", "@web3-react/url": "^8.2.0", "@web3-react/walletconnect": "^8.2.0", "@web3-react/walletconnect-v2": "^8.3.3", "analytics": "^0.8.1", "apexcharts": "^3.36.3", "axios": "^0.27.2", "bignumber.js": "^9.1.1", "d3": "^7.8.2", "date-fns": "^2.30.0", "ethers": "^5.7.2", "framer-motion": "^10.12.16", "gradient-avatar-v2": "^1.0.2", "highlight.js": "^11.8.0", "i18next": "^22.5.1", "i18next-browser-languagedetector": "^7.0.2", "js-cookie": "^3.0.5", "meilisearch": "^0.30.0", "moment": "^2.29.4", "next": "13.3.0", "next-pwa": "^5.6.0", "notistack": "^2.0.8", "nprogress": "^0.2.0", "numeral": "^2.0.6", "only-allow": "^1.1.1", "posthog-js": "^1.52.0", "react": "18.2.0", "react-apexcharts": "^1.4.0", "react-copy-to-clipboard": "^5.1.0", "react-countup": "^6.4.2", "react-dom": "18.2.0", "react-dropzone": "^14.2.3", "react-error-boundary": "^4.0.9", "react-hook-form": "^7.33.1", "react-i18next": "^12.3.1", "react-lazy-load-image-component": "^1.6.0", "react-stacked-center-carousel": "^1.0.12", "rxjs": "6.6.7", "side-channel": "^1.0.4", "simplebar-react": "^3.2.4", "stylis-plugin-rtl": "^2.1.1", "tslib": "^2.3.0", "viem": "^1.5.3", "wagmi": "^1.3.9", "web3": "^1.8.0", "web3-core": "1.8.2", "web3-utils": "^1.8.1", "web3modal": "^1.9.12", "yup": "^0.32.11" }, "devDependencies": { "@babel/core": "7.12.13", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "7.12.13", "@babel/runtime": "7.20.13", "@iconify/react": "^4.0.0", "@nestjs/schematics": "^9.0.0", "@nestjs/testing": "^9.0.0", "@nrwl/cli": "15.4.2", "@nrwl/cypress": "16.0.2", "@nrwl/eslint-plugin-nx": "16.0.2", "@nrwl/jest": "16.0.2", "@nrwl/linter": "16.0.2", "@nrwl/node": "16.0.2", "@nrwl/nx-cloud": "16.3.0", "@nrwl/react": "16.0.2", "@nrwl/storybook": "16.0.2", "@nrwl/web": "16.0.2", "@nrwl/workspace": "16.0.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7", "@rollup/plugin-url": "^7.0.0", "@storybook/addon-essentials": "6.5.15", "@storybook/builder-webpack5": "6.5.15", "@storybook/core-server": "6.5.15", "@storybook/manager-webpack5": "6.5.15", "@storybook/react": "6.5.15", "@svgr/rollup": "^6.1.2", "@svgr/webpack": "^6.1.2", "@swc/core": "^1.2.173", "@swc/jest": "0.2.20", "@testing-library/react": "13.4.0", "@types/autosuggest-highlight": "^3.2.0", "@types/cookie": "^0.5.1", "@types/d3": "^7.4.0", "@types/jest": "29.4.4", "@types/js-cookie": "^3.0.2", "@types/lodash": "^4.14.191", "@types/node": "18.11.9", "@types/nprogress": "^0.2.0", "@types/numeral": "^2.0.2", "@types/react": "18.0.25", "@types/react-copy-to-clipboard": "^5.0.3", "@types/react-dom": "18.0.9", "@types/react-is": "17.0.3", "@types/react-lazy-load-image-component": "^1.5.2", "@types/react-redux": "^7.1.24", "@types/react-slick": "^0.23.10", "@typescript-eslint/eslint-plugin": "5.58.0", "@typescript-eslint/parser": "5.58.0", "babel-jest": "29.4.3", "babel-loader": "8.1.0", "cypress": "^11.0.0", "cypress-metamask-v2": "^1.7.2", "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.26.0", "eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-react": "7.31.11", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-unused-imports": "^2.0.0", "husky": "^8.0.1", "jest": "29.4.3", "jest-environment-jsdom": "29.4.3", "lint-staged": "^13.0.3", "lodash": "^4.17.21", "nx": "16.0.2", "prettier": "^2.6.2", "react-refresh": "^0.10.0", "react-syntax-highlighter": "^15.5.0", "react-test-renderer": "18.2.0", "storybook-addon-swc": "^1.1.7", "style-loader": "^3.3.0", "stylus": "^0.55.0", "stylus-loader": "^7.1.0", "ts-jest": "29.1.1", "ts-loader": "^9.4.4", "ts-node": "10.9.1", "typescript": "^5.0.4", "url-loader": "^4.1.1", "webpack": "^5.75.0", "webpack-merge": "^5.8.0" } }

Package.json

Nx Report

Node   : 18.17.1
   OS     : win32 x64
   pnpm   : 8.7.0
   Hasher : Native

   nx                 : 16.0.2
   @nrwl/jest         : 16.0.2
   @nrwl/linter       : 16.0.2
   @nrwl/workspace    : 16.0.2
   @nrwl/cypress      : 16.0.2
   @nx/eslint-plugin  : 16.0.2
   @nrwl/next         : 16.0.2
   @nrwl/node         : 16.0.2
   @nrwl/react        : 16.0.2
   @nrwl/storybook    : 16.0.2
   @nrwl/web          : 16.0.2
   @nrwl/nx-cloud     : 16.3.0
   typescript         : 5.2.2
   ---------------------------------------
   Community plugins:
   rxjs : 6.6.7

Failure Logs

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
> export interface CopyTradeCreateVaultPayload {
|   name: string;
|   symbol: string;

Import trace for requested module:

Package Manager Version

No response

Operating System

[ ] macOS
[X] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

No response

jaysoo commented 1 year ago

Hi @Manu-Gupta619 It looks like you're on an older version of Nx. You may want to update to the latest (16.8.0) and try again. Also, note that @nrwl/* packages are now @nx/*, such as @nx/react.

It looks like you're building a Next.js app with Stylus? If so, your next.config.js file should look something like this:

const { composePlugins, withNx } = require('@nx/next');
const { withStylus } = require('@nx/next/plugins/with-stylus');

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

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withStylus,
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

Note that the withNx function changed in 16.0.0 due to a breaking change in Next.js 13.0.0.

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

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.

nrwl / nx