I am trying to run the exhibits in deck.gl project. I have cloned the repo, switched to the exhibits directory, and run:
npm run browserify
This installs the packages without errors, and runs the project, but when the browser opens I see the following error:
Unknown plugin "static-fs" specified in "/Users/me/Projects/deck.gl/.babelrc" at 0,
attempted to resolve relative to "/Users/me/Projects/deck.gl"
while parsing file: /Users/me/Projectss/deck.gl/exhibits/app.js
So the problem is the .babelrc file:
{
"presets": ["es2015", "stage-2", "react"],
"plugins": [
"static-fs",
"transform-decorators-legacy"
]
}
What should I do? Google isn't suggesting any answers, and static-fs doesn't appear to be a package.
In addition to the package.json in the exhibits/browserify directory,
the deck.gl project includes a package.json at the project's root.
Note that there are packages in the root file that are not in the exhibits/browserify file.
It's necessary to run npm install at the root, too, as the 'missing' dependencies will resolve back to the root node_modules directory.
Related
[my error during run command] (https://i.stack.imgur.com/cPnbq.png)
my rollup.config.js file:
Expected build Dist. file for my library but facing this error.
#build
The "�" character indicates that the file was not encoded properly. Try opening the file in a text editor and making sure that it's saved with a UTF-8 encoding.
You may need to update or implement Babel configuration to include the necessary plugins for importing non-JavaScript files.
If you already have, install npm install --save-dev babel-runtime babel-plugin-transform-runtime, then add the babel-plugin-transform-runtime plugin to your Babel configuration
{
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I created a react app in a NX workspace using nx g #nrwl/react:application --js --unitTestRunner=none --e2eTestRunner=none my-project
Then I developed my project. Finally when I want to run my project using
nx serve my-project I get following error:
Syntax error: Support for the experimental syntax 'jsx' isn't currently enabled
I realized that it is related to babel configuration of project so I
installed #babel/preset-react #babel/preset-env and replaced content of
.babelrc file
configuration before any change:
{
"presets": [
[
"#nrwl/react/babel",
{
"runtime": "automatic",
"importSource": "#emotion/react"
}
]
],
"plugins": ["#emotion/babel-plugin"]
}
.babelrc after installing packages
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
I also changed jsx property in compilerOptions of tsconfig.json from
"react-jsx" to "react"
but when I run nx serve my-project again, I get that error again.
What should I do? Is there any solution?
The issue is the lib generator, when you create a react lib ,I only tried publishable, it doesnt add the babelrc file so you have to add it yourself..just copy it from your app. Its a bug atm
I am pretty new to vue.js - I only started using it today and naturally I have run into an error I cannot seem to resolve.
I am using the v-md-date-range-picker module:
(https://ly525.github.io/material-vue-daterange-picker/#quick-start.
The instructions tell me to do the following:
1
npm install --save v-md-date-range-picker
2
<template>
<v-md-date-range-picker></v-md-date-range-picker>
</template>
3
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";
import "v-md-date-range-picker/dist/v-md-date-range-picker.css";
Vue.use(VMdDateRangePicker);
</script>
So, I ran the command in terminal in my project folder, added the 2 bit of code to my HelloWorld.vue page and then added the code from step 3 into the main.js.
When I have a look in my package.json file, I see:
"dependencies": {
"core-js": "^2.6.5",
"v-md-date-range-picker": "^2.6.0",
"vue": "^2.6.10"
},
However, I get the error:
Module not found: Error: Can't resolve 'v-md-date-range-picker/dist/v-md-date-range-picker.css' in '/Users/James/Documents/projects/vue-test/src'
am I missing something blatantly obvious here?
Edit:
I tried the response in the comments below which did not work.
On the main page of the module, I followed the instructions. However, going through the pages I found the same instructions with some extra text:
I assume that you have a working bundler setup e.g. generated by the vue-cli thats capable of loading SASS stylesheets and Vue.js SFC (Single File Components).
I am going to go out on a limb here and say I do not have a working bundler. I went into the node_modules folder, found that module and looked inside. There was no dist folder. Just .scss files etc..
So, I assume that I somehow need to build this project first.
How do I do that?
I thought running it in the browser would have done this on the fly but it clearly has not.
Edit 2:
After some googling around I found the command:
$ npm run build.
Which gives me this error:
This dependency is not found, To install it, you can run: npm install --save v-md-date-range-picker/dist/v-md-date-range-picker.css
So, I run that command and then I get the error:
Could not install from "v-md-date-range-picker/dist/v-md-date-range-picker.css" as it does not contain a package.json file.
Check if you can find this in the webpack.base.conf.js inside the build folder. If not add it.
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'], // Note that the order is very important
},
Run npm install style-loader css-loader --save before adding it to the file if it isn't there.
To Address your question
Run the command: npm install sass-loader --save
Then add an import for every SCSS file in the module.
This is not the most optimal solution, but that package looks broken to me and this is merely a workaround.
I will take time to try out the library myself and try to provide a fix for it.
Create v-md-date-range-picker.css in v-md-date-range-picker/dist/ and copy css from
md-date-range-picker.min.css
and refresh your page. For some reason css file is not being created when we install md-date-range-picker.min
I have a project set up like this and I'm trying to require file-a.js from file-b.js.
project-name/
node_modules/
src/
file-a.js
tools/
tool-name/
node_modules/
src/
file-b.js
webpack.config.js
package.json
package.json
My webpack 1.13.0 configuration was working until I added babel-loader 6.2.4 with babel-preset-es2015 6.6.0. Then I started getting error messages.
ERROR in /home/dan/dev/dan/project-name/src/file-a.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/dan/dev/dan/project-name/src"
Now I have a hunch that this is happening because it's looking for babel-preset-es2015 in the upper package.json. I can make this error go away by installing it at that level, but then I get a similar message about the babel module not being there.
I've tried all sorts of things, symlinked the upper src directory into the inner project, used resolve.root and resolve.alias to try and manually resolve the folder without the nested path. Used context to set the project root as the outer folder, but it still picked up the wrong node_modules.
How can I force webpack to use the correct node_modules folder?
By default webpack looks in ./node_modules, ../node_modules, and ../../node_modules.
To force it to only use a specific directory, you can set an absolute path for the module modulesDirectories property in the resolve section:
module.exports = {
// ...
resolve: {
modulesDirectories: [path.join(__dirname, 'node_modules')]
}
}
More details on moduleDirectories in webpack's documentation
I'm trying to get r.js to optimize all my Require-related files but am getting an error.
My site is in a directory called "myCrazysite" and is structured like this :
(not all the files)
myCrazysite
js/
buildform.js
search.js
app.build.js
vendor/
jquery
r.js
app.build.js looks like this:
({
appDir: "../",
aseUrl: "js",
optimize: "none",
dir: "buildOut",
modules: [
{
name: ["buildform", "search"]
}
]
})
I'm going into js/ and runningnode ../r.js -o app.build.js. I've also globally installed the CLI tool with npm and run r.js -o app.build.js from same directory.
When I do either of these two things, I get the following error:
ENOENT, no such file or directory '/Users/me/Sites/myCrazysite/node_modules/.bin/bower'
at Object.fs.statSync (fs.js:684:18)
The steps I've taken are:
navigated to to the above mentioned ".bin" directory on the CLI..the
bower directory is there.
upgraded to node v0.10.18
uninstalled & reinstalled bower
uninstalled the CLI tool and run node ../r.js -o
app.build.js
globally reinstalled the CLI tool back, deleted r.js
from the site root, navigated to js/ and run r.js -o app.build.js
I'm using require v.2.1.8.
Never mind...I figured it out.
The issue was that the .bin/bower file was causing some conflict and just needed to be deleted. It was a stray shortcut file from (I think) a bower-related grunt plugin. As I wasn't using the plugin, I just used npm to uninstall it, then hard-deleted the file .bin/bower.
Moral of the story: the command line always tells you what to do...usually.