dan3460's avatar

Error running npm run dev or prod

i'm getting the following error when i run "npm run dev" or "npm run prod":

ERROR in ./resources/css/app.css
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):    
C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\postcss.config.js:1       
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at module.exports (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\import-fresh\index.js:32:59)
    at loadJs (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\cosmiconfig\dist\loaders.js:16:18)
    at Explorer.loadFileContent (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\cosmiconfig\dist\Explorer.js:84:32)
    at processResult (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack\lib\NormalModule.js:753:19)
    at C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack\lib\NormalModule.js:855:5
    at C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\postcss-loader\dist\index.js:56:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

any ideas?

0 likes
9 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

The error message suggests that there is a syntax error in the postcss.config.js file. Specifically, it is complaining about the "export default" statement. This suggests that the file is being treated as a CommonJS module instead of an ES module.

To fix this, you can try changing the file extension from .js to .cjs. This will tell Node.js to treat the file as a CommonJS module. Alternatively, you can try changing the "export default" statement to a CommonJS-style "module.exports" statement.

Example:

// postcss.config.cjs
module.exports = {
  // your PostCSS configuration
};

Alternatively, you can try changing the "export default" statement to a CommonJS-style "module.exports" statement.

Example:

// postcss.config.js
module.exports = {
  // your PostCSS configuration
};
1 like
wightowl's avatar

@LaryAI I had this problem. Changing the first line of postcss.config.js from: export default { to module.exports = { solved the main and associated problems. npm run dev now works again.

dan3460's avatar

@christian-qode here is the content:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
dan3460's avatar

If this may help anyone. The application was built with no security has it was intended to be in the internal network, so i added breeze to manage access.

ssinzu's avatar

@dan3460 I have the same probleme please how did you fix it ? can you help me ?

wightowl's avatar

@dan3460 Yes. This problem appeared for me immediately after the installation of Laravel Breeze into an existing application.

thinkverse's avatar

You need to use "type": "module" in your package.json to use ESM, otherwise you need to use CommonJS and module.exports instead of export default.

Common JS

// postcss.config.cjs
module.exports = {
  // your PostCSS configuration
};

ESM

// postcss.config.js
export default {
  // your PostCSS configuration
};

// package.json
{
    "type": "module",
}

You can check out the relevant PRs for it as well laravel/laravel#6090 and laravel/breeze#246.

3 likes
dan3460's avatar

neither of the two suggestions worked. But the one about ESM yield another error message:

[webpack-cli] Error: Cannot find module 'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\webpack.mix'
Require stack:
- C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\laravel-mix\setup\webpack.config.js
- C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js
- C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\bootstrap.js
- C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\bin\cli.js
- C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack\bin\webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at module.exports (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\laravel-mix\setup\webpack.config.js:11:5)
    at loadConfigByPath (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js:1439:37)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js:1454:35)
    at async WebpackCLI.createCompiler (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js:1785:22)
    at async WebpackCLI.runWebpack (C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js:1890:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\laravel-mix\setup\webpack.config.js',
    'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\webpack-cli.js',
    'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\lib\bootstrap.js',
    'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack-cli\bin\cli.js',
    'C:\Users\Danielk\Documents\Projects\Route Dispatch\RouteDispatch\node_modules\webpack\bin\webpack.js'
  ]
}

I think the problem has to do with the webpack module. i tried to uninstall webpack but could not.

Please or to participate in this conversation.