import css file from node_modules

Question

We have a private npm repository, where we have a css file as part of lib folder.

When trying to require that css file using

require('<module_name>/lib/abc.css')

and using webpack to load that, i am getting below error :

SyntaxError: Unexpected token {

Any help, how to import such files

Your approach is correct, 'require' will force webpack to bundle this css. Can you provide that css and show webpack config where you taking care about css? — Michał Ignaszewski, Dec 14 '16 at 14:14

score 0 · Answer 1 · answered Jan 29 '17 at 15:27

I have been stuck for days on this issue too (I am new to the node.js/Meteor/React/JavaScript world). I found a solution using webpackJS.

My working solution (applied to a tiny application that should make it easy to understand; I only display a datagrid using hard-coded data) is available on my GitHub repository (commit 902c92c). The application is called "reactDataGrid", it is a subfolder of the repository, you just need to run "meteor" within that folder.

The two key steps in my case were:

to create a .babelrc file with the content described here (and copied below). I believe this helps webpack parse the JSX syntax of react. I have a feeling this may be key to your issue as well, as it is reported as a SyntaxError.

.babelrc

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react"
  ]
}

the require('react-datagrid/index.css') statement inside my main.jsx file, that tells webpack to include that CSS file in the dependency tree of my app. This is actually an instruction described in the README of the zippyui/react-datagrid GitHub repository. (Unfortunately stackoverflow limits to two links in my post, so I cannot link it here anymore)

I cannot guarantee that this is the preferred method of doing it, but I can say that it works for me. I hope it helps.

Best, Kevin

import css file from node_modules

1 Answers1