How to use module `module` in a vue project? - javascript

ERROR Failed to compile with 6 errors 16:20:36
This dependency was not found:
* module in ./node_modules/#eslint/eslintrc/lib/shared/relative-module-resolver.js, ./node_modules/eslint-plugin-vue/lib/rules/experimental-script-setup-vars.js and 4 others
I want to use eslint and eslint-plugin-vue directly in my vue project, but I got the above error after run serve.
How to polyfill module or how to resolve it? Thank you all.
Project:
use vue.config.js

We can resolve the problem by this way:
https://github.com/ota-meshi/eslint-plugin-vue-demo
The link page refer us a demo to use eslint and eslint-plugin-vue in browser.
Configs in vue.config.js of project can resolve the above question:
resolve: {
alias: {
// resolve `module` not found
module: path.resolve("./shim/module.js"),
globby: path.resolve("./shim/empty"),
eslint$: path.resolve("./shim/eslint/index.js"),
esquery: path.resolve("./node_modules/esquery/dist/esquery.min.js"),
"#eslint/eslintrc/universal": path.resolve(
"./node_modules/#eslint/eslintrc/dist/eslintrc-universal.cjs",
),
}
},
alias links to this directory:
https://github.com/ota-meshi/eslint-plugin-vue-demo/tree/main/shim
Other alias will resolve faults after resolve module not found happen.

Related

Trying to export function using export {} causing errors

