react-date-picker: Webpack compilation error: Unexpected token . on ".react-calendar"
Hey guys, I recently upgraded to React 16, in a project based off of an earlier version of React Starter Kit. this lead me to upgrade react-date-picker
which I am now getting the following error:
C:\workspace\cand-portal-front\node_modules\react-calendar\dist\Calendar.css:1
(function (exports, require, module, __filename, __dirname) { .react-calendar {
^
SyntaxError: Unexpected token .
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\workspace\cand-portal-front\node_modules\react-date-picker\dist\entry.js:7:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
Looks like it could be similar to whats expressed here: https://github.com/reactGo/reactGo/issues/850#issuecomment-299417219
my full webpack config is:
import path from 'path';
import webpack from 'webpack';
import extend from 'extend';
import AssetsPlugin from 'assets-webpack-plugin';
const isDebug = !process.argv.includes('--release');
const isVerbose = process.argv.includes('--verbose');
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
context: path.resolve(__dirname, '../src'),
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, '../src'),
],
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: isDebug,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
// Latest stable ECMAScript features
// https://github.com/babel/babel/tree/master/packages/babel-preset-latest
'latest',
// Experimental ECMAScript proposals
// https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0
'stage-0',
// JSX, Flow
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
'react',
...isDebug ? [] : [
// Optimize React code for the production build
// https://github.com/thejameskyle/babel-react-optimize
'react-optimize',
],
],
plugins: [
// Externalise references to helpers and builtins,
// automatically polyfilling your code without polluting globals.
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime
'transform-runtime',
...!isDebug ? [] : [
// Adds component stack to warning messages
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source
'transform-react-jsx-source',
// Adds __self attribute to JSX which React will use for some warnings
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
'transform-react-jsx-self',
],
],
},
},
{
test: /\.css/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({
// CSS Loader https://github.com/webpack/css-loader
importLoaders: 1,
sourceMap: isDebug,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: isDebug ? '[name]-[local]-[hash:base64:5]' : '[hash:base64:5]',
// CSS Nano http://cssnano.co/options/
minimize: !isDebug,
})}`,
'postcss-loader?pack=default',
],
},
{
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({ sourceMap: isDebug, minimize: !isDebug })}`,
'postcss-loader?pack=sass',
'sass-loader',
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.graphqls$/,
loader: 'raw-loader',
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
query: {
name: isDebug ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
query: {
name: isDebug ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
},
},
],
},
resolve: {
root: path.resolve(__dirname, '../src'),
modulesDirectories: ['node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
},
cache: isDebug,
debug: isDebug,
stats: {
colors: true,
reasons: isDebug,
hash: isVerbose,
version: isVerbose,
timings: true,
chunks: isVerbose,
chunkModules: isVerbose,
cached: isVerbose,
cachedAssets: isVerbose,
},
// The list of plugins for PostCSS
// https://github.com/postcss/postcss
postcss(bundler) {
return {
default: [
// Transfer @import rule by inlining content, e.g. @import 'normalize.css'
// https://github.com/jonathantneal/postcss-partial-import
require('postcss-partial-import')({ addDependencyTo: bundler }),
// Allow you to fix url() according to postcss to and/or from options
// https://github.com/postcss/postcss-url
require('postcss-url')(),
// W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
// https://github.com/postcss/postcss-custom-properties
require('postcss-custom-properties')(),
// W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
// https://github.com/postcss/postcss-custom-media
require('postcss-custom-media')(),
// CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
// https://github.com/postcss/postcss-media-minmax
require('postcss-media-minmax')(),
// W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
// https://github.com/postcss/postcss-custom-selectors
require('postcss-custom-selectors')(),
// W3C calc() function, e.g. div { height: calc(100px - 2em); }
// https://github.com/postcss/postcss-calc
require('postcss-calc')(),
// Allows you to nest one style rule inside another
// https://github.com/jonathantneal/postcss-nesting
require('postcss-nesting')(),
// Unwraps nested rules like how Sass does it
// https://github.com/postcss/postcss-nested
require('postcss-nested')(),
// W3C color() function, e.g. div { background: color(red alpha(90%)); }
// https://github.com/postcss/postcss-color-function
require('postcss-color-function')(),
// Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
// https://github.com/iamvdo/pleeease-filters
require('pleeease-filters')(),
// Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
// https://github.com/robwierzbowski/node-pixrem
require('pixrem')(),
// W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
// https://github.com/postcss/postcss-selector-matches
require('postcss-selector-matches')(),
// Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
// https://github.com/postcss/postcss-selector-not
require('postcss-selector-not')(),
// Postcss flexbox bug fixer
// https://github.com/luisrudge/postcss-flexbugs-fixes
require('postcss-flexbugs-fixes')(),
// Add vendor prefixes to CSS rules using values from caniuse.com
// https://github.com/postcss/autoprefixer
require('autoprefixer')(),
],
sass: [
require('autoprefixer')(),
],
};
},
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = extend(true, {}, config, {
entry: './client.js',
output: {
filename: isDebug ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
chunkFilename: isDebug ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
},
target: 'web',
plugins: [
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
'process.env.BROWSER': true,
__DEV__: isDebug,
}),
// Emit a file with assets paths
// https://github.com/sporto/assets-webpack-plugin#options
new AssetsPlugin({
path: path.resolve(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
// Assign the module and chunk ids by occurrence count
// Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
new webpack.optimize.OccurrenceOrderPlugin(true),
...isDebug ? [] : [
// Search for equal or similar files and deduplicate them in the output
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
new webpack.optimize.DedupePlugin(),
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
warnings: isVerbose,
unused: true
},
}),
],
],
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: isDebug ? 'source-map' : false,
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = extend(true, {}, config, {
entry: './server.js',
output: {
filename: '../../server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
/^\.\/assets$/,
(context, request, callback) => {
const isExternal =
request.match(/^[@a-z][a-z/.\-0-9]*$/i) &&
!request.match(/\.(css|less|scss|sss)$/i);
callback(null, Boolean(isExternal));
},
],
plugins: [
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
'process.env.BROWSER': false,
__DEV__: isDebug,
}),
// Adds a banner to the top of each generated chunk
// https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
// Do not create separate chunks of the server bundle
// https://webpack.github.io/docs/list-of-plugins.html#limitchunkcountplugin
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
});
export default [clientConfig, serverConfig];
P.S. Not sure if I should be filing this issue with you guys or react-calendar
Thanks!
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 15 (3 by maintainers)
Similar
Unexpected token . on ".react-calendar"
issue with next.js. It’s set up to take CSS using@zeit/next-css
which worked for Ant Design components. Used @allpwrfulroot steps noted earlier works as temporary workaround:import DatePicker from 'react-date-picker/dist/entry.nostyle';
import '../../node_modules/react-date-picker/dist/DatePicker.css';
import '../../node_modules/react-calendar/dist/Calendar.css';
Same. Using NextJS with next-css, and everything else has been working well. Commenting out both
require('./files.css');
lines innode_modules/react-date-picker/dist/entry.js
lets the page build, and importing the DatePicker and Calendar.css files manually gives the desired date-picking result?If that’s the issue with running Jest, then mocking style files should help:
where styleMock is simply:
@brian-kilpatrick, we had this same issue as well. I think this is a test configuration issue rather than an issue with
react-date-picker
. Assuming you’re using jest since you’re project is based onreact-starter-kit
. https://facebook.github.io/jest/docs/en/webpack.html Mocking(s?css|less)
files resolved this issue for us.I had the same problem in next.js… interestingly I didn’t run into this with
wojtekmaj/react-calendar
. Not ideal, but importing the.nostyle
version worked for me as mentioned in this comment: https://github.com/wojtekmaj/react-date-picker/issues/68#issuecomment-462430601