Problem in importing chessboard.js in vue application - javascript

I am trying to import chessboard.js on my jetstream-vue application. After creating the project I ran
npm install #chrisoakman/chessboardjs
and it's in my node_modules folder. But when i tried import Chessboard from '#chrisoakman/chessboardjs' on app.js it shows error as
ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve '#chrisoakman/chessboardjs' in '/home/user/project-chess/resources/js'
# ./resources/js/app.js 9:0-51
# multi ./resources/js/app.js ./resources/css/app.css
Is there any other way I should try to import it or from to a different file than app.js.


#chrisoakman/chessboardjs can't be imported, since it doesn't export anything.
Look at the code, at the end it says:
// TODO: do module exports here

Related

Module Not Found React Js

Failed to compile.
Module not found: Error: You attempted to import ../components/App which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
ERROR in ./src/index.js 6:0-36
Module not found: Error: You attempted to import ../components/App which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
webpack compiled with 1 error
i am getting the above error when i am trying to rum my react app. I was learning and a beginner at react js. i was learning about mapping in reactjs and when i run my app i am getting this error anyone please solve this.
the file system allocation is below.

Use import App from "./components/App" instead of import App from "../components/App";

../ means that you want to go out from the folder in which your file is. that means that ../ takes you under mapping so you import like this
import App from "../src/components/App"
but it is better to not go out and use ./ to stay under src and import like this :
import App from "./components/App"
both are correct.

What is the correct way to import a NPM module

I ran 'npm install p-queue --save'. I found "p-queue": "^7.1.0" in the package.json file. In main.js file, I import p-queue by using 'const PQueue = require('p-queue');' But I got these error messages
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
require() of ES modules is not supported.
Then I import p-queue by using 'import PQueue from 'p-queue';'. The error message is
SyntaxError: Cannot use import statement outside a module
I want to know what is the correct way to import p-queue module? I hope someone can help me solve this issue.
Thanks!

How to fix Module not found: Error: Can't resolve 'datatables.net' on Webpack

I want to bundle the vendor dependencies of my website using webpack, but I'm having a problem with jquery dependant dependencies. The only thing I need is to bundle the files into one, and import it on my index.html. It seems to me that webpack is trying to import things from the library, which is not necessary, the final bundle is the goal.
ERROR in ./plataforma/assets/js/dataTables.checkboxes.min.js
Module not found: Error: Can't resolve 'datatables.net' in '/Users/julianograms/Documents/Mapi/mapi-front/plataforma/assets/js'
# ./plataforma/assets/js/dataTables.checkboxes.min.js 5:62-145
# ./plataforma/src/vendor.js

react or npm issue: Module not found: [CaseSensitivePathsPlugin] `...\react.js` does not match the corresponding path on disk `react`

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.

exception while importing module in ember js

I need to remove diacritics from string in emberjs app.
I found a plugin for this: fold-to-ascii
but I don't know how to use it in my app.
I added this plugin via npm and it is visible under node_modules folder in my app
In docs usage of this plugin is:
var foldToAscii = require("fold-to-ascii");
foldToAscii.fold("★Lorém ïpsum dölor.")
but i get an exception:
Uncaught Error: Could not find module fold-to-ascii
also tried importing it like #Kori John Roys suggested:
import foldToAscii from 'fold-to-ascii'
but it gives me only new exception:
Error while processing route: transports.index
Could not find module fold-to-ascii imported from test-ember/pods/transport/model
What am I doing wrong ?

Assuming you are using ember-cli:
npm install --save-dev ember-browserify
then you can import like this:
import foldToAscii from "npm:fold-to-ascii"

Categories

Resources