I am trying to use axios for a http request in my app.js file, but I always get the error message:
Uncaught SyntaxError: Cannot use import statement outside a module.
I created the js folder, files and other js packages using parcel-bundler and run browser-sync to start the server.
What am I missing? Please help I am new to JavaScript. I am on macOS Big Sur 11.5.1, node v14.17.4
import axios from 'axios'
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form')
form.addEventListener('submit', async (event) => {
event.preventDefault()
const username = document.querySelector('input').value
const response =
await axios.get(`https://api.github.com/users${username}`)
console.log(response.data)
})
})
In the closest (from the root of project directory) package.json file, add or update "type" field with a value of "module". It will ensure that all your .js, .ts and .mjs files are interpreted as ES modules.
...
{
...
"type": "module"
...
}
...
Where can I add it in this file?
{
"name": "githubUser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1"
}
}
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Update:
It should looks like this:
{
"name": "githubUser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1"
}
}
Related
I'm using express and i'm trying to call getUser() function, that is inside profileService
class profileService {
constructor() {}
getUser() {
return "I'M A USER";
}
}
module.exports = profileService;
in my routes file
const routes = require("express").Router();
const profileService = require("./services/profile.ts");
routes.get("/", (_req, res) => {
//res.send('this works just fine if it is not commented')
res.send(profileService.getUser());
});
module.exports = routes;
The error that i keep getting is this: TypeError: profileService.getUser is not a function
Here is the package.json, just in case
{
"name": "cuarto-intento",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^2.0.20"
},
"dependencies": {
"express": "^4.18.2"
}
}
I installed "npm install axios" and imported using "import axios from 'axios'.
I wanted to post the data and get the data
These are the codes I have used.
Package.json :
{
"name": "ceniplex-tickets",
"version": "1.0.0",
"description": "ticket booking app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Aswin Anilkumar",
"license": "ISC",
"devDependencies": {
"parcel": "^2.8.1",
"parcel-bundler": "^1.8.1"
},
"dependencies": {
"axios": "^1.2.1"
}
}
JS code (Front end) :
import axios from 'axios';
class Model {
constructor() {
this.array = []
}
getArray() {
return this.array;
}
async loadTicketsFromBackend() {
const req = await axios.get('http://localhost:3000/booking')
const booking = req.data;
console.log(booking);
}
async setArray(data) {
const res = await axios.post('http://localhost:3000/booking',data)
return res;
}
}
export default Model;
I'm trying to biuld bundling through rollup.js in VSCode.
My directory:
----MyProject
--------\node_modules
-----------\.bin
-----------\rollup
--------index.js
--------index.html
--------bundle.js
--------package-lock.json
--------package.json
In my .html file I have connection with bundle.js, all changes which I'm doing in index.js must automatically be updated in bundle.js. But it's only working when I run in terminal this command: rollup index.js --file bundle.js
My package.json:
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"rollup": "^2.34.2"
}
}
What do I need to do to make this system works automatically?
Firstly, I didn't have config file, so I've created rollup.config.js:
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
const watch = process.env.ROLLUP_WATCH
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
watch && serve('dist'),
watch && livereload()
]
}
Then I added these 2 scripts into package.json:
"build": "rollup -c",
"dev": "rollup -c -w"
And run in terminal: npm run dev
My credits to vladshcherbin for help!
I never used a module outside a boilerplate created by for example create-react-app or angular-cli, now i am trying to mimic modularity without using them, and i get an error: cannot use import outside a module
this is my package.json file:
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0"
}
}
I am using a live-server to create a server for my project, I am failing to do that:
App.js:
const x = 10;
export default x;
index.js:
import x from './App' // can not use import outside a module
The question is what i missing here, what do i really need to create a module??
I am trying to implement local modules in my application
1.Project root folder i have created folder named test with a file named index.js
module.exports = {
myFunction:function(){
console.log('ok');
}
}
2.Added the following in package.json in the root folder
"dependencies": {
"test-module": "file:test"
}
3.When i try to import var module = require('test-module'); in app.js i got this error
Cannot find module 'test-module'
you can provide a path to a local directory that contains a package
{
"name": "baz",
"dependencies": {
"bar": "file:../foo/bar"
}
}
and perform npm install -s or npm install --save reference
To add on #Blaze answer, if you follow the steps (Local Paths) to install a local module, it will sort out for you the local dependency in your package.json:
npm i ./test --save
That will produce the correct local dependency entry in your dependencies in the root package.json:
"test-module": "file:test"
assuming test-module is the name in the local dep package.json.
This is how it should look like:
Make sure your test folder has a package.json.
test/package.json should have a "name" field with the value "test-module" (ie, same name as the dependency in your root package.json.
My files:
test/package.json
{
"name": "test-module",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
test/index.js
module.exports = {
t:() => console.log('t')
};
package.json
{
"name": "t",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"test-module": "file:test"
}
}
app.js
t = require('test-module');
t.t();
This is working for me.