search

sszczep / chrome-extension-webpack

Get started with Chrome extensions development using webpack, TypeScript, Sass, and more.
MIT License
286 stars 47 forks source link

Support for Tailwind CSS #3

Open jorgeuos opened 1 year ago

jorgeuos commented 1 year ago

First of all!

Really COOL boilerplate for getting started with Chrome extension development.

I was struggling with getting chrome as a global variable. And ChatGPT just gave me a headache with it's hallucinations.

Your repo, on the other hand, is looking really promising! Thank you!

Now to my issue:

Everything was working as expected until I tried to add TailwindCSS and got this error.

npm run start

> chrome-extension-webpack@0.2.0 start
> webpack --watch --config webpack.dev.cjs

Failed to load ./.env.
assets by path icons/ 35.8 KiB
  assets by path icons/*.png 16.5 KiB 10 assets
  assets by path icons/*.svg 13.2 KiB 3 assets
  asset icons/.DS_Store 6 KiB [compared for emit] [from: static/icons/.DS_Store] [copied]
assets by path *.js 142 KiB
  asset serviceWorker.js 126 KiB [compared for emit] (name: serviceWorker)
  asset options.js 10.7 KiB [emitted] (name: options)
  asset popup.js 5.08 KiB [compared for emit] (name: popup)
  asset contentScript.js 196 bytes [compared for emit] (name: contentScript)
assets by path *.html 1.42 KiB
  asset popup.html 836 bytes [compared for emit] [from: static/popup.html] [copied]
  asset options.html 614 bytes [emitted] [from: static/options.html] [copied]
asset styles/popup.css 19.1 KiB [compared for emit] (name: popup)
asset manifest.json 1.03 KiB [compared for emit] [from: static/manifest.json] [copied]
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
runtime modules 3.19 KiB 13 modules
orphan modules 19.8 KiB [orphan] 5 modules
javascript modules 44.9 KiB
  modules by path ./node_modules/@babel/runtime/ 18.4 KiB 13 modules
  modules by path ./src/*.ts 26.5 KiB
    ./src/serviceWorker.ts 6.35 KiB [built] [code generated]
    ./src/contentScript.ts 1 bytes [built] [code generated]
    + 4 modules
  modules by path ./styles/*.scss 89 bytes
    ./styles/popup.scss 50 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
css modules 6.32 KiB
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/jorgeuos/chrome-check-analytics/src/mtmoChecker.ts
  177:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/jorgeuos/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 3403 ms
^C
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  git remote -v
origin  git@github.com:sszczep/chrome-extension-webpack.git (fetch)
origin  git@github.com:sszczep/chrome-extension-webpack.git (push)
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  npm run start

> chrome-extension-webpack@0.2.0 start
> webpack --watch --config webpack.dev.cjs

Failed to load ./.env.
assets by path icons/ 35.8 KiB
  assets by path icons/*.png 16.5 KiB 10 assets
  assets by path icons/*.svg 13.2 KiB 3 assets
  asset icons/.DS_Store 6 KiB [compared for emit] [from: static/icons/.DS_Store] [copied]
assets by path *.js 142 KiB
  asset serviceWorker.js 126 KiB [emitted] [compared for emit] (name: serviceWorker)
  asset options.js 10.7 KiB [compared for emit] (name: options)
  asset popup.js 5.08 KiB [compared for emit] (name: popup)
  asset contentScript.js 196 bytes [compared for emit] (name: contentScript)
assets by path *.html 1.42 KiB
  asset popup.html 836 bytes [compared for emit] [from: static/popup.html] [copied]
  asset options.html 614 bytes [compared for emit] [from: static/options.html] [copied]
asset styles/popup.css 19.1 KiB [compared for emit] (name: popup)
asset manifest.json 1.03 KiB [compared for emit] [from: static/manifest.json] [copied]
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
runtime modules 3.19 KiB 13 modules
orphan modules 19.8 KiB [orphan] 5 modules
javascript modules 44.9 KiB
  modules by path ./node_modules/@babel/runtime/ 18.4 KiB 13 modules
  modules by path ./src/*.ts 26.5 KiB
    ./src/serviceWorker.ts 6.35 KiB [built] [code generated]
    ./src/contentScript.ts 1 bytes [built] [code generated]
    + 4 modules
  modules by path ./styles/*.scss 89 bytes
    ./styles/popup.scss 50 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
css modules 6.32 KiB
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 3550 ms
assets by status 200 KiB [cached] 22 assets
Entrypoint serviceWorker 126 KiB = serviceWorker.js
Entrypoint contentScript 196 bytes = contentScript.js
Entrypoint popup 24.1 KiB = styles/popup.css 19.1 KiB popup.js 5.08 KiB
Entrypoint options 10.7 KiB = options.js
cached modules 62.9 KiB (javascript) 3.19 KiB (runtime) [cached] 35 modules
orphan modules 1.72 KiB [orphan] 2 modules
cacheable modules 89 bytes (javascript) 6.32 KiB (css/mini-extract)
  javascript modules 89 bytes
    ./styles/popup.scss 50 bytes [built]
    ./styles/options.scss 39 bytes [built] [1 error]
  css modules 6.32 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 334 bytes [built]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/Hook.js:18:14)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/Hook.js:14:14)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

webpack 5.83.1 compiled with 2 errors and 1 warning in 120 ms
^C
(⎈|N/A:N/A) MY_ACCOUNT_NAME  /p/v/w/j/chrome-check-analytics   main ±  npm run build

> chrome-extension-webpack@0.2.0 build
> webpack --config webpack.prod.cjs

Failed to load ./.env.
assets by status 66.6 KiB [cached] 22 assets
Entrypoint serviceWorker = serviceWorker.js 1 auxiliary asset
Entrypoint contentScript = contentScript.js
Entrypoint popup = styles/popup.css popup.js 2 auxiliary assets
Entrypoint options = options.js 1 auxiliary asset
orphan modules 43.4 KiB (javascript) 997 bytes (runtime) [orphan] 22 modules
runtime modules 1.4 KiB 6 modules
cacheable modules 44.9 KiB (javascript) 6.25 KiB (css/mini-extract)
  javascript modules 44.9 KiB
    modules by path ./src/*.ts 30.3 KiB
      ./src/serviceWorker.ts + 12 modules 30.1 KiB [built] [code generated]
      + 3 modules
    modules by path ./node_modules/@babel/runtime/ 14.6 KiB
      ./node_modules/@babel/runtime/regenerator/index.js 448 bytes [built] [code generated]
      ./node_modules/@babel/runtime/helpers/regeneratorRuntime.js 13.6 KiB [built] [code generated]
      ./node_modules/@babel/runtime/helpers/typeof.js 555 bytes [built] [code generated]
    ./styles/options.scss 39 bytes [built] [code generated] [1 error]
  css modules 6.25 KiB
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css 5.99 KiB [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/popup.scss 262 bytes [built] [code generated]

WARNING in [eslint] 
/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/mtmoChecker.ts
  178:9  warning  'matomoFound' is assigned a value but never used  @typescript-eslint/no-unused-vars

/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/src/serviceWorker.ts
  21:16  warning  'getCurrentTab' is defined but never used  @typescript-eslint/no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

ERROR in ./styles/options.scss (./styles/options.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/options.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.loader (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/index.js:69:14)
 @ ./styles/options.scss
 @ ./src/options.ts 1:0-32

ERROR in ./styles/options.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5001:43
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3482:9)
    at timesSync (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss/base";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  styles/options.scss 1:9  root stylesheet
    at Object.<anonymous> (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss:1:7)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:439:10
    at Hook.eval [as call] (eval at create (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5068:39
    at tryRunOrWebpackError (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5066:12)
    at __webpack_require__ (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5023:18)
    at /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/webpack/lib/Compilation.js:5094:20
    at symbolIterator (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3485:9)
    at done (/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/neo-async/async.js:3527:9)

Generated code for /private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/css-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/node_modules/sass-loader/dist/cjs.js!/private/var/www/MY_ACCOUNT_NAME/chrome-check-analytics/styles/options.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n1 │ @import \"tailwindcss/base\";\n  │         ^^^^^^^^^^^^^^^^^^\n  ╵\n  styles/options.scss 1:9  root stylesheet");
 @ ./src/options.ts 1:0-32

Do you have any clue on how to fix the issue. I'll continue debugging tomorrow.

sszczep commented 1 year ago

Hey, thanks for reaching out.

Could you provide a minimal reproducible example? Some temporary git repository would be great.

jorgeuos commented 1 year ago

Sure!

I just installed everything:

git clone git@github.com:sszczep/chrome-extension-webpack.git
cd chrome-extension-webpack
npm install
npm run start
# Stop obviosly: ctrl+c
npm install -D postcss-import
npm run start

But sure, I haven't even created a new repo yet. But I will if you want me to.

Regards, Jorge

jorgeuos commented 1 year ago

Hi again!

I got it to work!

I feel really stupid now, but mainly I just followed a TailwindCSS guide and generated the default tailwind.config.js file and I added a postcss.config.js file aswell.

Renaming the extension of these files to .cjs seems to fix the issue.

I also tried different things before I got it to work.

But I made a fork of your repo, you can check it out if you want. I can even create a PR if you'd like that. But perhaps TailwindCSS should be optional. Perhaps something I can fix over the weekend or something.

Here's the diff.

jorgeuos commented 1 year ago

Oh, and here is a detailed doc of My tweaks to make TailwindCSS work.