TypeError: Cannot read property 'theme' of undefined

[abhijitgujar86]

Module build failed (from ./node_modules/svelte-loader/index.js):
TypeError: Cannot read property 'theme' of undefined

here are error details
0 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
1 info using npm@7.5.2
2 info using node@v12.21.0
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 3ms
5 timing config:load:builtin Completed in 3ms
6 timing config:load:cli Completed in 2ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:/home/abhi/projects/stable/core-docs/.npmrc Completed in 1ms
9 timing config:load:project Completed in 2ms
10 timing config:load:file:/home/abhi/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 11ms
19 verbose npm-session 386f033284c46519
20 timing npm:load Completed in 19ms
21 timing command:run-script Completed in 5185ms
22 verbose stack Error: command failed
22 verbose stack at ChildProcess. (/usr/share/nodejs/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack at ChildProcess.emit (events.js:314:20)
22 verbose stack at maybeClose (internal/child_process.js:1022:16)
22 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
23 verbose pkgid terrabelender-0.1@0.0.1
24 verbose cwd /home/abhi/projects/stable/core-docs
25 verbose Linux 5.13.0-051300rc5-generic
26 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
27 verbose node v12.21.0
28 verbose npm v7.5.2
29 error code 1
30 error path /home/abhi/projects/stable/core-docs
31 error command failed
32 error command sh -c webpack serve --content-base public
33 verbose exit 1

this is my package.json

{
"name": "terrabelender-0.1",
"version": "0.0.1",
"private": true,
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/runtime": "^7.7.7",
"@tailwindcss/jit": "^0.1.10",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^8.1.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"eslint": "^7.23.0",
"eslint-plugin-svelte3": "^3.1.2",
"fibers": "^5.0.0",
"file-loader": "^6.2.0",
"globby": "^11.0.3",
"html-webpack-plugin": "^5.3.1",
"husky": "^6.0.0",
"lint-staged": "^10.5.4",
"mini-css-extract-plugin": "^1.3.4",
"postcss": "^8.2.15",
"postcss-fixes": "^2.0.1",
"postcss-import": "^14.0.2",
"postcss-load-config": "^3.0.1",
"postcss-loader": "~3.0.0",
"prettier": "^2.2.1",
"prettier-plugin-svelte": "^2.2.0",
"sass": "^1.32.12",
"sass-loader": "^11.1.0",
"style-loader": "^2.0.0",
"svelte": "^3.31.2",
"svelte-loader": "^3.0.0",
"svelte-preprocess": "^4.7.0",
"tailwindcss": "^2.1.2",
"url-loader": "^4.1.1",
"webpack": "^5.16.0",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "webpack serve --content-base public",
"analyze": "NODE_ENV=production webpack --env.analyze=true --mode=production --progress",
"format": "prettier --write --svelte-sort-order scripts-markup-styles .//*.svelte"
},
"dependencies": {
"tabulator-tables": "^4.9.3"
},
"browserslist": [
"since 2017-06"
],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"/.svelte": [
"prettier --write --svelte-sort-order scripts-markup-styles ./**/.svelte",
"git add"
],
"**/*.js": [
"prettier --write",
"git add"
]
}
}

[Conduitry]

There's nothing about theme in this library. I see you're using Tailwind, so I would guess your configuration for that and/or for svelte-preprocess is incorrect. There's nothing that people will be able to help with unless you share a project that reproduces this, not just your package.json. And GitHub is not the correct place for support questions like this one. Please ask on StackOverflow or on Discord - again, this time providing a reproduction if you want people to be able to help you.

[ferulisses]

I got the same error using TailWindCSS in a Svelte project after updating TailWindCSS from 2.0 to 2.2.

In TailWindCSS version 2.1 the jit has been included in the main package (https://blog.tailwindcss.com/tailwindcss-2-1#jit-engine-in-core), so, you must remove jit, what I did:

1. npm uninstall @tailwindcss/jit

2. at rollup.config.js I had:

  postcss: {
    plugins: [
      require('@tailwindcss/jit'),   // <-- change this line
      require("autoprefixer")
    ],
  },

replaced with:

  postcss: {
    plugins: [
      require('tailwindcss'),   // <-- change this line
      require("autoprefixer")
    ],
  }, 

3. at tailwind.config.js I added one line:

module.exports = {
  mode: 'jit',   // <-- this one

[kshekh]

#ferulisses is right here.
The Tailwindcss has upgraded and added JIT inbuild so there is no need to add '@tailwindcss/jit' in postcss.config.js
Thank you.

[kenjiru]

It would be nice to update the documentation..

[lgmworks]

To whom It May Concern:
In Laravel webpack.mix.js:

from this:

.postCss('resources/css/tailwind.css', 'public/css/build/tailwind.css', [
        atImport(),
        require("@tailwindcss/jit")
    ])

To

.postCss('resources/css/tailwind.css', 'public/css/build/tailwind.css', [
        atImport(),
        require("tailwindcss")
    ])

and in tailwind.config.js:

module.exports = {
  mode: 'jit',   // <-- this one