I have been following this set of tutorials, in which the writer uses import instead of require. Unfortunately, when I do this it doesn't work. I am using babel-preset-env instead of the stage-0 and babel-preset-es2015 presets used in the tutorial. I am also using yarn instead of npm.
babel-node ..., works fine, however, when I use node ... I get errors saying unexpected token import. I can't use babel-node in production, so I am trying to solve this issue now.
What is the correct way to do this? It is too much code to post here so here is a link to the git repo: https://github.com/mjhough/react-express-sample
Related
Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.
I created a project with vue-cli 4.1.1, and after running yarn serve, i got the following error
Error: [BABEL] C:\dev\vuestudy\src\main.js: Cannot find module './src/data' (While processing: "C:\\dev\\vuestudy\\node_modules\\#vue\\cli-plugin-babel\\preset.js")
Any tips on this?
Thanks in advance.
UPDATE:
Kousha and Dave are right,after waiting for the core-js package update, I created a new project, and now it's working.
It looks like there's been a bad build of npm package core-js-compat. This is a deep-down dependency of Babel. Lots of things will be affected, things that use Babel.
You will experience this problem if you have core-js-compat v.3.4.6. You can check this by doing npm list core-js-compat. The problem is apparently fixed by v.3.4.7, which was pushed out pretty quickly, about half-an-hour later, but unfortunately it takes a while to spread out through the repositories. You can either wait until an npm update gets you v.3.4.7 or you can go manually download v.3.4.7 if you want to get going right away.
This is a bug with core-js-compat v3.4.6, but already the fix has gone with v3.4.7. See https://github.com/zloirock/core-js/issues/712 for more detail.
You may be able to force install the not-broken version with
npm i core-js-compat#3.4.7 --save
It worked on my machine™
With Vue / Nuxt, you can delete package-lock.json and node_modules and do an npm install to fix this issue.
Following this tutorial to set up app. It seems pretty normal and standard compared to all of the other tutorials that I have found. However, when tried and complete the 1.2.3 step Create a gulpfile.js at the root of the project: I am getting this error
error syntax error near unexpected token `}'
This is the command used in terminal.
var gulp = require('gulp');
Basically all want to do is download gulp so, can run sass with my css in atom. Any help?
You're right. The code wasn't for the terminal. I needed to create the file separately. I misread the tutorial. Thanks for the help!
So I've been working on a Vue.js project for couple times now, and I am facing a problem I've never seen before.
Trying to git pull the project on another computer, or even downloading the project as a zip file, when it's time to npm install, vue-material module fails and the whole thing cannot be run.
It goes this way, with vie-material :
vue-material#1.0.0 postinstall C:\<my_things>\node_modules\vue-material
sh build/git-hooks/install.sh
Then I see this :
/usr/bin/bash: build/git-hooks/install.sh: No such file or directory
Then the modules' tree shows in the terminal, and at the end, I can see all the errors related to vue-material, with this statement :
Tell the author that this fails on your system:
sh build/git-hooks/install.sh
By the way, I tried to crate a brand new Vue project, and tried to add vue-material inside, no problem, so it has to do with my project.
Obviously though, /usr/bin/bash does not exist, since I'm running Windows 10.
Any knowledge on npm's installing routine ? I'm out of solution to try...
Can you share your package.json file?
I had this same problem just now and found that NPM could possibly be installing the incorrect version. Where I had "^vue-material": "1.0.0-beta-7" NPM was installing version 1.0.0 instead of 1.0.0-beta-7. If you remove the ^ then it may work for you. This is where I found the answer that helped me.
https://github.com/vuematerial/vue-material/issues/1155
Well, after couple times figuring out what was wrong, I got this :
I tried to use yarn and it told me that my node version was too old (vue-material needed 7.0+ and my node was 6.9, or at least that is what yarn told me), so I got myself the 8.9.3 node.
After this I tried to use yarn again, and the error with that bash script showed again.... then I just tried to use npm install again, and it worked just fine...
I don't know about the bash script thing, but one thing to remember is to always check for node and npm's version when errors happend.... (and yarn looks very cool and simple imo ^^).
You kinda made me think about a version problem though, I got you that ! :D
Problem solved....
I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!