{"id":2862,"date":"2020-04-28T20:50:05","date_gmt":"2020-04-28T19:50:05","guid":{"rendered":"https:\/\/www.dpscomputing.com\/blog\/?p=2862"},"modified":"2021-03-01T21:24:10","modified_gmt":"2021-03-01T21:24:10","slug":"react-import-css-unexpected-token","status":"publish","type":"post","link":"https:\/\/www.dpscomputing.com\/blog\/2020\/04\/28\/react-import-css-unexpected-token\/","title":{"rendered":"React: Import CSS – Unexpected Token"},"content":{"rendered":"\n
\"React<\/figure><\/div>\n\n\n\n

React is a Javascript framework growing in popularity by the day. Open sourced by Facebook a few years ago, its reach has stretched far and wide. <\/p>\n\n\n\n

Most developers starting off with React will start with the create-react-app boilerplate provided by Facebook. However as time goes on and your experience grows, you naturally want to move away and take control of some of the complexity hidden by create-react-app – such as the Webpack and Babel configuration. <\/p>\n\n\n\n

However, as a developer used to create-react-app, you can suddenly start hitting a load of new bricks walls as you go it alone and start to have to make considerations you never used to have to. <\/p>\n\n\n\n

One of those, is importing static files – particularly if your adopting an isomorphic route to render your shiny new single page app server-side. <\/p>\n\n\n\n

One of the common errors is that caused by importing cascading style sheets (CSS). <\/p>\n\n\n\n

Can’t I Include My Style Directly In React Components<\/h2>\n\n\n\n

Yes. But as with other languages, you’ll probably prefer having separate stylesheets that you import allowing you to keep your components code readable. <\/p>\n\n\n\n

The Import<\/h2>\n\n\n\n

You’ve probably got something like this:<\/p>\n\n\n\n

import \".\/Header.css\";<\/code><\/pre>\n\n\n\n
Simple, eh?  Include this stylesheet.  <\/p>\n\n\n\n
Oh no, error time.  Try to run it and you’re hit with a brick wall:<\/p>\n\n\n\n
SyntaxError: F:\/Ampps\/www\/GitLab\/DPSComputing\/Experiment\/isomorphic-react\/src\/Components\/fragments\/Header.css: Unexpected token (1:0)\n1 | .logo {\n  | ^\n2 | max-height: 100px;\n3 | }<\/pre>\n\n\n\n
The first character it encounters in the file and boom – fallover time!<\/p>\n\n\n\n
There are many solutions out there on the web, many ludicrously complex.  Here we’ve got the addition of one node module dependency and one additional line of Babel configuration that’ll get you on your way.  <\/p>\n\n\n\n
Fixing CSS Unexpected Token in React<\/h2>\n\n\n\n
You need a new module for babel – css modules tranform – adding to your project development depdencies.  Run the following command:<\/p>\n\n\n\n
npm install --save-dev babel-plugin-css-modules-transform<\/code><\/pre>\n\n\n\n
After the install is complete, open your .babelrc file, and in the plugins section add “css-modules-transform”, like so:<\/p>\n\n\n\n
 \"plugins\": [\n    \"transform-object-rest-spread\",\n    \"css-modules-transform\"\n  ]<\/code><\/pre>\n\n\n\n
NPM start again, and your CSS files will now be being installed without issue!<\/p>\n","protected":false},"excerpt":{"rendered":"
React is a Javascript framework growing in popularity by the day. Open sourced by Facebook a few years ago, its reach has stretched far and wide. Most developers starting off with React will start...<\/p>\n","protected":false},"author":1,"featured_media":2859,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"#React : Import #CSS - Unexpected Token\n\nThe most infuriating React #bug fixed with one NPM module and one line of configuration!\n\n#BabelPlugins #ReactIssues #UnexpectedToken #Development","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2139],"tags":[2710,2705,2709,2695,2701,2702,2706,2704,2703],"class_list":["post-2862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-issues","tag-babel-configuration-css","tag-css-unexpected-token","tag-css-modules-transform","tag-react","tag-react-css","tag-react-css-import","tag-react-css-unexpected-token","tag-react-issues","tag-styling-react-components"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.dpscomputing.com\/blog\/wp-content\/uploads\/2020\/04\/image-4.png","jetpack_shortlink":"https:\/\/wp.me\/p3nsfA-Ka","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/comments?post=2862"}],"version-history":[{"count":2,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2862\/revisions"}],"predecessor-version":[{"id":2996,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/posts\/2862\/revisions\/2996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media\/2859"}],"wp:attachment":[{"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/media?parent=2862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/categories?post=2862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dpscomputing.com\/blog\/wp-json\/wp\/v2\/tags?post=2862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}