I've NodeJS app whit many file like this:
import '#babel/polyfill'
import app from './app'
./app is a js file: app.js and #babel/polyfill is a npm package
When I try to start my app with npm run dev i got this error:
SyntaxError: Cannot use import statement outside a module
I've seen that you can use "type": "module" on package.json to solve the problem
But this causes another problem:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module './app' imported from /boot.js
I have many file that import modules and other files like that so i can't change them all
How do I keep the two type fo import?
If you only import babel like that you can setup babel for global import
This is .babelrc file on root folder:
{
"presets": [
"#babel/preset-env"
]
}
Related
I run into this error when my script import nodejieba.
It named 「Module not found: Can't resolve 'aws-sdk' in 'C:\Users\user\Documents\cchatbigdata\node_modules#mapbox\node-pre-gyp\lib\util'」
At first, the react run well and my script work fine.
then I npm install nodejieba --save-dev
and add import nodejieba from 'nodejieba' in my TestedData.js.
even if I don't use nodejieba's function, my react ran into this error.
I start to search related question about Can't resolve 'aws-sdk'.
most of them encountering this error when using webpack, but I don't use webpack, I just import nodejieba.
I try to understand node-pre-gyp\lib\util under the node_modules.
but it created by React(I using npx create-react-app), so I think if changing the file react may shutdown.
I think something wrong between react and nodejieba.
My browser show those errors, I found they all related to node-pre-gyp\lib\util.
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'aws-sdk' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'mock-aws-s3' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
index.js:1
./node_modules/#mapbox/node-pre-gyp/lib/util/s3_setup.js
Module not found: Can't resolve 'nock' in 'C:\Users\kevin\Documents\cchatbigdata\node_modules\#mapbox\node-pre-gyp\lib\util'
console.<computed> # index.js:1
handleErrors # webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:213
Maybe node-pre-gyp under the node_modules must to be fixed.
Here is my TestData.js
import {useState, useEffect} from 'react';
import nodejieba from 'nodejieba'; //this line make me run into this error!
...
Thank for your reading and help!
Run npm install util
I don't believe this error has anything to do with nodejieba. You used npx create-react-app and it must be using Webpack 5 now, which does not include polyfills for node.js anymore. An alternate solution is to use https://www.npmjs.com/package/node-polyfill-webpack-plugin but I liked installing just the single util package for my use case.
In my app root, I have /node_modules/ and /src/
I have ran npm install and installed packages using npm install axios --save etc for all my dependencies
I do see that they are being added to the node_modules directory however my vue project does not compile with the following error:
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'axios' in '/app/src'
If I manually create a node_modules folder inside of my /src/ directory, and place axios, and my other dependencies it works.. but from what I've read I should not be handling my node modules this way. It seems I need to have my dependencies point to a different path?
What's weird is my import Vue from 'vue' and App from './App.vue' work fine, it's basically everything afterwards that fails to compile..
My main.js :
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'
Vue.use(VueAxios, axios)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
firebase: firebase,
}).$mount('#app')
I have also tried removing all node modules, clearing NPM cache and reinstalling NPM dependencies to no avail.
instead of use the use function to add your axios instance globally can you please try to add it like this:
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import firebase from 'firebase'
import "firebase/auth";
import "firebase/analytics";
import "firebase/firestore";
import moment from 'moment'
Vue.config.productionTip = false
Vue.prototype.$axios = Axios; //<---- like that
new Vue({
render: h => h(App),
firebase: firebase,
}).$mount('#app')
after that try to compile again. you are then able to call your axios instance on every component with this.$axios
this error accrues when compiler cant find module or file you want to import within your node modules file
when module cant be found compiler goes to current directory to find that and if it cant find it through this error
I can't figure out what's the proper way of importing a Typescript npm module.
Here's how I'm trying to do it:
module package.json
{
"name": "my-module",
"main": "src/myModule.ts"
}
module src/myModule.ts
export module MyModule {
// Code inside
}
code using the npm module
import { MyModule } from 'my-module'; // Doesn't work
import { MyModule } = require('my-module'); // Doesn't work.
The module is installed as a dependency in the package.json, and for example I can do
import { MyModule } from '../node_modules/my-module/src/myModule.ts';
But obviously this isn't great. What I want is a way to just import any exports that are in the main module file, but it doesn't seem possible.
The 'main' in package.json is useful only to packaging tools like webpack or the build tool of angular-cli. It is used to select different bundles according to the user's needs: ES6, ES5, UMD...
TypeScript ignores that. You need to specify the file you want, exactly as if you were refering to your own project:
import { MyModule } from 'my-module/src/myModule';
What other libraries like Angular do is to create a barrel, a file usually called 'index.ts' or 'index.d.ts', that imports and exports all types in the library.
The advantage of this is that, if you create a index.d.ts file in the root of my-module:
export { MyModule } from './src/myModule';
// other exports
You can simply do this:
import {MyModule} from 'my-module'
As typescript, when importing from a folder, automatically uses a index.ts or index.d.ts file.
You should use "types" property instead of "main" property with typescript modules. How TypeScript resolves modules
I am using the basic vue loader setup with webpack(https://vue-loader.vuejs.org/en/start/setup.html).
In my main.js I import the necessary:
import Vue from 'vue'
import App from './App.vue'
import firebase from 'firebase'
import docx2html from 'docx2html'
Both firebase and docx2html are in the node_modules folder under src and specified in the dependencies folder. For some reason firebase is imported, but docx2html can not be found. It returns the error:
Module not found: Error: Can't resolve 'docx2html' in
'C:\path\to\src'.
How should I import docx2html, and why doesn't it work this way?
I am importing a node module correctly but run into an issue where the node module I am importing is written in es6 and babel is unable to transpile it.
In base class header:
import foo from 'bar/lib/foo';
in foo.js in node modules:
import Debug from 'debug';
export default class foo from bar {
...
...
...
}
Error Message:
import Debug from 'debug';
^^^^^^
SyntaxError: Unexpected token import
As you can see it is able to find the file foo.js but it is not running the node module in es6. How can I have Babel transpile both the base code as well as the node module that it is trying to import?
Do you have a file .babelrc with this content?
{
"presets": ["es2015"],
"plugins": []
}
You can check an example here: https://github.com/Talento90/ima-up
The node module should be compiled separately from your source code. If you are using an external lib, they should have a directory with the transpiled code. If you are writing your own, you need to use npm link and compile it separately.
If the node module already has a transpiled directory (like dist), you could try importing the transpiled code into the node module:
import foo from 'bar/dist/foo';