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.
Related
I updated the node module fix-pathbecause it was crashing intermittently.
After updating the node module I cannot use it in my main.js file as it throws the following error:
So instead of using it in the main js, I moved this piece of code to a different file which goes through the webpack build process. But then the webpack build fails as it does not recognize 'node:process'.
ERROR in ./node_modules/default-shell/index.js
Module not found: Error: Can't resolve 'node:os' in '/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell'
resolve 'node:os' in '/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell'
Parsed request is a module
using description file: /Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/package.json (relative path: .)
resolve as module
/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/node_modules doesn't exist or is not a directory
/Users/shashi/projects/trici-atman-desktop/node_modules/node_modules doesn't exist or is not a directory
/Users/shashi/projects/node_modules doesn't exist or is not a directory
/Users/shashi/node_modules doesn't exist or is not a directory
/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
looking for modules in /Users/shashi/projects/trici-atman-desktop/node_modules
using description file: /Users/shashi/projects/trici-atman-desktop/package.json (relative path: ./node_modules)
using description file: /Users/shashi/projects/trici-atman-desktop/package.json (relative path: ./node_modules/node:os)
no extension
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os doesn't exist
*
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os* doesn't exist
.js
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.js doesn't exist
.json
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.json doesn't exist
as directory
/Users/shashi/projects/trici-atman-desktop/node_modules/node:os doesn't exist
[/Users/shashi/projects/trici-atman-desktop/node_modules/default-shell/node_modules]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node_modules]
[/Users/shashi/projects/node_modules]
[/Users/shashi/node_modules]
[/Users/node_modules]
[/node_modules]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os*]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.js]
[/Users/shashi/projects/trici-atman-desktop/node_modules/node:os.json]
# ./node_modules/default-shell/index.js 2:0-33 12:18-26
# ./node_modules/shell-env/index.js
# ./node_modules/shell-path/index.js
# ./node_modules/fix-path/index.js
# ./desktopServices/AppService.js
# ./desktopServices/desktopServices.js
After seeing the answer to this question, I tried changing the target of my webpack from electron-main to node. But it still did not recognize.
How do I fix this?
This was fixed by upgrading webpack from 4 to 5.
I'm trying to add environment variable inside .env file in my nuxt project.
My Nuxt.js version is 2.15.3
Here is a snippet from my nuxt.config.js:
export default {
publicRuntimeConfig: {
baseURL: process.env.BASE_URL
},
ssr: false,
target: 'static',
}
Here is my .env file:
BASE_URL=https://my-url.smth
But when I run npm run dev then nuxt gives error:
ERROR in ./.env 1:14 Module parse failed: Unexpected token (1:14) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I was guided by this article https://nuxtjs.org/tutorials/moving-from-nuxtjs-dotenv-to-runtime-config/
Also it DOES NOT work with the old way through the #nuxtjs/dotenv.
EDIT: the solution was to wrap the variable into double quotes like this BASE_URL="https://my-url.smth".
I've wrote an in-depth answer on the subject.
As mentioned in it, please do not use the #nuxtjs/dotenv package.
If you still have an issue, we'll probably need more details or at least a repro to help you more efficiently.
I am writing a JavaScript es6 module which contains "Mocha" test-cases which test a JavaScript es6 module containing the actual functionality of my app.
I am trying to import nodejs module "module" via es6 import like so:
import { createRequire } from 'module';
Next I create a "require" function by calling "createRequire":
const require = createRequire(import.meta.url);
Afterwards I try to use "require" to import nodejs modules:
const chai = require('chai');
const assert = chai.assert;
I put that all together in a HTML file, started a web-server and opened the HTML file in the browser.
Unfortunately, the first line gives me an error in the console of the Browser Firefox:
TypeError: Error resolving module specifier: module
The browser Chromium gives me the following error message:
Uncaught TypeError: Failed to resolve module specifier "module". Relative references must start with either "/", "./", or "../".
Actually, giving relative references is not working either:
I installed the nodejs module "module" (npm install module) and used a relative path to that module. Unfortunately, the browser does not know how to load the module because no concrete entrypoint is given.
I just tried stick to the manual but had no luck:
https://nodejs.org/api/modules.html#modules_module_createrequire_filename
What do you think? How should I change my code so that this works?
Many thanks in advance for your valuable advice.
I hope you've installed the module using 'npm install module' command, try using commonJS pattern and include the module in the following way
const { createRequire } = require('module');
require() is used to load files in node, and module is a node module.
These things don't exist in browsers.
You do these things, and running mocha tests in node. There should be no browser, just a command line.
I'm getting the following errors when I execute the npm start command on a react project.
Failed to compile.
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\React\react.js` does not match the corresponding path on disk `react`.
# ./~/react-scroll-pagination/dist/index.js 3:27-43
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.js` does not match the corresponding path on disk `jquery`.
# ./~/react-scroll-pagination/dist/index.js 3:45-62
I'm new to react - but from what I can tell it's a pathing issue where npm install adds modules into the node_modules folder, all with lowercase folder names, but the compiler resolves to folder names with mixed case paths.
How do I fix this? The code is from the MongoDb Stitch PlateSpace tutorial project
Do I updated the existing code (maybe the import statements) or is it a npm or react issue?
Thanks
Tim
I come across the same problem.
I replaced :
import React, {Component} from 'React', with :
import React, {Component} from 'react'.
React is case-sensitive, so be careful and good luck.
For anyone facing this issue who is using CRA, I was getting this error and was not understanding why. My VS Code clearly showed the correctly named file, so I decided to check in the terminal:
ls -la [path/to/file/location]
I then actually saw that the file was in fact lowercase!
I renamed the file via the terminal and re-listed it to confirm:
mv src/create_page/createPage.jsx src/create_page/CreateDashboard.jsx
ls -la [path/to/file/location]
This fixed my issue, so at the end, I am not sure why this happened, maybe because my VS Code was not autosaving before I set the settings flag.
Solved it...
I haven't import all the libraries. So, I went to my root folder and excecute.
npm install
then
npm start
You may be executing the npm install / start inside of the wrong folder. I would delete the current directory and make sure to run the install in:
cd /stitch-examples/helloworld/react-example/
then
npm install
npm start
For this error :
import React from 'react'; in your index.js file . For this error : Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace this code import React from 'react'; in your index.js file .
For this error :
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace the code with import Jquery from './jquery';
Don't worry this errors will shows pretty commonly its because react is a case sensitive.
For me the issue was the files on my disk was named filename.js, but my imports were doing this import thing from 'fileName.js'.
Renaming the file from filename.js to fileName.js on disk fixed the issue.
It's my first React component for publication in NPM. I use react-webpack-component package from Yeoman to start my project. But when I install and import my component to React app, I catch error:
Failed to compile.
Error in ./~/kladrapi-react/index.js
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`.
# ./~/kladrapi-react/index.js 1:82-98
I'm understand this error, but not understand how correctly import React modules to my component!
Actual version on GitHub
I think there are multiple issues in your code.
In index.html:
#line-- <script src="kladrapi-react.js"></script>
The file name is "kladrapi-react.jsx" not "kladrapi-react.js".
Second issue, here you are expecting "kladrapi-react.js(x)" to be on root level. Which is not the case. According to your folder structure "kladrapi-react.js(x)" file is at ./lib/kladrapi-react.jsx.
Apart from this, in your kladrapi-react.js(x) file you have mixed ES5 and ES6 syntax. You are accessing the variable KladrapiReact in index.html but you haven't exported it as 'KladrapiReact'. I would recommend you to put 'React.createClass....' code in a separate component.
For the error you are receiving you need to use 'case-sensitive-paths-webpack-plugin':
This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk.
npm install --save-dev case-sensitive-paths-webpack-plugin
Usage:
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var webpackConfig = {
plugins: [
new CaseSensitivePathsPlugin()
// other plugins ...
]
// other webpack config ...
}
For more info on this plugin read documentation here.
Module not found: [CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js does not match the corresponding path on disk react.
# ./~/kladrapi-react/index.js