Possible babel issues when migrating existing CRA

[zamirkhan]

I have a working CRA app that I want to add SSR to. This SDK looks promising!

I tried following the steps in the readme. Although the server does start, during loading I get a compilation error:

(function (exports, require, module, __filename, __dirname) { .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, ^ SyntaxError: Unexpected token . at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) ...

This appears to be because I'm importing a css file from node_modules like so:

import "react-datepicker/dist/react-datepicker.css";

This works in the regular CRA app, but not after the migration. I'm not exactly sure how to fix that, but I assumed I might need to use config-overrides.js to add some custom babel configuration? However, when I add the default config-overrides.js. I get the following error:

/Users/<blahblahblah>/client/config-overrides.js:4 ...config, ^^^ SyntaxError: Unexpected token ... at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28)

I'd rather address the first issue without having a custom configuration, but perhaps the second issue gives you a clue?

Thanks.

[ariamckinley]

I'm having the exact same issue with animate.css. Did you find a solution @zamirkhan?

/home/garet/Code/garet.io/node_modules/animate.css/animate.min.css:1
(function (exports, require, module, __filename, __dirname) { @charset "UTF-8";
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.animate.css/animate.min.css (/home/garet/Code/garet.io/build/server.js:2697:18)

I'm guessing there must be a difference with the css-loader used in react-app. Since we don't have access to the webpack config I'm not sure if it's possible to fix without ejecting.

[zamirkhan]

My "solution" was to switch to cra-universal, which I've been quite happy with and did not require ejection.

[ariamckinley]

I'll check it out, thanks for the suggestion!

[lyndseyjw]

any updates? running into this same issue with
node_modules/react-datepicker/dist/react-datepicker.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@charset "UTF-8";
SyntaxError: Invalid or unexpected token

[YeyuanNielson1]

any updates? running into this same issue with node_modules/react-datepicker/dist/react-datepicker.css:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@charset "UTF-8"; SyntaxError: Invalid or unexpected token

Same here. Have you got the solution? @lyndseyjw