I'm very confused.
I just saved my code to github from windows, where the vue.js app compiles successfully. But when opening exactly the same code in ubuntu, with the same versions of vite and vue, the app does not compile
I receive multiple errors when trying to apply destructuring.
In auth.js i have:
const test = new Test(); export default {test}
And, in another file I call this
import {test} from '/auth.js'
I received this:
No matching export in "src/auth.js" for import "test"
On windows everything works perfect. but when running "npm run dev" on Ubuntu I get this error.
I already tried:
-remove node_modules
-regenerate package-lock.json files
-update versions
the versions of vite, vue, node and npm are exactly the same on windows and ubuntu.
Some help?
You are exporting an object and attempting to destructure it when importing. However, this is the syntax for importing named exports and since you don't have a named export the error is occurring.
You should either do
export default test
import test from './auth.js'
Or
export { test }
import { test } from './auth.js'
Related
I created a minimalistic example of using ES modules in Typescript, using only the tsc and node commands. It works fine but I'm not sure I did it correctly.
I created two files like the following.
// test.mts
export function test(s: string) {
console.log('test, s:' + s);
}
// main.mts
import {test} from './test.mjs'
test('a')
console.log('done')
And I compiled and ran like the following.
$ tsc --module es6 test.mts main.mts && node main.mjs
It seems I have to use the 'mts' extension instead of the 'ts' for source files, and have to import the 'test.mts' module with the 'mjs' extension. Am I correct? Is there any better method?
I am not a seasoned JS developer and the official documentation does not help in my case.
I'm trying to update the swiper.js library
I was using swiper version: 6.8.2,
Now I would like to upgrade it to a newer version 7.4.1
My App is written in React and Node js with SSR( I'm not using Next.js) and Node version: v14.11.0
Here is how my component code, looks like
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
const CustomView = () => {
return (
<Swiper>
</Swiper>
)
}
export default CustomView
When I run it I'm getting the following error in terminal
"message":"Must use import to load ES Module: /Users/Projects/ReactStarter/node_modules/swiper/react/swiper-react.js\nrequire() of ES modules is not supported.
Then I change Import to:
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'
In Terminal error is printed:
"message":"Package subpath './react/swiper-react.js' is not defined by \"exports\"
Is there any way I can bypass this, since I'm using webpack so maybe I can somehow ignore it or something else
can u try in terminal
npm cache clean --force
npm rm -rf node_modules
and install again 3. npm i
Looks like a problem with next.js a temporary fix would be changing experimental.esmExternals to loose in your next.config.js and follow this thread for more updates regarding this issue.
module.exports = {
experimental: {
esmExternals: "loose",
}
};
Updating the library might not be a option.
Considering you are using React 18.
https://github.com/nolimits4web/swiper/issues/4871
I created a problem repository here:
https://github.com/tippfelher/so-nextjs-console
Problem description:
Using yarn next dev starts the development server which successfully outputs the model Example on the index-Page.
However, I cannot reuse the same model in a console application.
Running node .\console-app produces the error
import Example from "../models/Example";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Attempts to solve this problem:
Add { "type": "module" } to root package.json and change next.config.js contents to
const config = {
reactStrictMode: true,
}
export default config;
triggers error:
Error: require() of ES Module <PATH>\demo\nextjs-node\app\.next\server\pages\_document.js from <PATH>\demo\nextjs-node\app\node_modules\next\dist\server\require.js not supported.
Edit
node --version
v16.13.1
You do not specify the node version but that error looks like the version of node requires enabling the then experimental es6 module support. In package.json add
"type": "module",
In new NodeJS builds looks like import statements are supported.
Since this is posted around Next, you may get into other compatibility issues, the yarn next dev invokes a cli which does a build and packages compatible modules to be executed by node.
If you are curious, checkout the cli build - https://github.com/vercel/next.js/tree/canary/packages/next/cli
i have a fully working modularized apollo server on nextJS (based on this article https://www.apollographql.com/blog/modularizing-your-graphql-schema-code-d7f71d5ed5f2/ ) basically im doing an Array of my typedefs and merging the resolvers using the merge function from lodash... so far so good... this feed a function makeExecutableSchema and this schema is going to the server... and it works great...
the problem is im trying to move the server outside nextJS... and when i do try to create a new project and yarn init or npm init... install the dependencies, and try to copy paste all my schema files to the new npm init project ALL my imports are messed up, and i start getting all this errors like:
in nextJS i have (this one simply works in nextJS):
import { merge } from "lodash";
in the new node project it says merge couldnt be found in lodash...
or the module is commonJS and it cannot do named imports...
or if i do an import using require it says ReferenceError: require is not defined, i think this one should be due to node expecting to run this on a browser but i have no idea how to specify this wont run on a browser since it's simply a js file which intends to modularized the apollo schema...
i just dont understand why all the import sentences work just fine in Next but when im starting the apollo server in plain node every import is giving so many errors... i have fixed some by adding the extension at the end of the filename im importing (thing that was not necessary in nextJS) or by adding "/index" at the end of the package being imported...
Is there a way to make the imports behave like in Next??? but in a new nodeJS project?
Any help or orientation would be GREATLY appreciated
The answer was:
Use Babel, install with NPM or YARN
"#babel/core"
"#babel/node"
"#babel/preset-env"
add the .babelrc file to the root directory of the project:
{
"presets": ["#babel/preset-env"]
}
to run the main file use a script in package.json like:
"start": "nodemon --exec babel-node index.js"
and this will allow to execute modern JavaScript :D
hope you're doing well.
I'm new at react native and i'm stuck with a problem while trying to import a node module.
I need to create an app that will get orders from the API of a Wordpress Website with WooCommerce.
I first created a project with the command create-react-native-app picking then npm install. It's creating a structure like this in the project folder named picking:
node_modules
App.js
app.json
App.test.js
etc....
Then I installed the package woocommerce-api with npm install woocommerce-api --save (https://www.npmjs.com/package/woocommerce-api). This package allow me to do request to the WooCommerce API easier.
I want to not put the config to the WooCommerce API in the App.js, so I created a folder src and a folder woocommerce with a file api.js (should I write it with the first letter in uppercase ?) in it and I added import Api from 'picking/src/woocommerce/api'; in my App.js.
So now the structure is
node_modules
src
-- woocommerce
-- api.js
App.js
app.json
App.test.js
etc....
The problem is that I can't achieve to import the WooCommerceAPI module from woocommerce-api, no matter what I set in path to get the module.
There is the file api.js at the moment :
import WooCommerceAPI from '../../woocommerce-api';
var Api = new WooCommerceAPI({
url: 'http://localhost/mysite',
consumerKey: 'ck_xxxxxxxxxxxxxxxxxxxxxxxxxx',
consumerSecret: 'cs_xxxxxxxxxxxxxxxxxxxxxxxxxxx',
wp_api: true,
version: '/wc/v2',
queryStringAuth: true
});
export default Api;
And I get the error :
Unable to resolve module '../../woocommerce-api' from etc ...
I can't find what is the problem and why this is not working. If you could help me on this, it would be very nice.
Have a nice day everyone :)
EDIT: I changed the line for the import to import WooCommerceAPI from 'woocommerce-api'; and I got a new error : Metro Bundler has encountered an internal error, please check your terminal error output for more details, but there is nothing in the terminal except Failed building JavaScript bundle.
EDIT2: I downgrade node from 9.4 to 8.0.0 and restart the project. I got the same error but in the terminal i now get this in yellow/orange : Problem checking node_modules dependencies: Unexpected end of JSON input
Okay, so I find a workaround. In fact, the import is working. For some reason that i don't know, this is the npm package that is not working and make the app crash.
So I removed the package woocommerce-api and I create a file in src/woocommerce called woocommerce-api.js, then I copied the content of this https://github.com/minhcasi/react-native-woocommerce/blob/master/WooCommerceAPI.js that is the same as the one in the npm package and I pasted it in my woocommerce-api.js. I import it in my api.jsfile and "voilà" !
Seems to work fine.
As you install woocommerce-api in your project there is no need to place the location like ../../woocommerce-api.
just change ../../woocommerce-api to woocommerce-api and your project should work.