4

The general error: SyntaxError: Invalid or unexpected token, referencing line 1 of index.css.

This is the result of encountering CSS syntax in a CSS file that I'm trying to import for styling.

Attempted fixes and experiments:

  1. Deleted everything out of the CSS file and exported an empty JS module. This works, verifying that the import is treating it as a JS file, not CSS.
  2. Removing the @import statement from line 1 of the CSS file. Of course, this fails to make a difference because the remaining CSS syntax throws the same error.
  3. Paired down the Webpack config file to eliminate the surface area of the problem. Rendering should be handled by Webpack, so the issue may reside there. Config was very basic and set to handle CSS, SASS, JS, and JSX.
  4. Tried importing the CSS file from other file locations, including the server's app.js file.
  5. Tried making use of ExtractTextPlugin as an bundling alternative.
  6. Tried making use of Isomorphic Style Loader.

All in all, given the attempted fixes and tests listed above, the issue seems unrelated to Webpack per se. It's as if the server side rendering is attempting to import the CSS file before Weback gets involved.

Improve this question

1 Answer 1

Reset to default
5

The fix, it turns out, was to use the ignore-styles package in our server app.js file:

require('ignore-styles')

The description as listed on the repo:

A babel/register style hook to ignore style imports when running in Node. This is for projects that use something like Webpack to enable CSS imports in JavaScript.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.