Possible babel issues when migrating existing CRA
zamirkhan opened this issue · 5 comments
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.
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.
My "solution" was to switch to cra-universal, which I've been quite happy with and did not require ejection.
I'll check it out, thanks for the suggestion!
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
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