Unexpected token . when importing .css file with webpack

Question

Here is my webpack config

module: {
  loaders: [
    { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
    { test: /\.json$/, loader: 'json-loader' },
    { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
    { test: /\.css$/, loader: 'style!css?importLoaders=1!autoprefixer?browsers=last 2 version!sass' },

The off thing is, I have another project that is a near copy of this and it works fine. In both cases I import the .css like this.

import 'react-day-picker/lib/style.css'

The error:

[require-hacker] Trying to load "style.css" as a "*.js"
[1] [piping] can't execute file: /Users/myUser/Projects/fed/bin/server.js
[1] [piping] error given was: /Users/myUser/Projects/fed/node_modules/react-day-picker/lib/style.css:3
[1] .DayPicker {
[1] ^
[1] 
[1] SyntaxError: Unexpected token .
[1]     at createScript (vm.js:74:10)
[1]     at Object.runInThisContext (vm.js:116:10)
[1]     at Module._compile (module.js:533:28)
[1]     at Module._extensions..js (module.js:580:10)
[1]     at require.extensions.(anonymous function) (/Users/myUser/Projects/fed/node_modules/babel-register/lib/node.js:152:7)
[1]     at Object._module2.default._extensions.(anonymous function) [as .js] (/Users/myUser/Projects/fed/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:260:68)
[1]     at Module.load (module.js:503:32)
[1]     at tryModuleLoad (module.js:466:12)
[1]     at Module._load (module.js:458:3)
[1]     at Function.module._load (/Users/myUser/Projects/fed/node_modules/piping/lib/launcher.js:32:16)
[1] [piping] further repeats of this error will be suppressed...

Adam · Accepted Answer · 2017-08-28 20:58:32Z

4

Here's a bit of a work around for it. On my project I use the is-in-browser module to get past babel and only import the external stylesheets if the app was running in a browser window, which you could use in your component like this:

import isBrowser from 'is-in-browser';

if (isBrowser) {
    require ('react-day-picker/lib/style.css')
}

answered Aug 28, 2017 at 20:58

Adam

613 bronze badges

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

Comments

Akshat Gupta · Accepted Answer · 2017-08-28 21:12:29Z

0

might be because of this

{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},

This only bablifies .jsx files and excludes node modules, you need to add configuration for .js files also and mention not to go inside node modules while the loader is run as can be seen from your stack trace.

something like

{ test: /\.js?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},

Hope it helps :)

answered Aug 28, 2017 at 21:12

Akshat Gupta

2,1322 gold badges15 silver badges13 bronze badges

Collectives™ on Stack Overflow

Unexpected token . when importing .css file with webpack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related