Error when compiling: ReferenceError: media is not defined

sage
1

Hello,

I’ve set up a new theme with Sage 10 via composer create-projeyt roots/sage mytheme dev-master. After that I’m running yarn, set the local dev config in my webpack.mix.js. As a third step I removed jquery and added alpinejs and tailwindforms and and line-clamp.

When I’m compiling the theme now I got the following error:

yarn build:production                                                                                                       ✔  1116  21:01:11
yarn run v1.22.5
$ mix --production
ERROR in ./resources/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ReferenceError: media is not defined
    at Object.<anonymous> (/path/to/install/web/app/themes/mytheme/tailwind.config.js:10:13)
    at Module._compile (/path/to/install/web/app/themes/mytheme/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (/path/to/install/web/app/themes/mytheme/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at /path/to/install/web/app/themes/mytheme/node_modules/tailwindcss/lib/index.js:76:107
    at /path/to/install/web/app/themes/mytheme/node_modules/tailwindcss/lib/processTailwindFeatures.js:52:20
    at LazyResult.runOnRoot (/path/to/install/web/app/themes/mytheme/node_modules/postcss/lib/lazy-result.js:303:16)
    at processResult (/path/to/install/web/app/themes/mytheme/node_modules/webpack/lib/NormalModule.js:598:19)
    at /path/to/install/web/app/themes/mytheme/node_modules/webpack/lib/NormalModule.js:692:5
    at /path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/path/to/install/web/app/themes/mytheme/node_modules/postcss-loader/dist/index.js:104:7)

ERROR in ./resources/styles/editor.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ReferenceError: media is not defined
    at Object.<anonymous> (/path/to/install/web/app/themes/mytheme/tailwind.config.js:10:13)
    at Module._compile (/path/to/install/web/app/themes/mytheme/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (/path/to/install/web/app/themes/mytheme/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at /path/to/install/web/app/themes/mytheme/node_modules/tailwindcss/lib/index.js:76:107
    at /path/to/install/web/app/themes/mytheme/node_modules/tailwindcss/lib/processTailwindFeatures.js:52:20
    at LazyResult.runOnRoot (/path/to/install/web/app/themes/mytheme/node_modules/postcss/lib/lazy-result.js:303:16)
    at processResult (/path/to/install/web/app/themes/mytheme/node_modules/webpack/lib/NormalModule.js:598:19)
    at /path/to/install/web/app/themes/mytheme/node_modules/webpack/lib/NormalModule.js:692:5
    at /path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/path/to/install/web/app/themes/mytheme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/path/to/install/web/app/themes/mytheme/node_modules/postcss-loader/dist/index.js:104:7)

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What’s going wrong here?

Regards,
Markus

2
  1. Does the newly created sage 10 project build?
  2. What are the exact changes (packages.json; tailwind configuration; styles) you applied on the project, can you push them onto a GitHub repository?
3

I found the problem… changed the darkMode:false option in the tailwind config to media, but just changed the word, so there were no quotation marks…

4

This topic was automatically closed after 42 days. New replies are no longer allowed.