Unable to load custom *.less style files and custom service.worker.js files in the project created by create-react-app! After using the yarn eject, modify the webpack.config.js, add the worker-loader, and open the worker when running in the browser, it will report an error! #7266
Assignees
Comments
masx200
changed the title
|
Hi @masx200, unfortunately we can't provide a lot of support on custom Webpack configs - as you can imagine, there are an infinite number of possibilities here. However, if you can fill in the issue template, we can try to help out on this issue. |
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
publicPath: 'http://localhost:3000',
globalObject: 'this'
}, |
|
More info about the root cause of this error: webpack-contrib/worker-loader#174 |
|
Once you eject, you'll need to deal with any changes you made as a result. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Unable to load custom *.less style files and custom service.worker.js files in the project created by create-react-app!
After using the yarn eject, modify the webpack.config.js, add the worker-loader, and open the worker when running in the browser, it will report an error!
Unable to load custom less style files and custom service.worker.js files in the project created by create-react-app!
After using the yarn eject, modify the webpack.config.js, add the worker-loader, and open the worker when running in the browser, it will report an error!
The error is as follows:
Error: Uncaught ReferenceError: window is not defined
Http://localhost:3000/service-worker-mythread1-bigint.worker.df8d79f899902f2bf4e9.worker.js
There is no window object in the environment where the service worker is running. The global object is WorkerGlobalScope!
package.json
{ "name": "react-my-app-router", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "^7.4.5", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.0.0", "@svgr/webpack": "^4.3.0", "@typescript-eslint/eslint-plugin": "^1.10.2", "@typescript-eslint/parser": "^1.10.2", "ansi-regex": "^4.1.0", "babel-eslint": "^10.0.2", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", "babel-plugin-named-asset-import": "^0.3.2", "babel-preset-react-app": "^9.0.0", "big-integer": "^1.6.44", "bootstrap": "^4.3.1", "camelcase": "^5.2.0", "case-sensitive-paths-webpack-plugin": "2.2.0", "chalk": "^2.4.2", "css-loader": "^3.0.0", "dotenv": "^8.0.0", "dotenv-expand": "^5.1.0", "eslint": "^6.0.0", "eslint-config-react-app": "^4.0.1", "eslint-loader": "2.1.2", "eslint-plugin-flowtype": "^3.10.5", "eslint-plugin-import": "^2.17.3", "eslint-plugin-jsx-a11y": "6.2.1", "eslint-plugin-react": "^7.13.0", "eslint-plugin-react-hooks": "^1.5.0", "fast-xml-parser": "^3.12.16", "file-loader": "^4.0.0", "fs-extra": "^8.0.1", "html-webpack-plugin": "^4.0.0-beta.5", "identity-obj-proxy": "3.0.0", "is-wsl": "^2.0.0", "jest": "^24.8.0", "jest-environment-jsdom-fourteen": "0.1.0", "jest-resolve": "^24.8.0", "jest-watch-typeahead": "^0.3.1", "jquery": "^3.4.1", "json-parse-better-errors": "^1.0.2", "less": "^3.9.0", "mini-css-extract-plugin": "^0.7.0", "optimize-css-assets-webpack-plugin": "5.0.1", "pnp-webpack-plugin": "^1.5.0", "popper.js": "^1.15.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", "postcss-normalize": "^8.0.1", "postcss-preset-env": "6.6.0", "postcss-safe-parser": "4.0.1", "react": "^16.8.6", "react-app-polyfill": "^1.0.1", "react-dev-utils": "^9.0.1", "react-dom": "^16.8.6", "react-router-dom": "^5.0.1", "resolve": "^1.11.1", "sass-loader": "7.1.0", "semver": "^6.1.1", "style-loader": "0.23.1", "terser-webpack-plugin": "^1.3.0", "ts-pnp": "1.1.2", "typescript": "^3.5.2", "url-loader": "^2.0.0", "webpack": "4.35.0", "webpack-dev-server": "3.7.2", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "^4.3.1", "worker-loader": "^2.0.0", "less-loader": "^5.0.0" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts" ], "setupFiles": [ "react-app-polyfill/jsdom" ], "setupFilesAfterEnv": [], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}" ], "testEnvironment": "jest-environment-jsdom-fourteen", "transform": { "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$" ], "modulePaths": [], "moduleNameMapper": { "^react-native$": "react-native-web", "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node" ], "watchPlugins": [ "jest-watch-typeahead/filename", "jest-watch-typeahead/testname" ] }, "babel": { "presets": [ "react-app", "@babel/preset-react", [ "@babel/preset-env", { "targets": { "edge": "18", "firefox": "66", "chrome": "75" } } ] ] }, "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).", "main": "index.js", "devDependencies": {}, "author": "masx200 <34191203+masx200@users.noreply.github.com>", "license": "ISC" }The text was updated successfully, but these errors were encountered: