Related
The problem occurs in a React app. When I build it with react-scripts locally, everything is built perfectly and styles are the way they should be. But when the app is built with Docker, the values of some properties in styles are replaced with CSS variables that are not defined. The version of Node.js used for creating the Docker container is exactly the same as on a local machine. Also bootstrap is used in the React app. Previously there wasn't such weird behavior and everything was built perfectly and no changed to styles were made.
Here's package.json:
{
"name": "minible-react",
"version": "1.0.0",
"private": true,
"dependencies": {
"#capaj/react-select-timezone": "^3.0.0",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.0.5",
"#mui/lab": "^5.0.0-alpha.51",
"#mui/material": "^5.0.4",
"#mui/styles": "^5.0.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/date-fns": "^2.6.0",
"#visx/responsive": "^2.1.0",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.3",
"availity-reactstrap-validation": "^2.7.0",
"axios": "^0.21.0",
"bootstrap": "^5.0.0-beta2",
"classnames": "^2.3.1",
"clsx": "^1.1.1",
"date-fns": "^2.23.0",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"husky": "^7.0.2",
"i18next": "^19.8.4",
"i18next-browser-languagedetector": "^6.0.1",
"leaflet": "^1.7.1",
"lint-staged": "^11.2.3",
"lodash": "^4.17.21",
"lodash.clonedeep": "^4.5.0",
"metismenujs": "^1.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.0.0",
"prop-types": "^15.7.2",
"qs": "^6.11.0",
"query-string": "^7.0.1",
"react": "^17.0.2",
"react-bootstrap-sweetalert": "^5.2.0",
"react-color": "^2.19.3",
"react-countup": "^4.3.3",
"react-csv": "^2.0.3",
"react-date-range": "^1.3.0",
"react-datepicker": "^3.8.0",
"react-dom": "^17.0.1",
"react-i18next": "^11.8.5",
"react-icons": "^4.4.0",
"react-infinite-scroll-component": "^6.1.0",
"react-input-mask": "^2.0.4",
"react-modal": "^3.14.4",
"react-moment": "^1.1.1",
"react-phone-input-2": "^2.14.0",
"react-places-autocomplete": "^7.3.0",
"react-redux": "^7.2.2",
"react-redux-toastr": "7.5.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-select": "^3.2.0",
"react-select-async-paginate": "^0.6.0",
"react-slider-modal": "^1.3.1",
"react-slideshow-image": "^3.6.0",
"react-table": "^7.7.0",
"react-times": "^3.1.12",
"react-timezone-select": "^1.0.2",
"react-toastr": "^3.0.0",
"react-transition-group": "^4.4.2",
"reactstrap": "^8.9.0",
"recharts": "^2.1.0",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"save-dev": "0.0.1-security",
"simplebar-react": "^2.3.0",
"toastr": "^2.1.4",
"uuid": "^8.3.2",
"web-vitals": "^0.2.4",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#iconify-icons/bi": "^1.1.5",
"#iconify/react": "^1.1.4",
"#visx/mock-data": "^2.1.0",
"animation.css": "^0.1.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.26.1",
"prettier": "^2.4.1",
"pretty-quick": "^3.1.1",
"redux-devtools": "^3.7.0"
}
}
Styles of component after local build
Styles of component after Docker build (all those variables are not defined)
I'll appreciate any ideas why it may be happening and how I could solve it.
Ive had the same issue and this solution working for me: unistall the node and Install it again.
When i deploy my vue application with firebase deploy i get a error in de console. I only use the firebase firestore and deployment.
t.INTERNAL.registerService is not a function
has someone a solution?
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/vue-fontawesome": "^0.1.6",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-firestore": "^0.3.22",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.3",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.1",
"vuexfire": "^3.0.0-alpha.18"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.0",
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-plugin-eslint": "^3.10.0",
"#vue/cli-plugin-pwa": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"tailwindcss": "^1.1.2",
"vue-template-compiler": "^2.6.10"
}
That particular error is usually a problem in the import of the firebase/app library dependency.
Try running the following command and it should fix the issue:
npm install #firebase/app --save
I use in my project react template - React Isomorphic Redux Admin Dashboard
Try to compile the react app with this template:
1. npm install yarn install
2. npm run build dev or yarn run build
and every time I get this error when use yarn for instance:
yarn run v1.13.0
$ node build && node copy
Creating an optimized production build...
Failed to compile.
./node_modules/nprogress/nprogress.css
Module build failed: BrowserslistError: Unknown browser query dead
at Array.forEach ()
BrowserslistError when try to compile the react app with yarn
When I use npm I get the same error, but with different ....css file.
Here img of error with npm
BrowserslistError when try to compile the react app with npm
isomorphic#2.9.3 build /Users/romank/code/instagram/public
node build && node copy "dev"
Creating an optimized production build...
Failed to compile.
./src/containers/App/global.css
Module build failed: BrowserslistError: Unknown browser query dead
at Array.forEach ()
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! isomorphic#2.9.3 build: node build && node copy "dev"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the isomorphic#2.9.3 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/romank/.npm/_logs/2019-02-21T15_10_28_618Z-debug.log
Here is my package.json :
{
"name": "isomorphic",
"version": "2.9.3",
"private": true,
"dependencies": {
"antd": "^3.6.5",
"antd-local-icon": "^0.1.3",
"auth0-lock": "^11.1.2",
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "^8.0.2",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"card-react": "^1.2.7",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"chart.js": "^2.5.0",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cp": "^0.2.0",
"cp-cli": "^1.1.2",
"cp-file": "^6.0.0",
"cp-folder": "^1.0.8",
"css-loader": "0.28.7",
"d3-shape": "^1.0.6",
"dotenv": "4.0.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-react-intl": "^1.4.8",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"express": "^4.15.3",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"firebase": "^5.2.0",
"fixed-data-table-2": "^0.8.8",
"frappe-charts": "^0.0.8",
"fs-extra": "^7.0.0",
"globalize": "^1.2.3",
"history": "^4.6.3",
"html-webpack-plugin": "2.29.0",
"immutable": "^3.8.1",
"immutable-devtools": "^0.0.7",
"jest": "20.0.4",
"js-info-bubble": "git+https://github.com/RedQ/js-info-bubble.git",
"js-rich-marker": "^1.1.2",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"nprogress": "^0.2.0",
"object-assign": "4.1.1",
"polished": "^1.7.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-inline-rtl": "^0.9.8",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.5.10",
"raf": "3.4.0",
"react": "^16.2.0",
"react-addons-shallow-compare": "^15.5.2",
"react-big-calendar": "^0.17.0",
"react-chartjs-2": "^2.5.7",
"react-codemirror": "^1.0.0",
"react-count-down": "^1.1.0",
"react-dates": "12.2.4",
"react-dev-utils": "^4.2.1",
"react-dnd": "^2.3.0",
"react-dnd-html5-backend": "^2.3.0",
"react-dom": "^16.2.0",
"react-drawer": "^1.2.5",
"react-dropzone-component": "^3.0.0",
"react-element-resize": "^0.2.1",
"react-error-overlay": "1.0.6",
"react-flexbox-grid": "^2.0.0",
"react-flip-move": "^2.9.2",
"react-google-charts": "^1.6.0",
"react-grid-layout": "^0.16.2",
"react-instantsearch": "^4.0.7",
"react-intl": "^2.3.0",
"react-ladda": "^5.0.6",
"react-motion-drawer": "^2.1.7",
"react-perfect-scrollbar": "^0.2.0",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-sidebar": "^2.3.2",
"react-smooth-scrollbar": "^8.0.6",
"react-speech-recognition": "^1.0.4",
"react-tag-input": "^4.7.2",
"react-tags": "^0.2.2",
"react-test-renderer": "^16.2.0",
"react-throttle": "^0.3.0",
"react-trend": "^1.2.3",
"react-vis": "^1.7.2",
"react-window-size-listener": "^1.0.10",
"react-yandex-maps": "^2.3.0",
"react-youtube": "^7.4.0",
"recharts": "^1.0.0-alpha.2",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-saga-firebase": "0.10.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.0",
"rheostat": "^2.1.1",
"rich-marker": "^0.0.1",
"smooth-scrollbar": "^8.2.5",
"style-loader": "0.19.0",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"sw-precache-webpack-plugin": "0.11.4",
"uppy": "^0.30.0",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"yandex-map-react": "^1.1.1"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-polyfill": "^6.26.0",
"enzyme": "^3.2.0",
"enzyme-to-json": "^3.3.0",
"fs-extra": "^7.0.0",
"google-maps-react": "^1.1.0",
"leaflet": "^1.2.0",
"leaflet-routing-machine": "^3.2.5",
"leaflet.markercluster": "^1.0.6",
"mv": "^2.1.1",
"react-app-rewired": "1.4.0",
"redux-mock-store": "^1.2.3",
"webpack-php-loader": "^0.5.0"
},
"scripts": {
"build": "node build && node copy"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
How can I fix this error? Did anyone face to this problem?
By the way, how do better run the npm and yarn commands with sudo or without?
Thank you.
I am updating one of my projects to use meteor version 1.7 from 1.4 and the following error is happening. I tried to reinstall meteor, downgrading to 1.6 and also added .babelrc file but no luck. I think the error is about the ecmascript and babel-compiler package version because it works fine when it is at version 1.4. Does anyone have idea on how to resolve this problem? Thank you very much!
While processing files with ecmascript (for target os.osx.x86_64):
/Users/lauyi/.meteor/packages/meteor-tool/.1.7.0_3.w8zcf.uowlh++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/compiler-plugin.js:447:61:
Cannot read property 'id' of null
at InputFile.resolve
(/Users/lauyi/.meteor/packages/meteor-tool/.1.7.0_3.w8zcf.uowlh++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/isobuild/compiler-plugin.js:447:61)
at packages/babel-compiler.js:487:23
at Array.some (<anonymous>:null:null)
at requireWithPrefixes (packages/babel-compiler.js:482:26)
at requireWithPath (packages/babel-compiler.js:415:14)
at resolveHelper (packages/babel-compiler.js:387:24)
at packages/babel-compiler.js:360:19
at Array.forEach (<anonymous>:null:null)
at walkHelper (packages/babel-compiler.js:359:10)
at walkBabelRC (packages/babel-compiler.js:340:24)
at BabelCompiler.BCp._inferHelper (packages/babel-compiler.js:442:17)
at BabelCompiler.BCp._inferFromBabelRc (packages/babel-compiler.js:287:14)
at BabelCompiler.BCp.inferExtraBabelOptions (packages/babel-compiler.js:261:10)
at BabelCompiler.BCp.processOneFileForTarget (packages/babel-compiler.js:184:10)
at BabelCompiler.<anonymous> (packages/babel-compiler.js:115:26)
at Array.forEach (<anonymous>:null:null)
at BabelCompiler.BCp.processFilesForTarget (packages/babel-compiler.js:114:14)
This is my package.json
{
"browserslist": [
"last 2 versions",
"> 1%"
],
"dependencies": {
"#babel/runtime": "^7.0.0-beta.53",
"babel-polyfill": "^6.22.0",
"babel-runtime": "^6.20.0",
"browser-compress-image": "^1.0.2",
"datatables.net-bs": "^1.10.15",
"exif-js": "^2.3.0",
"html-purify": "^1.1.0",
"image-compressor": "github:xkeshi/image-compressor",
"intl": "^1.2.5",
"intl-locales-supported": "^1.0.0",
"jquery": "^2.2.4",
"knox": "^0.9.2",
"meteor-node-stubs": "^0.3.3",
"moment": "^2.17.1",
"mongo-xlsx": "^1.0.12",
"open-graph-scraper": "^2.4.2",
"prop-types": "^15.5.8",
"rc-tabs": "^9.1.4",
"react": "^0.14.8",
"react-addons-create-fragment": "^0.14.8",
"react-addons-css-transition-group": "^0.14.8",
"react-addons-linked-state-mixin": "^0.14.8",
"react-addons-perf": "^0.14.8",
"react-addons-pure-render-mixin": "^0.14.8",
"react-addons-test-utils": "^0.14.8",
"react-addons-transition-group": "^0.14.8",
"react-addons-update": "^0.14.8",
"react-autosuggest": "^8.0.0",
"react-avatar-editor": "^9.1.0",
"react-bootstrap-table": "^3.4.6",
"react-categorized-tag-input": "^2.1.2",
"react-dom": "^0.14.8",
"react-dropzone-component": "^1.4.1",
"react-intl": "^2.2.3",
"react-linkify": "^0.2.0",
"react-paginate": "^4.4.3",
"react-player": "^0.20.0",
"react-radio-group": "^3.0.1",
"react-rater": "^0.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.0",
"react-router-scroll": "^0.4.1",
"react-select": "^1.0.0-rc.3",
"react-slick": "^0.14.5",
"react-tabs": "^0.8.2",
"react-toastr": "^2.8.2",
"react-truncate": "^2.1.4",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"request": "^2.81.0",
"simpl-schema": "^1.4.2",
"slick-carousel": "^1.6.0",
"underscore": "^1.8.3",
"uuid": "^3.1.0",
"zxcvbn": "^4.4.1"
},
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-jest": "^20.0.3",
"babel-preset-react": "^6.24.1",
"eslint": "^3.15.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-google": "^0.7.1",
"eslint-plugin-compat": "^1.0.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.9.0",
"jest": "^20.0.4",
"navalia": "^1.2.0",
"react-test-renderer": "^15.6.1",
"stylelint": "^7.10.1",
"stylelint-no-unsupported-browser-features": "^1.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"stylelint": {
"plugins": [
"stylelint-no-unsupported-browser-features"
],
"rules": {
"plugin/no-unsupported-browser-features": true
}
},
"scripts": {
"test": "jest"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"testFileExtensions": [
"js",
"jsx"
],
"transformIgnorePatterns": [
"<rootDir>/node_modules"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/navalia"
],
"moduleFileExtensions": [
"js",
"json",
"jsx"
]
}
}
This is my ./meteor/version
accounts-base#1.4.2
accounts-password#1.5.1
alanning:roles#1.2.16
aldeed:collection2-core#2.1.2
aldeed:tabular#2.1.1
allow-deny#1.1.0
autoupdate#1.4.1
babel-compiler#7.1.1
babel-runtime#1.2.2
base64#1.0.11
binary-heap#1.0.10
blaze#2.3.2
blaze-html-templates#1.1.2
blaze-tools#1.0.10
boilerplate-generator#1.5.0
browser-policy-common#1.0.11
browser-policy-framing#1.1.0
caching-compiler#1.1.12
caching-html-compiler#1.1.3
callback-hook#1.1.0
cfs:access-point#0.1.49
cfs:base-package#0.0.30
cfs:collection#0.5.5
cfs:collection-filters#0.2.4
cfs:data-man#0.0.6
cfs:file#0.1.17
cfs:filesystem#0.1.2
cfs:http-methods#0.0.32
cfs:http-publish#0.0.13
cfs:power-queue#0.9.11
cfs:reactive-list#0.0.9
cfs:reactive-property#0.0.4
cfs:standard-packages#0.5.10
cfs:storage-adapter#0.2.4
cfs:tempstore#0.1.6
cfs:upload-http#0.0.20
cfs:worker#0.1.5
check#1.3.1
coffeescript#1.0.17
cosmos:browserify#0.10.0
dburles:collection-helpers#1.1.0
ddp#1.4.0
ddp-client#2.3.3
ddp-common#1.4.0
ddp-rate-limiter#1.0.7
ddp-server#2.2.0
deps#1.0.12
diff-sequence#1.1.0
dynamic-import#0.4.1
ecmascript#0.11.1
ecmascript-runtime#0.7.0
ecmascript-runtime-client#0.7.1
ecmascript-runtime-server#0.7.0
ejson#1.1.0
email#1.2.3
es5-shim#4.8.0
fortawesome:fontawesome#4.7.0
fourseven:scss#3.13.0
gadicc:blaze-react-component#1.4.1
geojson-utils#1.0.10
hot-code-push#1.0.4
html-tools#1.0.11
htmljs#1.0.11
http#1.4.1
id-map#1.1.0
jcbernack:reactive-aggregate#0.7.0
jquery#1.11.11
juliancwirko:postcss#1.3.0
launch-screen#1.1.1
less#2.7.12
livedata#1.0.18
localstorage#1.2.0
logging#1.1.20
matb33:collection-hooks#0.8.4
mdg:validated-method#1.1.0
mdg:validation-error#0.5.1
meteor#1.9.2
meteor-base#1.4.0
meteorhacks:aggregate#1.3.0
meteorhacks:async#1.0.0
meteorhacks:collection-utils#1.2.0
meteorhacks:npm#1.5.0
minifier-css#1.3.1
minifiers-js#1.1.8-modules.8
minimongo#1.4.4
mobile-experience#1.0.5
mobile-status-bar#1.0.14
modern-browsers#0.1.2
modules#0.12.2
modules-runtime#0.10.2
momentjs:moment#2.8.4
mongo#1.5.1
mongo-dev-server#1.1.0
mongo-id#1.0.7
mongo-livedata#1.0.12
mrt:smart-publish#0.2.1
nilsdannemann:pdfmake#1.0.38
npm-bcrypt#0.9.3
npm-container#1.2.0
npm-mongo#3.0.7
observe-sequence#1.0.16
okgrow:analytics#2.1.3
ordered-dict#1.1.0
percolate:migrations#0.9.8
percolate:synced-cron#1.3.2
promise#0.11.1
raix:eventemitter#0.1.3
random#1.1.0
rate-limit#1.0.9
react#0.14.6
react-meteor-data#0.2.16
react-runtime#0.14.5
reactive-dict#1.2.0
reactive-var#1.0.11
reload#1.2.0
retry#1.1.0
routepolicy#1.0.13
schat:client-blaze#1.2.0
schat:client-core#1.2.1
service-configuration#1.0.11
session#1.1.7
sha#1.0.9
shell-server#0.3.1
socket-stream-client#0.2.2
spacebars#1.0.15
spacebars-compiler#1.1.3
srp#1.0.10
standard-minifiers-js#1.0.3-modules.8
templating#1.3.2
templating-compiler#1.3.3
templating-runtime#1.3.2
templating-tools#1.1.2
tmeasday:check-npm-versions#0.3.2
tracker#1.2.0
tsega:bootstrap3-datetimepicker#4.17.37_1
twbs:bootstrap#3.3.6
ui#1.0.13
underscore#1.0.10
url#1.2.0
webapp#1.6.2
webapp-hashing#1.0.9
Using yarn install instead of npm install solved the problem.
I'm having issues getting CSS modules to work in Webpack. I'm trying to use react-day-picker with custom styles. When I log the imported CSS module to see the class name mapping I get undefined. The DayPicker component is not receiving any of the classNames. My Webpack loaders config:
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } },
"sass-loader"
],
exclude: ["node_modules"]
},
// ...
{
test: /\.css$/,
loaders: [
"style-loader",
{ loader: "css-loader", options: { modules: true } }
],
exclude: ["node_modules"]
},
// ...
The way I'm trying to import the css module:
import calendarStyles from './cardCalendar.css';
const Calendar = props => {
console.log("CALENDAR STYLES", calendarStyles);
return(
<div className="profile-component-calendar">
<div className="component-title">Calendar</div>
{props.calendarDropdownConfig.items && (
<CalendarInfoDropdown {...props.calendarDropdownConfig} />
)}
<div id="calendar-card-component" style={someStyle}>
<DayPicker
{...props}
classNames={calendarStyles}
showWeekNumbers
firstDayOfWeek={1}
/>
</div>
</div>
)
} ;
Project dependencies:
"dependencies": {
"#navjobs/upload": "^3.0.7",
"body-parser": "^1.17.2",
"bootstrap": "^3.3.7",
"cfenv": "^1.0.4",
"change-case": "^3.0.1",
"docxtemplater": "^3.1.7",
"dotenv": "^4.0.0",
"dotenv-webpack": "^1.5.4",
"express": "^4.15.4",
"express-session": "^1.15.5",
"file-saver": "^1.3.3",
"helmet": "^3.8.1",
"jquery": "^3.2.1",
"jquery-ui": "^1.12.1",
"jszip": "^2.6.1",
"mathjs": "^3.16.3",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"node-sass": "^4.5.3",
"prop-types": "^15.5.10",
"rc-slider": "^8.3.1",
"rc-tooltip": "^3.4.8",
"react": "^16.2.0",
"react-addons-shallow-compare": "^15.6.2",
"react-autocomplete": "^1.7.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-daterangepicker": "^3.4.1",
"react-day-picker": "^7.0.7",
"react-dom": "^16.2.0",
"react-dropzone": "^4.0.0",
"react-images": "^0.5.5",
"react-intl": "^2.3.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-select": "^1.0.0-rc.5",
"react-spinkit": "^3.0.0",
"react-stepzilla": "^4.6.3",
"react-toggle": "^4.0.2",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
"sass-loader": "^6.0.2",
"styled-components": "^2.1.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.25.0",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.28.4",
"enzyme": "^2.9.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-config-prettier": "^2.3.0",
"eslint-import-resolver-webpack": "^0.8.3",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-jsx-a11y": "^5.0.1",
"eslint-plugin-prettier": "^2.2.0",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"flow-bin": "^0.56.0",
"html-webpack-plugin": "^2.30.1",
"image-webpack-loader": "^3.3.1",
"immutability-helper": "^2.3.1",
"imports-loader": "^0.7.1",
"jest-cli": "^21.1.0",
"json-loader": "^0.5.7",
"lodash": "^4.17.4",
"loglevel": "^1.4.1",
"morgan": "^1.8.2",
"postcss-loader": "^2.0.6",
"prettier": "^1.5.3",
"prettier-eslint": "^6.4.2",
"ramda": "^0.24.1",
"react-addons-test-utils": "^15.6.0",
"react-content-loader": "^1.4.0",
"react-helmet": "^5.2.0",
"react-hot-loader": "^3.0.0-beta.6",
"react-loadable": "^4.0.5",
"react-test-renderer": "^15.6.1",
"regenerator-runtime": "^0.10.5",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"wallaby-webpack": "^0.0.40",
"webpack": "^3.5.4",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.7.1"
},
As far as I can see, I'm doing the import as described in https://github.com/webpack-contrib/css-loader. Can anyone see what I'm doing wrong?
Try this way for className. Div should get profile-component-calendar class style.
<div className={calendarStyles.profile-component-calendar}>