It’s a weird error and i can’t figure out what is causing it.
I have an app with patternfly react-core 4.32.1 and react-topology 4.5.14. Yesterday i installed a package called react-spinners and it requires emotionJS. After installing it, i got this error:
ERROR in ./node_modules/@patternfly/react-topology/node_modules/@patternfly/react-styles/css/components/Topology/topology-components.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
And it triggers with a bunch of CSS files. The thing is, i just deleted the project and cloned from my repo again. My last commit was made weeks before, and it was working when I did it, even so, if I clone again, the error appears.
I tested it on another machine with a different OS, and I keep getting the error.
My package.json:
"name": "patternfly-seed",
"version": "0.0.1",
"description": "An open source build scaffolding utility for web apps.",
"main": "server.js",
"repository": "https://github.com/patternfly/patternfly-react-seed.git",
"license": "MIT",
"private": true,
"scripts": {
"prebuild": "npm run clean",
"dr:surge": "node dr-surge.js",
"build": "webpack --config webpack.prod.js && npm run dr:surge",
"start": "node server.js",
"start:dev": "webpack-dev-server --hot --color --progress --info=true --config webpack.dev.js",
"test": "jest",
"eslint": "eslint --ext .tsx,.js ./src/",
"lint": "npm run eslint",
"format": "prettier --check --write ./src/**/*.{tsx,ts}",
"type-check": "tsc --noEmit",
"ci-checks": "npm run type-check && npm run lint && npm run test",
"build:bundle-profile": "webpack --config webpack.prod.js --profile --json > stats.json",
"bundle-profile:analyze": "npm run build:bundle-profile && webpack-bundle-analyzer ./stats.json",
"clean": "rimraf dist",
"storybook": "start-storybook -p 6006",
"build:storybook": "build-storybook"
},
"devDependencies": {
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-info": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^25.2.3",
"@types/react-router-dom": "^5.1.5",
"@types/victory": "^33.1.4",
"@typescript-eslint/eslint-plugin": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"css-loader": "^3.5.3",
"dotenv-webpack": "^1.8.0",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.1.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"imagemin": "^7.0.0",
"jest": "^26.0.1",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^2.0.5",
"prop-types": "^15.6.1",
"raw-loader": "^4.0.1",
"react-axe": "^3.4.1",
"react-docgen-typescript-loader": "^3.7.2",
"react-router-dom": "^5.2.0",
"regenerator-runtime": "^0.13.5",
"rimraf": "^3.0.2",
"style-loader": "^1.2.1",
"svg-url-loader": "^6.0.0",
"terser-webpack-plugin": "^3.0.2",
"ts-jest": "^26.1.0",
"ts-loader": "^7.0.5",
"tsconfig-paths-webpack-plugin": "^3.2.0",
"tslib": "^2.0.0",
"typescript": "^3.9.3",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.4"
},
"dependencies": {
"@patternfly/react-core": "^4.32.1",
"@patternfly/react-icons": "^4.5.0",
"@patternfly/react-styles": "^4.5.0",
"@patternfly/react-topology": "^4.5.14",
"@react-hook/mouse-position": "^4.1.0",
"d3": "^5.5.0",
"express": "^4.17.1",
"react": "^16.13.1",
"react-d3-graph": "^2.5.0",
"react-d3-tooltip": "^1.4.14",
"react-dom": "^16.13.1",
"react-router-last-location": "^2.0.1",
"react-spinners": "^0.9.0"
}
}