I'm learning to code on my own so to practice webscraping I thought I'd make a program which displays a famous persons birth on a user inputted date on one side using cheerio, while on the other it uses an API to get the temp of a user inputted city. Here is the github: https://github.com/Yummy275/Date_Weather_Celebbirths
Im having trouble with famous_getter.js in ./src . When I try to add export { getName } to be able to use the function in other files similar to all my other files, I get an error when I try to webpack or run node famous_getter.js after I add import {getName} from "./famous_getter" to index.js to test the function. Any help is appreciated. Thanks for looking.
EDIT - adding errors
Webpack error(its this repeated a bunch for different things "cant resolve 'x" in":
ERROR in ./node_modules/request/lib/har.js Module not found: Error:
Can't resolve 'fs' in
'/home/yummy/Projects/DateWeatherCelebbday/node_modules/request/lib'
# ./node_modules/request/lib/har.js 3:9-22 #
./node_modules/request/request.js # ./node_modules/request/index.js
# ./src/famous_getter.js # ./src/index.js
node famous_getter.js error:
node famous_getter
(node:257160) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/yummy/Projects/DateWeatherCelebbday/src/famous_getter.js:25
export { getName };
^^^^^^
SyntaxError: Unexpected token 'export'
In my GitHub famous_getter.js works when I run node famous_getter.js . When I get rid of my test (getName(famousbirthsURL)) and try to add export {getName}, thats when errors happen.
Attempt #2:
Edit: I have taken all edits to the OP's question and info in comments in this response.
Looks like you are targeting node and not web.
The default target for webpack is web.
You need to add a target: 'node' in your webpack file.
const path = require("path");
module.exports = {
target: 'node',
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
};
After adding this, webpack ran successfully and built the assets.
Launched http-server ./ on the dist folder and browsed home page.
Screenshot:
Attempt #1:
I downloaded the project from Github and ran webpack.
The assets are building successfully.
I also added the export { getName } to famous_getter.js and ran webpack.
Build is successful. I am not encountering the errors.
Perhaps, something is wrong with your environment or node_modules cache.
Try a fresh install and webpack.
Screenshots below:
Lets read the error thoroughly: Error: Can't resolve './src/index.js' in '/home/yummy/Projects/DateWeatherCelebbday/src'.
What does it say? Its looking for a file index.js that's located at the relative position ./src/index.js. The . at the begining means that we are trying to resolve the path in a relative manner.
Relative to what? In this case its relative to the path
/home/yummy/Projects/DateWeatherCelebbday/src. In other words the
program is looking for a file at
/home/yummy/Projects/DateWeatherCelebbday/src/src/index.js, which
likely contain one too many src.
Try changing either the relative path to ./index.js, or navigate to /home/yummy/Projects/DateWeatherCelebbday and run the original command.

Why webpack is including node_modules of dependency?

I have two modules inside the same directory, managed both by lerna js. One of them is a library that others module includes. Both of them packed by webpack following webpack library authoring.
But, when I launch webpack in the app dir, the process includes all library/node_modules dependencies inside the app, for example vue.js. In library vue is "devDependency" while in the app is "dependencies". This implies two Vue context in navigator. Somebody known why?
Thanks.
You need to add an alias:
module.exports = {
...
....
},
resolve: {
modules: ["node_modules",
alias: {
'vue$': 'vue/dist/vue',
'jquery': 'jquery/dist/jquery.min.js'
}
},
...
Thanks to #evocateur
"Node resolves symlinks when requiring, which means libraries (like React and Vue) that are singletons will break. You need to add resolve.alias webpack config so it always chooses the "root" node_modules packages."
Putting in webpack following works perfectly in resolve.alias:
vue: path.resolve(__dirname, './node_modules/vue/')

How do I resolve modules that get processed by exports-loader in webpack?

I'm using webpack 2.1.0-beta.20 and am getting a Module not found: Error: Can't resolve error when trying to build.
I have a file EmsWorkerProxy.js that does not export a module, so I'm using exports-loader so that I can require() it in my script.
On top of that, I also want to turn that into a web worker, so I'm chaining worker-loader to that.
I'd love to not use relative or absolute paths. The scripts are in a vendor directory, so I'm trying to add this to my webpack.conf.js:
resolve: {
modules: [
'node_modules',
'src',
'vendor'
]
},
Unfortunately, it seems like webpack still can't resolve anything.
The line in my app that does
const EmsWorkerProxy = require('worker!exports?EmsWorkerProxy!EmsWorkerProxy'); causes:
Module not found: Error: Can't resolve 'EmsWorkerProxy'
Am I not using webpack correctly?

Cannot resolve module 'angular' when import ngstorage using Ionic and Webpack

I am implementing an application using Ionic with Webpack and Typescript.
I install 'ngstorage' via npm and try to import in the entry ts file, but Webpack shows an error - 'Cannot resolve module 'angular''.
I have searched about this error and realized that I need to include the angular in the package.json file and node_modules.
However, ionic-sdk module already includes angular. So it instead shows an unacceptable error in the browser that I am trying to load angular more than once.
Does Webpack have ways to skip the module resolver or point to path of angular module to ionic-sdk module instead? or are there any other suggested ways to import?
Thank you.
I'm not familiar with ionic at all but I hope i can help you.
First of all in files you use angular. on the top of file you need to import angular:
import angular from 'angular';
Then I got two suggestions that might help you:
Add angular as external library
If you are certain that angular is being loaded before the bundle you create with webpack you can add angular as an external library in your webpack config:
externals: [
'angular'
]
"Teach" webpack where to look for angular
Thanks to resolve.alias you can override default imports in webpack. So in your config file you can do something like:
resolve: {
alias: {
angular: 'path/to/sdk/angular'
}
}
As I said I'm not familiar with ionic, so I'm sorry if that's not what you were looking for :).
Using KisaneNeko's answer I was able to do the following without adding angular. This fixed the webpack issue but still gave me other issues, but maybe it'll work for you though.
resolve: {
alias: {
'angular': '../../node_modules/ionic-sdk/release/js/ionic.bundle.js',
}
}
Here is webpack's documentation for alias if you need it: https://webpack.github.io/docs/configuration.html#resolve-alias

Jest failed to build dependency graph, collision between source and build files

I'm using babel to transpile files from src to lib and when i try to run jest I get a conflict between src/Template.js and lib/Template.js
Using Jest CLI v0.9.0, jasmine2, babel-jest
Error: Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: Template
Paths: src/Template.js collides with lib/Template.js
How should one deal with this scenario? Is there maybe a way to ignore one of the directories?
In package.json:
babel-cli#6.x
babel-jest#9.x
babel-polyfill#6.x
babel-preset-es2015#6.x
babel-preset-react#6.x
jasmine#2.x
jasmine-spec-reporter#2.x
jest-cli#0.9.x
Problem was that jest is by default searching the whole project for tests.
https://facebook.github.io/jest/docs/api.html#config-testpathdirs-array-string
Solution in package.json
"jest": {
"testPathDirs": [
"<rootDir>/__tests__", # Default is <rootDir>
"<rootDir>/lib" # Needed for automatic mocking to work
],
...
}

Categories

Resources