I keep getting below error in my react app. Not sure what is the issue.
/Users/823222/miniapp/node_modules/headers-polyfill/lib/Headers.js 9:25
Module parse failed: Unexpected token (9:25)
File was processed with these loaders:
../../node_modules/source-map-loader/index.js
You may need an additional loader to handle the result of these loaders.
| class HeadersPolyfill {
| // Normalized header {"name":"a, b"} storage.
[NORMALIZED_HEADERS] = {};
| // Keeps the mapping between the raw header name
| // and the normalized header name to ease the lookup.
Looks like this is due to a recent change in this package, that changed how the symbols were declared:
https://github.com/mswjs/headers-polyfill/pull/33/files
I've started a GitHub issue here, feel free to add details about your environment:
https://github.com/mswjs/headers-polyfill/issues/36
TL;DR: There was a significant change to how the module is prepared in a recent release, I reverted to 3.0.4 and things are working again for me.
Edit:
3.0.10 released that reverts the build target and fixes this issue:
https://github.com/mswjs/headers-polyfill/releases/tag/v3.0.10
Related
I've installed Chart.js v4.0.1 to be used in my react project, when I try to import chart.js module like this:
import Chart from 'chart.js/auto'
It shows an error in my terminal that said that the parsing of the module has failed.
./node_modules/chart.js/dist/chart.js 554:18
Module parse failed: Unexpected token (554:18)
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.
| };
| class DatasetController {
> static defaults = {};
| static datasetElementType = null;
| static dataElementType = null;
Is this happening because somehow there are some deprecated packages in my node modules and the newest chart.js version is still so bleeding edge that it requires a bit workaround in order for it to work?
This is because you likely are using we pack 4 which does not support static properties, so you will need to update to webpack 5, or use the babel/preset-env config with the babel loader to transpile it
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
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| / required styles /
|
.leaflet-pane,
| .leaflet-tile,
| .leaflet-marker-icon,
i have tried many solution but nothing changes i am stuck here for 3 hours
Take a look here: https://blog.logrocket.com/react-leaflet-tutorial/
Replace the "browserslist" values in the package.json
I am using react-codemirror2. I used npx create-react-app appname to create my app.
But when I try to run the development server it gives me the following error -
./node_modules/codemirror/mode/rpm/changes/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!doctype html>
|
| <title>CodeMirror: RPM changes mode</title>
One solution suggested to change the modulesDirectories. I tried doing so using npm run eject. But wasn't successful at doing it.
Please help me with the same
Go to solutions section if you are in a hurry.
The why
The reason for this error is the way bundling dynamic imports works in webpack. Imports go by providing a starting part of a path and you may refine that through an end part that holds a path that precise an extension.
Ex:
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
ref: https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
Such an import is processed by webpack through the following regex ^\.\/.*$. That we can see in the error message:
| <title>CodeMirror: RPM changes mode</title>
# ./node_modules/codemirror/mode/ sync ^\.\/.*$ ./rpm/changes/index.html
And that's basically to determine the possible modules. And bundle them as chunks for code splitting.
Because of that open matching regex. So all files of all types (extensions) are matched. Then depending on the extension. The correct loader would be used. If we had the html-loader setup and configured through a rule. That wouldn't fail. As the loader will handle that module (webpack module [html]). Even though that can be an option to handle the problem. It wouldn't be the right thing to do. As it would create an extra bundle for the module. And also some entries for it. In the main bundle.
Dynamic Imports types and there resolution
All types get code splitted (chunks created for them for code splitting). Except for the last one.
Absolute full path. (static) ==> Imported dynamically and code splitted.Ex:
import('codemirror/mode/xml/xml')
The exact path and module will be resolved and a chunk for it will be created.
Dynamic path with a starting path.
Ex:
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
All paths with this regex codemirror\/mode\/.*$ are matched.
Dynamic path with a starting path and an ending path with extension as well.ex:
import(`./locale/${language}.json`)
All paths with the following regex would be matched ./locale/.*\.json which limit it to .json extension module only.
Full variable import.Ex:
import(someVar)
Doesn't create code splitting at all. Neither tries to match. Because it can match just quite anything in the project. Even if the variable is set to a path someVar = 'some/static/path'. It wouldn't check and resolve the variable association.
The solutions
No electron or electron.
module.noParse
module: {
noParse: /codemirror\/.*\.html$/,
rules: [
// ...
noParse tell webpack to not parse the matched files. So it both allows us to exclude files and boost the performance. It works all great. And can be one of the best solutions as well. You can use a regex. Or a function.
ref: https://webpack.js.org/configuration/module/#module-noparse
Don't use the import('some/path' + dynamicEl) format and use instead
const dynamicPath = 'some/path' + dynamicEl
import(dynamicPath) // That would work just ok
Use magic comments [wepackExclude or wepackInclude] with import (if electron and using require => convert require to import + magic comment). Magic comments don't work with require but only import.
ex:
import(
/* webpackExclude: /\.html$/ */
`codemirror/mode/${snippetMode}/${snippetMode}`
)
or even better
import(
/* webpackInclude: /(\.js|\.jsx)$/ */
`codemirror/mode/${snippetMode}/${snippetMode}`
)
Include allows us to make sure we are targeting exactly what we want to target. Excluding HTML. May still create chunks for some other files that are not .js. It's all relative to what we want. If you want to include only a specific extension. An include is better. Otherwise, if we don't know. And some other extension would be required. Then an exclude is better.
ref: https://webpack.js.org/api/module-methods/#magic-comments
Magic comments examples and usage:
// Single target
import(
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackExports: ["default", "named"] */
'module'
);
// Multiple possible targets
import(
/* webpackInclude: /\.json$/ */
/* webpackExclude: /\.noimport\.json$/ */
/* webpackChunkName: "my-chunk-name" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
/* webpackPreload: true */
`./locale/${language}`
);
And to fully ignore code splitting
import(/* webpackIgnore: true */ 'ignored-module.js');
If nodejs or electron and the import should be processed as commonjs require. Use the externals config property like in the example bellow:
externals: {
'codemirror': 'commonjs codemirror'
}
which works like this. Webpack for any import with codemirror (left part). convert it to the commonjs import without bundling it (right part).
import(`codemirror/mode/${snippetMode}/${snippetMode}`)
will be converted to:
require(`codemirror/mode/${snippetMode}/${snippetMode}`)
instead of bundled.
extenals doc ref: https://webpack.js.org/configuration/externals/#externals
If electron. And the feature should not be bundled. use window.require for all nodejs electron API calls (Otherwise set it on entry file window.require = require). And use it instead.
Its electron, nodejs ==> Webpack stay the hell out of this
The doctype declaration is incorrect, it should have been:
<!DOCTYPE html>
Notice DOCTYPE should be in caps.
This is my data structure
WEBVTT
00:00:15.000 --> 00:00:17.951
At the left we can see...
00:00:18.166 --> 00:00:20.083
At the right we can see the...
00:00:20.119 --> 00:00:21.962
...the head-snarlers
I am trying to parse a web vtt file. For this I wrote :
var data = require('./captions.en.vtt');
Error
client:47 ./src/captions.en.vtt
Module parse failed: C:\Users\sampr\Desktop\MyVIew\WebVtt\src\captions.en.vtt Invalid number (3:0)
You may need an appropriate loader to handle this file type.
Could someone please help me?
You need a appropriate loader for the file type (.vtt).
Install file-loader (npm install --save-dev file-loader) and you could use it directly like this:
var data = require('file-loader!./captions.en.vtt');
Using Next.js, I ended up using this solution.
...add a file called staticdata.js inside the pages/api folder. This will create a Serverless Function that will load the json data from the file, and return it as a response.
Basically the solution is to return the data from an API endpoint.