Error while compiling assets

sage
1

When I try to compile assets with yarn build I got this error:

 BudError 

✘ require is not defined in ES module scope, you can use import instead
  This file is being treated as an ES module because it has a '.js' file extension and '/home/jarek/devilbox/data/www/tigo/htdocs/wp-content/themes/tigo/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use
  the '.cjs' file extension.

ℹ Stack trace

This file is being treated as an ES module because it has a '.js' file extension and './package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
 at ./node_modules/ink/build/components/Static.js:24:16
 at Array.map (<anonymous>)
 at Static (./node_modules/ink/build/components/Static.js:23:36)
 at renderWithHooks (./node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18)
 at mountIndeterminateComponent (./node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13)
 at beginWork (./node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
 at beginWork$1 (./node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14)

╭ sage [75ccb1d076348646]                                                                                                                                                                                                                  ./public
│
│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (113:5) resources/styles/app.css The `bg-turquoise` class does not exist. If `bg-turquoise` is a custom class, make sure it is defined within a `@layer` directive.
│ │   111 | 
│ │   112 | mark {
│ │ > 113 |     @apply bg-turquoise
│ │       |     ^
│ │   114 | }
│ │   115 | 
│
│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (2:5) resources/styles/cookies.css The `!shadow-faq` class does not exist. If `!shadow-faq` is a custom class, make sure it is defined within a `@layer` directive.
│ │   1 | #cookiescript_badge {
│ │ > 2 |     @apply !rounded-none !shadow-faq
│ │     |     ^
│ │   3 | }
│ │   4 | 
│
│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ SyntaxError
│ │ (32:3) resources/styles/login.css The `bg-turquoise` class does not exist. If `bg-turquoise` is a custom class, make sure it is defined within a `@layer` directive.
│ │   30 | 
│ │   31 | ::selection {
│ │ > 32 |   @apply bg-turquoise;
│ │      |   ^
│ │   33 | }
│ │   34 | 
│
╰ 6 errors

This is my bud.config.js file:

export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('cookies', ['@styles/cookies'])
    .entry('docs', ['@scripts/docs', '@styles/app'])
    .entry('login', ['@styles/login'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/tigo/public/');

And the tailwind.config.js file:

const config = {
  content: ["./index.php", "./resources/**/*.{php,js}"],
  safelist: [
    "fill-turquoise",
  ],
  theme: {
    extend: {
      boxShadow: {
        faq: "0 5px 20px rgb(33 56 102 / .1)",
      },
      fontFamily: {
        sans: ["DM Sans", "sans-serif"],
      },
      fontSize: {
        xxs: ["0.625rem", "1.2"],
      },
      colors: {
        white: "#FFFFFF",
        turquoise: {
          DEFAULT: "#87FFE3",
          dark: "#72D9C1",
        },
      }
    },
  },
  plugins: [
    require("tw-elements/dist/plugin.cjs"),
    require("tailwindcss-animated"),
  ],
  experimental: {
    optimizeUniversalDefaults: true,
  },
};

I don’t know what happend. Till now everything working fine. Can somebody please help me?

2

You gotta use import. Example (one of several you can come across by searching on these fourms):

https://discourse.roots.io/t/yarn-compile-error-with-tailwind-config-js/25366/4

3

Thanks Ben for your answer. The main problem is with the @apply directive. Everything was working fine before (I haven’t changed the code recently). Yesterday when I wanted to make some minor changes to the css and recompile the code I got a message about this directive and the css is not generated now.

4

Yay! It is working Ben! You were right with the import method. Thank You very much! :slight_smile:

1 Like