0

I logged onto my Mac today and tried to start up a next.js server on an on-going project and I am getting some strange behaviour with the log. 'npm run dev' fails to complete.

I don't have the previous logs to hand, but I tried completely uninstalling node.js and npm and re-installing, then deleting package-lock.json and node_modules and re-running npm install and it has still not fixed the error.

This is the log it spits out:

1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle [email protected]~dev: CWD: /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
10 silly lifecycle [email protected]~dev: Args: [ '-c', 'next dev' ]
11 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: `next dev`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
16 verbose Darwin 20.4.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v14.17.4
19 verbose npm  v6.14.14
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: `next dev`
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

What my terminal spits out after running 'npm run dev'

> [email protected] dev /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/.env.local
info  - Loaded env from /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.6
TypeError: Cannot set property 'styles' of undefined
    at module.exports (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/@zeit/next-css/css-loader-config.js:25:56)
    at Object.webpack (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/@zeit/next-sass/index.js:20:37)
    at getBaseWebpackConfig (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/build/webpack-config.js:162:454)
    at async Promise.all (index 0)
    at async HotReloader.start (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/server/hot-reloader.js:16:133)
    at async DevServer.prepare (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/cli/next-dev.js:22:1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

package.json

{
  "name": "client-dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@svgr/webpack": "^5.4.0",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^0.7.0",
    "file-loader": "^6.0.0",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "next": "^11.0.1",
    "postcss-loader": "^3.0.0",
    "progressbar.js": "^1.1.0",
    "react": "^16.7.0",
    "react-chartjs-2": "^2.9.0",
    "react-datepicker": "^3.1.3",
    "react-dom": "^16.7.0",
    "react-hook-form": "^6.9.6",
    "react-slick": "^0.26.1",
    "react-transition-group": "^4.4.1",
    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.4.6",
    "tinycolor": "^0.0.1",
    "tinycolor2": "^1.4.1",
    "typeface-poppins": "^0.0.72",
    "url-loader": "^4.1.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@tailwindcss/custom-forms": "^0.2.1",
    "@types/node": "^14.0.14",
    "@types/react": "^16.9.41",
    "typescript": "^3.9.6"
  }
}

3
  • try rm -rf node_modules/.cache or simply rm -rf node_modules && npm install Commented Aug 11, 2021 at 9:20
  • 1
    getting same error :( Commented Aug 11, 2021 at 9:22
  • Check your styles variable mentioned in error Commented Aug 11, 2021 at 9:42

2 Answers 2

0

Try this steps.

  1. warn - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.6 - Your crash log from npm. Upgrade to 4.3.2
  2. Use Node 12.13.0 , new version of Nodejs (14^) cant work with some older npm packages.
  3. Check the correct settings for tailwindcss in your nextjs app. For some reason - TypeError: Cannot set property 'styles' of undefined
Sign up to request clarification or add additional context in comments.

2 Comments

1. Same error but warning is now gone. 2. downgraded but didnt fix it. 3. It was working fine yesterday, nothing with tailwind has been changed at all. I also reset to previous commits and getting same error
In this case i think the problem is in your code. *** TypeError: Cannot set property 'styles' of undefined Find the code part where you want to set property styles or something about styling.
0

Update your Node version.

I had the same issue, I have Node (version 12.13.0) and npm (6.12.0)

When I tried npx create-react-app --use-npm it gave me the same error in your question.

What I did to solve the issue:

  1. I tried installing react, react-dom separately, it worked.

  2. When I tried to install Next, I had this error message:

    npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=12.22.0"} (current: {"node":"12.13.0","npm":"6.12.0"})
    

So, I updated Node, and everything worked just fine.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.