ember version: 0.2.3
node: 0.12.2
npm: 2.7.6
I ran the commands
ember new app
cd app
npm install --save-dev ember-cli-bootstrap-sass
mv app/styles/app.css app/styles/app.scss
add the line #import: 'bootstrap';
run
ember serve
When the app compiles, I get dist/assets/app.scss (rather than app.css) and all it contains is #import: 'bootstrap';.
What am I missing?
"broccoli-asset-rev": "^2.0.2",
"ember-cli": "0.2.3",
"ember-cli-app-version": "0.3.3",
"ember-cli-babel": "^5.0.0",
"ember-cli-bootstrap-sass": "^0.2.11",
"ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "0.0.8",
"ember-cli-htmlbars": "0.7.4",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-qunit": "0.3.10",
"ember-cli-uglify": "1.0.1",
"ember-data": "1.0.0-beta.16.1",
"ember-export-application-global": "^1.0.2"
The package provides Bootstrap in SASS format. Your app doesn't have a SASS preprocessor, you must add that too.
You could use ember-cli-sass, I'm sure there are other alternatives.
Related
I downloaded my-timer files from Lit playground (https://lit.dev/playground/#sample=docs/what-is-lit)
what I found when I unzip the folder:
my-timer.ts
icons.ts
index.html
package.json
downloaded package.json contains below dependencies:
{ "dependencies": { "lit": "^2.0.0", "#lit/reactive-element": "^1.0.0", "lit-element": "^3.0.0", "lit-html": "^2.0.0" } }
I removed the above package.json and added another package.json file suggested by (https://codelabs.developers.google.com/codelabs/the-lit-path#1) VS Code setup section.
here is my new package.json file (https://gist.github.com/e111077/c9d4512dcc35f483abbebf95da24609b)
also added tsconfig.json file as I am getting errors for typescript.
and also added web-dev-server as suggested.
after doing all the above step I run the below command npm run serve, but nothing is on http://localhost:8000/
I don't know what am I missing?
my latest code is here (https://github.com/abhijeet-shelhalkar/my-timer-lit).
please guide me through the right steps.
and what is wrong in my code?
Is there a way to install EsLint with Yarn Berry with yarn option enableGlobalCache: true in VsCode ?
I installed the ESLint (dbaeumer.vscode-eslint) extension and all dependencies :
"devDependencies": {
"#babel/core": ">=7.12.0 <8.0.0",
"#babel/plugin-proposal-class-properties": ">=7.10.4 <8.0.0",
"#babel/plugin-syntax-dynamic-import": ">=7.8.3 <8.0.0",
"#babel/plugin-transform-runtime": ">=7.12.0 <8.0.0",
"#babel/preset-env": ">=7.12.0 <8.0.0",
"#babel/preset-react": ">=7.10.4 <8.0.0",
"#babel/runtime": ">=7.12.0 <8.0.0",
"babel-eslint": ">=10.1.0",
"babel-loader": ">=8.1.0",
"eslint": "^7.12.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": ">=6.1.0",
"terser-webpack-plugin": ">=4.1.0",
"webpack": ">=5.2.0",
"webpack-cli": ">=4.1.0"
}
If I do a yarn eslint --init and let npm install all node_modules, eslint works but yarn up will erase node_modules and I have to reinstall the modules.
If I don't install the modules :
Error: An error occurred while generating your JavaScript config file. A config file was still generated, but the config file itself may not follow your linting rules.
Error: Cannot read config file: C:\FrontApplication\Abc\Main\Source\myProject\.yarn\$$virtual\eslint-config-airbnb-virtual-094ee35fd8\6\Users\someone\AppData\Local\Yarn\Berry\cache\eslint-config-airbnb-npm-18.2.0-898fc49dc6-6.zip\node_modules\eslint-config-airbnb\index.js
Error: Cannot find module 'C:\Projets\Abc\Main\Source\myProject\.yarn\$$virtual\eslint-config-airbnb-virtual-094ee35fd8\6\Users\someone\AppData\Local\Yarn\Berry\cache\eslint-config-airbnb-npm-18.2.0-898fc49dc6-6.zip\node_modules\eslint-config-airbnb\index.js'
Require stack:
- C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\noop.js
Require stack:
- C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\noop.js
Referenced from: BaseConfig
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.external_module_.Module._resolveFilename (C:\FrontApplication\Abc\Main\Source\myProject\.pnp.js:10974:54)
at resolveFileName (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:29:39)
at resolveFrom (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:43:9)
at module.exports (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:46:41)
at module.exports (C:\Users\someone\AppData\Local\Yarn\Berry\cache\import-fresh-npm-3.2.1-b4f6711244-6.zip\node_modules\import-fresh\index.js:13:19)
at loadJSConfigFile (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:225:16)
at loAbconfigFile (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:308:20)
at ConfigArrayFactory._loAbconfigData (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:608:42)
at ConfigArrayFactory._loadExtendedShareableConfig (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:883:21)
Do not install packages individually
use : yarn dlx #yarnpkg/sdks vscode
https://yarnpkg.com/getting-started/editor-sdks
Global cache works fine afterwards
Current Behavior
I am building my angular project on circleci and it just keeps failing with the following message:
An unhandled exception occurred: Cannot find module
'#babel/compat-data/corejs3-shipped-proposals'
Require stack:
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/node_modules/#babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/#angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js
I am using
{
"#babel/plugin-proposal-numeric-separator": "^7.8.3",
"core-js": "3.2.1",
"tslib": "^1.11.1",
"#babel/compat-data": "~7.8.0",
"#babel/runtime-corejs3": "^7.9.2",
"ts-node": "7.0.0",
"tslint": "5.11.0",
"typescript": "3.5.3",
}
resolutions: {
"#babel/preset-env": "^7.8.7"
}
here is npx nls why #babel/preset-env output:
eleven-app-frontend > #angular-devkit/build-angular > #babel/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
Thank you for reading.
Had the same issue today, so I'm assuming there's something weird with the latest version.
My package.json had the following:
"#babel/compat-data": "~7.9.0"
I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.
There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.
I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "#babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.
These 3 options we came up with so far:
Adapt dependency of babel/preset-env to v7.9.0: "#babel/preset-env": "=7.9.0"
In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
Adding or upgrading "#babel/compat-data": "7.9.0" to devDependencies
The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.
Linked Github issues:
babel - https://github.com/babel/babel/issues/11427
nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057
I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...
Update: After looking through the package-lock file, my solution was to explicitly add "#babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:
"dependencies": {
"#babel/compat-data": "^7.8.6",
...
Same issue.
Solved it by following above advices + removing node_modules (see this github thread):
Added explicitly #babel/compat-data": "7.9.0" to devDependencies
Upgraded node (13.3 to 14.0 in my case)
Had to remove my node_modules folder and re run yarn (or npm)
If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.
It worked for me in my Next.js project.
I upgraded babel 6.x → 7.x but having issues running Webpack.
It is complaining about missing core-js/modules/*.
My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.
There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but Styleguidist does not.
The error when running Styleguidist with webpack:
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'
/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js:
import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...
package.json
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.4.3",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
}
babel.config.js
module.exports = {
presets: ['#babel/preset-env'],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-transform-react-jsx',
'transform-vue-jsx',
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions"],
comments: false
}
Quoting from Babel 7.4.0 release :
#babel/polyfill isn't a plugin or preset, but a runtime package: if we added an option to switch between core-js#2 and core-js#3, both the package versions would need to be included in your bundle. For this reason, we decided to deprecate it: you now should load core-js for polyfills, and regenerator-runtime/runtime if you are transforming generators:
As you are using 7.4.3 version of babel, #babel/polyfill might not work as expected. Instead please add core-js and regenerator-runtime manually. Quoting from core-js3 release announcement:
Instead of
import "#babel/polyfill";
you should use those 2 lines:
import "core-js/stable";
import "regenerator-runtime/runtime";
Don't forget install those dependencies directly!
npm i --save core-js regenerator-runtime
I had the same issue and as often happens I forgot to have another package installed as:
"#babel/runtime-corejs3": "^7.5.5",
Don't forgot to install it at same level where you have the issue(either dev, local or production) level:
npm i -D(or --save-dev) #babel/runtime-corejs3
So in general this kind of errors happens when there are dependencies update change significantly in the version and aren't backward compatible with previous versions(API changes). Indeed corejs3 isn't at all compatible with corejs2 or older.
I found possible answer.
To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.
To downgrade the version, simply run:
npm i -S core-js#2.5.7
I am attempting to bower install a variety of leaflet packages. Recently, leaflet upgraded to version 1.1.0 from 1.0.3 which broke several supported libraries. Until the community can fix the issues, I need to have leaflet 1.0.3 installed. Below is part of my bower.json:
"dependencies": {
"angular": "~1.5.0",
"angular-cookies": "~1.5.0",
"angular-bootstrap": "~2.4.0",
"angular-ui-router": "^0.3.2",
"angular-animate": "~1.5.8",
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"normalize-css": "~3.0.3",
"modernizr": "~3.2.0",
"angular-smart-table": "^2.1.8",
"angular-websocket": "^2.0.0",
"angular-pageslide-directive": "^2.1.4",
"ng-scrollbars": "^0.0.11",
"angular-bootstrap-lightbox": "^0.12.0",
"angular-leaflet-directive": "leaflet-directive#^0.10.0",
"Leaflet.extra-markers": "^1.0.6",
"esri-leaflet": "2.0.7",
"angular-bootstrap-toggle": "^0.1.2",
"leaflet-search": "2.7.0",
"leaflet-draw": "0.4.9"
},
"devDependencies": {
"angular-mocks": "~1.4.7"
},
"resolutions": {
"angular": "^1.4.10",
"angular-bootstrap": "~2.4.0",
"leaflet": "1.0.3"
}
However, when I try to force the bower installation using the resolutions, I end up with the following:
I have another instance of this application running, and it still has 1.0.3 from a prior build. It is also using leaflet-draw 0.4.9, leaflet-search 2.7.0, etc... so I know that the 1.0.3 version is compatible.
Looking at each individual package, each bower.json only requires that leaflet: "^1.0.0".
Why is the bower resolution being ignored and not installing 1.0.3? Why is it not even giving me the option to choose 1.0.3 from the list? I considered downloading a local copy and doing an override, but that is not a preferred solution.