This is my error
10:03:56.049 ./components/navbar.js
10:03:56.049 13:33 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
10:03:56.049 39:33 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
10:03:56.049 Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
10:03:56.051 info - Creating an optimized production build...
10:04:04.307 Failed to compile.
10:04:04.308 HookWebpackError: Unexpected '/'. Escaping special characters with \ may help.
10:04:04.308 > Build error occurred
10:04:04.309 Error: > Build failed because of webpack errors
10:04:04.309 at /vercel/path0/node_modules/next/dist/build/index.js:15:924
10:04:04.309 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
10:04:04.333 Error: Command "npm run build" exited with 1
At first I thought it was coming from navbar.js but I don't see any "special characters" there, here is my navbar.js: https://pastebin.com/8XFUtL5A
So then I went and checked node_modules/next/dist/telemetry/trace/trace.js:6:584 and I found a lot of comments there: https://pastecord.com/epygazosib.js
So how do I solve this error? Because I saw a similar error someone else had but they are using angular
I have fixed this by simply removing all the comments in all my css files
In my case I made a mistake in the comments in my stylesheet page.
I had something like this
/*/*Comment*/
*/.className{
}
so removing the comment solved the bug for me.
/*Comment*/
.className{
}
Related
10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?
Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.
I know there are lots of "marked is not a function" questions, but they don't solve my problem, hence here is the question.
Previously I think I npm i marked and npm i react-markdown, then I try to include markdown using the solution How do I load a markdown file into a react component?
However, I keep getting either of these error:
🚨 The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null
at new NodeError (internal/errors.js:322:7)
at Hash.update (internal/crypto/hash.js:84:11)
at Bundle.getHash (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundle.js:301:12)
at Bundle.package (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundle.js:186:23)
at Bundle.package (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundle.js:198:30)
at Bundle.package (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundle.js:198:30)
at Bundler.bundle (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:325:49)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async Timeout._onTimeout (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:817:7)
Or
🚨 /home/azureuser/NCD_demo/main_project/src/webpages/assets/posts.md: marked is not a function
at MarkdownAsset.generate (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/assets/MarkdownAsset.js:12:12)
at async MarkdownAsset.process (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Asset.js:217:24)
at async Pipeline.processAsset (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Pipeline.js:46:7)
at async Pipeline.process (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Pipeline.js:24:23)
at async Object.run (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/worker.js:15:12)
at async Bundler.loadAsset (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:577:19)
at async /home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:610:13
at async Promise.all (index 4)
at async Bundler.loadAsset (/home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:599:21)
at async /home/azureuser/NCD_demo/main_project/node_modules/parcel-bundler/src/Bundler.js:610:13
I got the first error if I run npm run dev then I uncomment this line, after which it reloads itself
const content = require('./assets/posts.md');
Then I got the latter error if I don't comment it, CTRL+C the previous npm dev run, then npm dev run again with it uncommented.
I got the same error if I do this instead:
import file from "./assets/posts.md";
I even try to
Without the line, everything runs fine.
I even tried remove package-lock.json and node_modules, remove the dependencies for React-markdown and marked packages (so they don't get installed), but I still got the similar problem: Except that I don't get the first error but white screen of death.
Anyone encountered the same problem before could help me understand what is happening with this? Which error code is correct and how should I fix it?
Thanks in advance.
Guyz getting this error i have added pdf.js file also and i'm upgrading node version that time i have got this error if anyone know please let me know
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js 3042:46
Module parse failed: Unexpected token (3042:46)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| key: "getJSActions",
| value: function getJSActions() {
return this._jsActionsPromise ||= this._transport.getPageJSActions(this._pageIndex);
| }
| }, {
It's a compile error. Node said "you need an additional loader to handle this issue" which means while you update you node, something happens in one of your loader file. You should re-install "the issue loader" and then run it again. Are you building your app with CRA template? if so, you should re-install CRA template again and then move all files into the new project folder and run it.
I hope you find a solution! :D
In a bare bones project, I added these build hints:
android.gradleDep=compile 'com.erikagtierrez.multiple_media_picker:multiple-media-picker:1.0.5'
android.min_sdk_version=23
I would like to import the following Android library to make a CN1Lib (that requires at least Android SDK 23):
https://github.com/erikagtierrez/multiple-media-picker
To be short: I spent one day trying to import that, I also experimented with Android Studio and with suggestions found on Stack Overflow (trying to make a custom .aar), without success.
Could you help me to import that library? There is manifest merger error.
In fact, the issue reported by the build server is:
* What went wrong:
Execution failed for task ':processReleaseManifest'.
> Manifest merger failed : Attribute application#label value=(BareBones) from AndroidManifest.xml:15:17-42
is also present at [com.erikagtierrez.multiple_media_picker:multiple-media-picker:1.0.5] AndroidManifest.xml:23:9-41 value=(#string/app_name).
Suggestion: add 'tools:replace="android:label"' to <application> element at AndroidManifest.xml:15:3-43:103 to override.
I also tried to add the build hint:
android.xapplication_attr=tools:replace="android:label"
as suggested by the previous error, without success.
In the last case, I get:
Merging result: ERROR
/tmp/build1659178556337293135xxx/Test/src/main/AndroidManifest.xml:15:3-43:103 Error:
tools:replace specified at line:15 for attribute android:label, but no new value specified
/tmp/build1659178556337293135xxx/Test/src/main/AndroidManifest.xml Error:
Validation failed, exiting
-- Merging decision tree log ---
The last full log is here: https://gist.github.com/jsfan3/dd6c23f86a2ac949f996910c8cece62b
Thank you
This is happening because our code things you injected android:label on your own and doesn't inject it to avoid collision...
Change the code to this:
android.xapplication_attr=tools:replace="android:label" android:label="App Name"
I am trying to show a static pdf in React app. I have tried a lot of packages:
react-pdf
react-pdf-js
react-pdf-js-infinite
simple-react-pdf
pdfjs-dist
react-pdf-pages
They often say that we can use the URL, or pdf file for the props for the PDF component easily, but I cannot use either.
I had two main errors.
As I want to use myPDF for the props for the component, I write this:
import myPDF from 'path/to/pdf_file';
then, render_some_component pdf:{myPDF}
Here is the error:
ModuleParseError in
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
(When I comment that line, this kind of error disappears)
I used the file-loader in webpack config, I have tried many different ways but failed.
I use the pdf file directly for the props like this:
render_some_component pdf:{'path/to/pdf_file'}
In the Console:
Warning: Setting up fake worker.
11:23:55.962 pdf.worker.js:349 Warning: Ignoring invalid character "33" in hex string
11:23:55.963 pdf.worker.js:349 Warning: Ignoring invalid character "79" in hex string
...
There are a lot of 'Ignoring invalid character' like that and it always ends with:
localhost/:1 Uncaught (in promise) InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
In the Network, Headers, I see:
Request URL:http://localhost:3000/myPdfFile.pdf
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000
but In the Network, Response, I see just the HTML layout.
I think the pdf file is loaded correctly but the package cannot recognize its PDF structure.
Except that two main errors, I had another error related to the Worker used in the packages but I don't know how to fix it:
Uncaught DOMException: Failed to construct 'Worker'
(This is something relates to Chrome as people say Chrome does not allow Worker in the local server)
Any help is highly appreciated as I am stuck in this in 4 days already.
Can you pleas clarify what you main task is?
If I understood it right you want to display a PDF file that already exists in a part of your application? You don't want to create a new PDF with JavaScript.
If you want to just show a PDF have you tried to use iframe?
Something like this:
<iframe
title="file"
style={{ width: '100%', height: '100%' }}
src={downloadURL}
/>
You ca use here also relative paths to the file from the location where your Component is or use full URLs to the file.