Debugging terminal output: CssSyntaxError

Viewed 154

I am experiencing 2 errors in my current build, these appear to be CssSyntaxErrors. Could this be due to deprecated modules? Also, the terminal output seems to be pointing to src/index.tsx Unknown word I'm unsure where the error lies here. I understand that "use strict"; is used in the modules in question but is this causing a problem in my .tsx file within my src folder? Any help is greatly appreciated, thank you.

Here is my terminal output:

blakelucey@Blakes-Air fsd-next % yarn run build
yarn run v1.22.15
warning ../../package.json: No license field
$ webpack --progress
BUILD_DIR /Users/blakelucey/Desktop/fsd-next/build
SRC_DIR /Users/blakelucey/Desktop/fsd-next/src
assets by status 19.2 KiB [cached] 2 assets
runtime modules 41 KiB 15 modules
orphan modules 39 bytes [orphan] 1 module
./src/index.tsx 39 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/index.tsx (./src/index.tsx.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/ts-loader/index.js!./src/index.tsx)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/blakelucey/Desktop/fsd-next/src/index.tsx Unknown word

> 1 | "use strict";
    | ^
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | var React = require("react");
 @ ./src/index.tsx

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/blakelucey/Desktop/fsd-next/src/index.tsx Unknown word

> 1 | "use strict";
    | ^
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | var React = require("react");

    at tryRunOrWebpackError (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4966:12)
    at __webpack_require__ (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4923:18)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4994:20
    at symbolIterator (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3485:9)
    at done (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/blakelucey/Desktop/fsd-next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4901:43
    at symbolIterator (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3463:5)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4866:16
    at symbolIterator (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3463:5)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4834:15
-- inner error --
Error: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/blakelucey/Desktop/fsd-next/src/index.tsx Unknown word

> 1 | "use strict";
    | ^
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | var React = require("react");

    at Object.<anonymous> (/Users/blakelucey/Desktop/fsd-next/node_modules/css-loader/dist/cjs.js!/Users/blakelucey/Desktop/fsd-next/node_modules/ts-loader/index.js!/Users/blakelucey/Desktop/fsd-next/src/index.tsx:1:7)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (/Users/blakelucey/Desktop/fsd-next/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4968:39
    at tryRunOrWebpackError (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4966:12)
    at __webpack_require__ (/Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4923:18)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4994:20
    at symbolIterator (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3485:9)
    at done (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/blakelucey/Desktop/fsd-next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4901:43
    at symbolIterator (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/blakelucey/Desktop/fsd-next/node_modules/neo-async/async.js:3463:5)
    at /Users/blakelucey/Desktop/fsd-next/node_modules/webpack/lib/Compilation.js:4866:16

Generated code for /Users/blakelucey/Desktop/fsd-next/node_modules/css-loader/dist/cjs.js!/Users/blakelucey/Desktop/fsd-next/node_modules/ts-loader/index.js!/Users/blakelucey/Desktop/fsd-next/src/index.tsx
1 | throw new Error("Module build failed (from ./node_modules/css-loader/dist/cjs.js):\nCssSyntaxError\n\n(1:1) /Users/blakelucey/Desktop/fsd-next/src/index.tsx Unknown word\n\n\u001b[1m\u001b[31m>\u001b[39m\u001b[22m\u001b[90m 1 | \u001b[39m\u001b[32m\"use strict\"\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m   | \u001b[39m\u001b[1m\u001b[31m^\u001b[39m\u001b[22m\n \u001b[90m 2 | \u001b[39m\u001b[36mObject.defineProperty\u001b[39m\u001b[36m(\u001b[39mexports, \u001b[32m\"__esModule\"\u001b[39m, \u001b[33m{\u001b[39m value\u001b[33m:\u001b[39m true \u001b[33m}\u001b[39m\u001b[36m)\u001b[39m\u001b[33m;\u001b[39m\n \u001b[90m 3 | \u001b[39mvar React = \u001b[36mrequire\u001b[39m\u001b[36m(\u001b[39m\u001b[32m\"react\"\u001b[39m\u001b[36m)\u001b[39m\u001b[33m;\u001b[39m\n");

webpack 5.58.2 compiled with 2 errors and 1 warning in 8550 ms
error Command failed with exit code 1.

0 Answers
Related