ukrbublik / react-awesome-query-builder

User-friendly query builder for React
https://ukrbublik.github.io/react-awesome-query-builder
MIT License
1.97k stars 494 forks source link

Building Issue #34

Closed bhagayshriajmera closed 4 years ago

bhagayshriajmera commented 6 years ago

I am getting below error after importing component in application

node_modules\antd\lib\style\index.css:12 SyntaxError: Unexpected token { at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (node_modules\antd\lib\col\style\css.js:3:1)

bhagayshriajmera commented 6 years ago

Below are my package.json dependencies

"devDependencies": { "@sketchpixy/just-wait": "^1.0.5", "app-root-path": "^2.0.1", "async": "^2.5.0", "autoprefixer": "^6.3.6", "babel-core": "^6.10.4", "babel-loader": "^6.2.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.9.0", "babel-preset-es2015": "^6.9.0", "babel-preset-es2015-loose": "^7.0.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "babel-relay-plugin-loader": "^0.9.0", "bless-webpack-plugin": "^1.0.0", "chai": "^4.1.2", "chai-http": "^4.0.0", "check-types": "^7.3.0", "chokidar": "^1.5.2", "concurrently": "^2.1.0", "cross-env": "^1.0.8", "css-loader": "^0.23.1", "deepmerge": "^0.2.10", "expect": "^21.1.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "isomorphic-style-loader": "^1.0.0", "jsdom": "^9.2.1", "json-loader": "^0.5.4", "knex": "^0.13.0", "loader-utils": "^0.2.15", "mocha": "^3.0.2", "moment": "^2.18.1", "moment-timezone": "^0.5.13", "ncp": "^2.0.0", "node-sass": "^3.8.0", "nodemailer": "^4.1.0", "npm-run-all": "^2.2.0", "npm-watch": "^0.1.4", "null-loader": "^0.1.1", "pg": "^7.3.0", "postcss-loader": "^0.9.1", "properties-reader": "0.0.15", "raw-loader": "^0.5.1", "rimraf": "^2.5.2", "rtlcss": "^2.0.5", "sass-loader": "^3.2.1", "script-loader": "^0.7.0", "style-loader": "^0.13.1", "typecast": "0.0.1", "uglify-loader": "^1.3.0", "url-loader": "^0.5.7", "validator": "^8.2.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1", "winston": "^2.3.1" }, "dependencies": { "@sketchpixy/rubix": "^2.0.0", "apn": "^2.2.0", "babel": "^6.3.26", "babel-cli": "^6.10.1", "babel-eslint": "^5.0.0-beta6", "bcrypt": "^1.0.3", "bookshelf-page": "^0.3.2", "chai": "^4.1.2", "chai-http": "^4.0.0", "check-types": "^7.3.0", "classnames": "^2.2.5", "compression": "^1.6.2", "connect-redis": "^3.3.2", "cookie-parser": "^1.4.3", "downloadjs": "^1.4.7", "expect": "^21.1.0", "express": "^4.14.0", "express-session": "^1.15.6", "flat": "^4.0.0", "foreach": "^2.0.5", "fs": "0.0.1-security", "google-libphonenumber": "^3.0.10", "html-pdf": "^2.2.0", "https": "^1.0.0", "jsdom": "^9.12.0", "jsonwebtoken": "^8.1.0", "knex": "^0.13.0", "lodash": "^4.17.4", "lodash-fp": "^0.10.4", "merge-json": "0.1.0-b.3", "mime": "^2.0.3", "mocha": "^3.5.0", "mocha-testdata": "^1.2.0", "multer": "^1.3.0", "node-gcm": "^0.14.10", "node-schedule": "^1.2.5", "path": "^0.12.7", "pg": "^7.3.0", "properties-reader": "0.0.15", "pug": "^2.0.0-beta3", "react": "^15.3.0", "react-accessible-accordion": "^2.2.1", "react-async-script": "^0.9.1", "react-big-calendar": "^0.17.0", "react-bootstrap-button-loader": "^1.0.11", "react-bootstrap-datetimepicker": "0.0.22", "react-bootstrap-table": "^4.0.6", "react-datepicker": "^1.0.4", "react-dates": "^16.5.0", "react-dom": "^15.3.0", "react-google-recaptcha": "^0.9.7", "react-hot-loader": "^3.0.0-beta.2", "react-input-range": "^1.3.0", "react-jsonschema-form": "file:./packages/react-jsonschema-form", "react-number-format": "^3.1.3", "react-rating": "^1.1.2", "react-router": "^3.0.0-alpha.3", "react-scroll-to-component": "^1.0.2", "react-select": "^1.0.0-rc.10", "react-spinners": "^0.2.5", "react-stripe-elements": "^1.2.1", "redis-server": "^1.1.0", "redlock": "^3.1.1", "source-map-support": "^0.4.0", "spade": "file:../spadeFramework", "stripe": "^5.3.0", "traverse": "^0.6.6", "tween": "^0.9.0", "typecast": "0.0.1", "underscore.string": "^3.3.4", "underscore.string.fp": "^1.0.4", "unflatten": "^1.0.4", "vm": "^0.1.0", "winston": "^2.3.1", "xlsx": "^0.12.7", "zipcode-to-timezone": "0.0.9" }

My webpack config is

module.exports = { module: { loaders: [ { test: /.jsx?$/, exclude: /node_modules|bower_components/, loader: 'babel' }, { test: /.json$/, loader: 'json' }, { test: /.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=public&name=/[path][name].[ext]"], exclude: /node_modules/ }, { test: /.woff(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]" }, { test: /.woff2(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=./fonts/[hash].[ext]" }, { test: /.ttf(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=./fonts/[hash].[ext]" }, { test: /.eot(\?v=\d+.\d+.\d+)?$/, loader: "file&name=./fonts/[hash].[ext]" }, { test: /.svg(\?v=\d+.\d+.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=./fonts/[hash].[ext]" }, { test: /.css$/, loader: "style!css" }, { test: /.scss$/, loader: "style!css!sass" }, { test: /.less$/, loader: "style!css!less" } ] }, progress: true, resolve: { modulesDirectories: [ "client", "sass", "public", "node_modules", dirname, dirname + '/node_modules', ], extensions: ["", ".json", ".js",".jsx"] } };

ukrbublik commented 6 years ago

Hmm, dunno. Looks like problem with css loader in your project, not in current lib.

vaishaliakhare commented 6 years ago

I had faced similar issue, I was missing less loader in my web-pack after adding less loader in my web-pack the issue was resolved, one more thing I installed antd & made include of antd in the config file, not sure if antd include is needed or not...

import en_US from 'antd/lib/locale-provider/en_US'

See if this helps.

On Tue, Apr 17, 2018 at 3:58 AM, bhagayshriajmera notifications@github.com wrote:

I am getting below error after importing component in application

node_modules\antd\lib\style\index.css:12 SyntaxError: Unexpected token { at createScript (vm.js:56:10) at Object.runInThisContext (vm.js:97:10) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at Object. (node_modules\antd\lib\col\style\css.js:3:1)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ukrbublik/react-awesome-query-builder/issues/34, or mute the thread https://github.com/notifications/unsubscribe-auth/AFvDLQrby6_Jv10IquSRAlft1i34S_gTks5tpcrbgaJpZM4TYFNJ .

bhagayshriajmera commented 6 years ago

Thanks Vaishali, Will check with this solution

bhagayshriajmera commented 6 years ago

@vaishaliakhare I have added less loader and antd as well but still I am facing same issue

bhagayshriajmera commented 6 years ago

@ukrbublik yes its right but as i am facing same issue I am not able to proceed further