Next.js Discord

Discord Forum

Module parse failed: Unexpected character '@'...

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
Upgraded the project from next 12, to the next latest version, after I run the project I'am getting this error?

./src/app/globals.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
Answered by Transvaal lion
While creating the minimal reproduction repository, I tried to modify the next.config.js, i left it there all simple and started the project and it worked all fine. Started to add the configs that i had on my project, and i saw that from next 13 can automatically transpile and bundle dependencies, which replaces the next-transpile-modules package. And yeah all i had to do was
(ex. 
-const withTM = require('next-transpile-modules')(['awesome_module']);

-module.exports = withTM({});
+module.exports = {
+  transpilePackages: ['awesome_module'],
+};

).
View full answer

10 Replies

joulev
Do you have postcss installed with a postcss.config.js file?
Transvaal lionOP
@joulev yes

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
joulev
can you make a minimal reproduction repository? with that set up next should be able to parse the @tailwind directive with postcss
Transvaal lionOP
I guess it has to be the problem with the global.css file, bc if I remove the lines of the tailwind and then restart the project, it shows the same error but it refs to the next class you are using (ex. 
./src/app/globals.css
Module parse failed: Unexpected token (17:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| } */
| 
> .test-class {
|   
| }

)
I see that the error refers me to see the webpack.js.org, but is there any way to fix this without adding the webpack.js.org file, like in the others project that I created with next 14 I didn't have to create a webpack.js.org file
joulev
uh no you dont need webpack.config.js or any new files
can you make a minimal reproduction repository so i can see how the whole thing works and where it might have been broken
Transvaal lionOP
While creating the minimal reproduction repository, I tried to modify the next.config.js, i left it there all simple and started the project and it worked all fine. Started to add the configs that i had on my project, and i saw that from next 13 can automatically transpile and bundle dependencies, which replaces the next-transpile-modules package. And yeah all i had to do was
(ex. 
-const withTM = require('next-transpile-modules')(['awesome_module']);

-module.exports = withTM({});
+module.exports = {
+  transpilePackages: ['awesome_module'],
+};

).
Answer
Transvaal lionOP
@joulev Thank you a lot for your support !
joulev
glad to hear its working