When I try to build my Nuxt.js project for production, I get this error:
Error: Path variable [contenthash:7] not implemented in this context: fonts/[contenthash:7].eot
at fn (/home/mike/job/daily-fashion/node_modules/#nuxt/webpack/node_modules/webpack/lib/TemplatedPathPlugin.js:45:11)
Googling the issue, I found this conversation, in which it's suggested to downgrade Webpack to 4.28 to solve the issue. The problem is, I don't see how to downgrade, given it's an internal dependency of Nuxt.js.
I'm using nuxt#2.11.0. This is how its dependencies appear in package-lock.json:
"#nuxt/webpack": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/#nuxt/webpack/-/webpack-2.11.0.tgz",
"integrity": "sha512/yaT2lonYOQYUrsg==",
"requires": {
....
"webpack": "^4.41.3",
...
},
Any suggestion how to make Nuxt.js used an older version of webpack? Thanks!
For me working this solution in package.json
"nuxt": "2.3.4",
Related
Adding react-native-web package to existing RN app (made with react-native init). Following the setup from this site:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
The project compiles successfully, but in the browser I get a blank white screen and an error that loops:
Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')
I can't find anything about this error, I have traced the relevant files and am not sure how to proceed.
I had the same error message while running test after upgrading react-test-renderer package from v17 to v18. So in my case, I had to downgrade react-test-renderer from v18 to v17 or upgrading react from v17 to v18 also worked to correct this error.
According to this discussion, isBatchingLegacy is a deprecated function in react-test-renderer.
So, I'm not sure about it, because I don't know which packages do you have in your existing RN app, but you can maybe check the packages version you have in order to see if the error could come from here.
I run into the same problem. Make sure all React dependencies are on the same version in your package.json.
"react": "~18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0"
Thanks for this, I just spent 4 hours trying to figure out why I got the same error as you with react-native-testing-library
import { render } from "#testing-library/react-native";
I downgraded the types on my package.json
"devDependencies": {
"#testing-library/react-native": "^9.1.0",
"jest": "26",
...
--"#types/react-test-renderer": "18.0.0",
++"#types/react-test-renderer": "17.0.1",
}
It's working now
I tried to install react-bootstrap and followed these instructions:
https://react-bootstrap.github.io/getting-started/introduction
However after starting the app (simulated device via Android Studio) I receive this error:
error: bundling failed: Error: Unable to resolve module `bootstrap/dist/css/bootstrap.min.css` from `index.js`: bootstrap/dist/css/bootstrap.min.css could not be found within the project.
My dependencies are as follows:
"dependencies": {
"bootstrap": "^4.4.1",
"react": "16.9.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-native": "0.61.5"
And both modules are within node_modules and so is the file bootstrap.min.css.
I tried things like
import 'bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; (should be wrong anyways);
(in index.js and also App.js like mentioned in the instructions)
I also read here:
https://github.com/reactstrap/reactstrap/issues/1325
and here:
Can't resolve '../node_modules/bootstrap/dist/css/bootstrap.min.css'?
but I have the import like in the given answer.
I tried an older version of react-bootstrap and bootstrap and I deleted all node_modules and resinstalled them even though the "missing" file is there.
My project is basically a vanilla react-native project.
I just started with npx react-native init name and tried to add bootstrap, so nothing has changed.
What is the issue here?
Problem is you are trying to use react bootstrap with react-native project.
react-bootstrap : only support react.js projects not in react-native
I've been struggling with this error for a while and I went over different solutions on here as well as Git but just can't seem to get it working.
Error: Module build failed: this.setDynamic is not a function
These are the Babel dependencies I have in my package.json file:
"dependencies": {
"#babel/core": "^7.6.4",
"babel-core": "^7.0.0-bridge.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
}
BeforeI was getting Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" #522 error and then I added babel-core": "^7.0.0-bridge.0. My .babelrc file has:
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
Any help would be much appreciated, thank you.
After being stuck on this for almost 24 hours, I finally found the solution.
Just in case, if you happen to stumble across this due to having the same issue. Please check out vuejs + babel-loader this.setDynamic is not a function. The issue is that the Babel documentation is not very clear. However, you issue should be solved if you follow the suggested answer accurately. Thanks.
I have a ClojureScript project using shadow-cljs. In this project I am using the NPM package #material-ui, which works fine.
Now I would like to use react-swipeable-views. Therefor I have extended my package.json:
"dependencies": {
"#material-ui/core": "^4.5.2",
"#material-ui/icons": "^4.5.1",
"highlight.js": "9.15.10",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-flip-move": "3.0.3",
"react-highlight.js": "1.0.7",
"react-swipeable-views": "0.13.3"
}
When I try to require ["react-swipeable-views" :as sv] I get this error from shadow-cljs:
The required JS dependency "dom-helpers/transition/properties" is not
available, it was required by
"node_modules/react-swipeable-views/lib/SwipeableViews.js".
And in fact, there is no transition directory in node_modules/dom-helpers/. But there is import transitionInfo from 'dom-helpers/transition/properties'; in node_modules/react-swipeable-views/src/SwipeableViews.js.
It looks like a dependency bug in react-swipeable-views, but I am a newbie to NPM.
Any suggestions what the problem is? Or how to debug?
UPDATE
It seams react-swipeable-views depends on the outdated dom-helpers#3.4.0 while shadow-cljs uses the current dom-helpers#5.1.3. See https://github.com/oliviertassinari/react-swipeable-views/issues/542
Is it possible to use both? Or will I have to wait until someone fixes react-swipeable-views?
You correctly identified this is caused by a version conflict.
It is not possible to use both versions, you must resolve this version conflict. You can try installing the older dom-helpers version as the default by adding it to your package.json and npm install it. Maybe the library that was using the newer one still works with the old one?
I'm trying to include Bootstrap in my Aurelia CLI project, and the CSS and JS work fine.
The only problem I have is the glyphicons require font files to be loaded.
I use this configuration:
"dependencies": [
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.min.css",
"fonts/glyphicons-halflings-regular.woff2"
]
}
]
But I get an error containing this line:
path: 'C:\Users\randy\Documents\form\node_modules\bootstrap\dist\fonts\glyphicons-halflings-regular.js'
So even though I include the .woff2 file, Aurelia tries to import the file as a JS file. What can I do to make this work? CSS does work fine.
It looks like this is a bug in the current version of the Aurelia CLI. I've submitted an issue for you here: https://github.com/aurelia/cli/issues/248
Aurelia can't process font files. You must use manual bundle task for it.
Here is similar solution for font-awesome: https://stackoverflow.com/a/39544587/1276632
Here is solution for glyphicons (I used it for bootstrap v4 integration): https://github.com/aurelia/cli/issues/248#issuecomment-250967074
This has been solved, for more information read the Github issue.
This issue can now be solved by adding a copy instruction in the aurelia.json.
aurelia.json - valid if the project was created by aurelia-cli 0.25.0 or greater
Add the following in the build block:
"bundles": [ ... ],
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
If the project was created by an older CLI version, you will have to create the copy task inside the tasks folder
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/copy-files.js.
After that, call the copy task in the build.js/ts task
https://github.com/aurelia/cli/blob/master/lib/resources/tasks/build.js#L15
* credits to fabioluz for commenting this on github