When I try to import Gun into a svelte component using var Gun = require("gun/gun"), all I get is this error:
WARNING in ./node_modules/gun/gun.js 5:16-28
Critical dependency: the request of a dependency is an expression
# ./src/Header.svelte 196:11-29
# ./src/App.svelte 16:0-37 23:14-20 125:41-47
# ./src/main.js 3:0-31 5:16-19
The webpack docs say that this is due to my request containing expressions, but this doesn't seem like the case.
For importing the gun in svelte js file try this code below
import GUN from 'gun';
This will work
Related
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
I'm trying to understand how this import from # I can't run npm run dev because the module is not found. I think I'm missing something, below are the screenshot and the errors.
As you can see Module not found because of #
Here is my route.js that has # .
I've been trying for a few hours replacing a link-based pdf.js with an npm install of pdfjs-dist, since I noticed that my links were not meant to be used as cdns and could become unstable as described here.
I could not find much documentation on how to make that work other than a few examples, and when Webpack is involved they are mostly with React, while I am simply using ES6 in a Django framework (static compiling on the desired django directory, without using the webpack-plugin.)
After exchanging several messages with one of the guys that work on pdf.js it seemed that my compiling errors were probably due to how Webpack handles internally the library. Here's what I am seeing:
WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileAsyncWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
# ./node_modules/worker-loader/dist/index.js
# ./node_modules/worker-loader/dist/cjs.js
# ./node_modules/pdfjs-dist/webpack.js
# ./src/js/views/pdfViews.js
# ./src/js/index.js
WARNING in ./node_modules/worker-loader/dist/index.js
Module not found: Error: Can't resolve 'webpack/lib/web/FetchCompileWasmPlugin' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/worker-loader/dist'
# ./node_modules/worker-loader/dist/index.js
# ./node_modules/worker-loader/dist/cjs.js
# ./node_modules/pdfjs-dist/webpack.js
# ./src/js/views/pdfViews.js
# ./src/js/index.js
ERROR in (webpack)/lib/node/NodeTargetPlugin.js
Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'
# (webpack)/lib/node/NodeTargetPlugin.js 11:1-18
# ./node_modules/worker-loader/dist/index.js
# ./node_modules/worker-loader/dist/cjs.js
# ./node_modules/pdfjs-dist/webpack.js
# ./src/js/views/pdfViews.js
# ./src/js/index.js
Child HtmlWebpackCompiler:
1 asset
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./src/src-select.html] 4.57 KiB {HtmlWebpackPlugin_0} [built]
Child worker-loader node_modules/pdfjs-dist/build/pdf.worker.js:
Asset Size Chunks Chunk Names
index.worker.js 1.33 MiB pdf.worker [emitted] pdf.worker
Entrypoint pdf.worker = index.worker.js
[./node_modules/pdfjs-dist/build/pdf.worker.js] 1.25 MiB {pdf.worker} [built]
[./node_modules/process/browser.js] 5.29 KiB {pdf.worker} [built]
ℹ ｢wdm｣: Failed to compile.
Theoretically the pdfjs-dist should come with a zero configuration file, without even needing to set up a worker for it, so code like the one below should work:
import pdfjsLib from 'pdfjs-dist/webpack'
////////////////////////////////////////////
//// instantiate pdf
export const pdfView = () => {
// pdfjsLib.GlobalWorkerOptions.workerSrc = 'index.worker.js';
// var defined through a Django template tag
const loadingTask = pdfjsLib.getDocument(pdfData.myPdfDoc)
pdfData.myPdf = loadingTask.promise.then(pdf => {
pdfData.pdfTotalPageN = pdf.numPages;
return pdf;
})
}
but it doesn't get compiled, and I would really appreciate some pointers.
Thanks in advance
This issue seems to arise due to esModule option introduced in worker-loader#3.0.0.
The fix for this was merged in (pre-release) pdjs-dist#2.6.347
You can fix this by either upgrading pdfjs-dist to v2.6.347 OR downgrading worker-loader to v2.0.0
I just had to solve this issue myself...
This issue
Module not found: Error: Can't resolve 'module' in '/home/giampaolo/dev/KJ_import/KJ-JS/node_modules/webpack/lib/node'
Is caused by worker-loader loading NodeTargetPlugin, which in turn runs require("module") which I think (but I'm not 100%) is for native node modules, which when running Webpack targeted for web is not relevant
This issue can be mitigated with Webpack config
{
node: {
module: "empty"
}
}
Afterwards, things move along farther, but I needed further mitigations:
import pdfjsLib from "pdfjs-dist/webpack";
This runs pdfjs-dist/webpack.js:27 which is
var PdfjsWorker = require("worker-loader!./build/pdf.worker.js");
Which is attempting to load pdf.worker.js (which worker-loader should be packaging) and then tries to instantiate the class:
pdfjs.GlobalWorkerOptions.workerPort = new PdfjsWorker();
The issue I had was that Webpack packaged pdf.worker.js as an esModule (the default for worker-loader), so the way it was require'd needs to be unwrapped with the default property on the imported esModule (said another way, the instantiation would have to be new PdfjsWorker.default()
I was able to mitigate this with the NormalModuleReplacementPlugin plugin, which is able to re-write the require statement based on a regex match/replace, which is matching the original require string and replacing it with one that sets the worker-loader option esModule=false, followed by the absolute path to the pdf.worker.js file on the local system:
new webpack.NormalModuleReplacementPlugin(
/worker-loader!\.\/build\/pdf\.worker\.js$/,
"worker-loader?esModule=false!" + path.join(__dirname, "../", "node_modules", "pdfjs-dist", "build", "pdf.worker.js")
)
It's important to match the complete original require string of /worker-loader!\.\/build\/pdf\.worker\.js$/ and not just the pdf.worker.js part, because you could end up in an infinite replace loop.
You need to fix the replacement string to be a proper path for your project, which would probably be
"worker-loader?esModule=false!" + path.join(__dirname, "node_modules", "pdfjs-dist", "build", "pdf.worker.js")
I have a ../ in my path because this code is being executed inside storybooks .storybook/ folder, so I have go up a directory to get to node_modules/
And with those two changes, everything for PDF.js seems to be working.
And lastly, if you want to ignore the warnings about the missing FetchCompileWasmPlugin and FetchCompileAsyncWasmPlugin modules, you can setup the webpack IgnorePlugin to just ignore these imports, my assumption is they're WASM based and not actually needed
plugins: [
new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileWasmPlugin$/ }),
new webpack.IgnorePlugin({ resourceRegExp: /FetchCompileAsyncWasmPlugin$/ })
]
I'm guessing there might be some out-of-date mismatch of worker-loader and the modules in the currently installed Webpack version, but these WASM modules don't seem to be necessary for our purposes
If you're fine with using a cdn then use this
import pdfJS from 'pdfjs-dist/build/pdf.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
Make sure to import minified versions on production
import pdfJS from 'pdfjs-dist/build/pdf.min.js';
pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.min.js';
Or you can just use minified versions all the time
It worked with:
var pdflib = require('pdfjs-dist/build/pdf.js');
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.js';
pdflib.GlobalWorkerOptions.workerPort = new pdfjsWorker();
if webpack is failing because of optional chaining consider pointing to the legacy version which omits modern syntax.
import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.js'
instead of
import * as pdfjs from 'pdfjs-dist'
Go to
node_modules/pdfsj-dist/package.json
In
"peerDependencies": {
"worker-loader": "^3.0.8" -> Version
},
Install version
npm i worker-loader#3.0.8
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