Error on nextJS before installation

[johnnywm]

Hello, I really need help with this problem. I can´t use the component before install get this console error.

this dont make sense, I check the CSS code and evething is ok, my other css files are working and finaly reinstall de dependecy " emoji-js" but that dont solution my problem.

Is there anything else I can do?

C:\Users\Johnny\Documents\res29-05-19\app\node_modules\react-chat-window\lib\styles\emojiPicker.css:1
(function (exports, require, module, __filename, __dirname) { .sc-emoji-picker {
^

SyntaxError: Unexpected token .
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:656:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (C:\Users\Johnny\Documents\res29-05-19\app\node_modules\react-chat-window\lib\styles\index.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (C:\Users\Johnny\Documents\res29-05-19\app\node_modules\react-chat-window\lib\index.js:10:1)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
GET / 500 3004.500 ms - -

[dharness]

Hey @johnnywm, can you provide a minimum-code-example repo that reproduces the error? Please include only an example of rcw usage and your build setup - do not include application code. Often making this kind of example can help uncover the issue, and if not, it will make it possible for us to diagnose your issue.

[johnnywm]

Hey @dharness thanks for answer. I put the example code of react chat window on a file named, chat.js the error happen when I import that component on my _app.js page ( in Nextjs is the main page)

using this code

import Chat from "../Components/chat";

when I delete that code, my app run without problem

[BrandonE]

I have a similar issue. I think the CSS file is being interpreted as JavaScript.

[BrandonE]

I believe that this is an issue with @zeit/next-css, which is deprecated. Unfortunately, there are issues with Next's built-in CSS support and node_modules that include CSS: vercel/next.js#12079

[BrandonE]

I was very stubborn with this and eventually got it working with the next-transpile-modules plugin:

const withTM = require('next-transpile-modules')(['react-chat-window']);

I also had to remove my usage of next-images. Afterwards, the component looks great!