Hopefully a quick solution for this one.
I've just done an eject on a React app built in typescript to see if I can get a different problem working.
On trying to compile, I now get this error:
Module parse failed: Unexpected token (27:19)
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.
| }).catch(e => {
| // remove sensitive fields
> if (e.config?.data) delete e.config.data;
| if (e.response?.config?.data) delete e.response.config.data;
| super.analyticsHandler.error(`POST ${url} failed`, e);
My guess is the delete part is causing the problem but I'm not 100%. Maybe I am missing a babel plugin? The project was compiling before the eject.
Please let me know if there are any specific parts of code/config you need to see.
Thanks
EDIT:
This is the babel section in package.json:
"babel": {
"plugins":
[
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"babel-plugin-transform-typescript-metadata"
],
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
Related
decided to get rid of my babelrc as the new rust compiler is being promoted and encouraged by vercel. however doing so immediately breaks my build. this is the only thing in my babelrc.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}
and this is the error after i add
module.exports = {
swcMinify: true
to my next.config.js and i run next build
not sure what i'm missing here since development build works fine, just the build that seems to be breaking on compile. any help would be appreciated
Edit: as requested, this is the entire error
static/chunks/pages/_app-434406ef89d5b351.js from Terser
error: 'eval' and 'arguments' cannot be used as a binding identifier in strict mode
|
97440 | function eval(str) {
| ^^^^
Caused by:
0: failed to parse input file
1: error was recoverable, but proceeding would result in wrong codegen
2: Syntax Error
Error: error: 'eval' and 'arguments' cannot be used as a binding identifier in strict mode
|
97440 | function eval(str) {
| ^^^^
Caused by:
0: failed to parse input file
1: error was recoverable, but proceeding would result in wrong codegen
2: Syntax Error
Create a new file and name it .babelrc (if it does not exist) and add following content:
{
"presets": ["next/babel"]
}
Also open next.config.js and add swcMinify:false
I am using the latest version of webpack for my react project.
I am attempting to load png or jpgs. I was trying with the old "loader"s however I was still getting the "unexpected token" when trying to load an imported image.
I found from googling that Webpack 5 now uses Asset Modules to load assets now.
I've used the recommend module rule below:
module: {
rules: [
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource'
},
However when I attempt to build, I get this error:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[0].type should be one of these:
"javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
-> Module type to use for the module
I have been on this for the last 7hr hours with no luck. Any assistance would be appreciated. :)
You can try this to match images of different types.
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: "file-loader",
options: {
name: "asset/resource/[name].[ext]"
}
}
make sure the path exists.
Tip: Double check whether both installed packages: webpack and webpack-cli are up-to-date.
when creating a package which will serve as a library of reusable components(A), I'm getting the error below[1] when trying to use any of its components in another project(B).
When developing in the package itself (A), I get no such errors and all works. The issue only occurs when trying to e.g.:
import Home from 'ReusableComps';
...
return (
<Home /> // <- Error here
...
I can get by this error by adding something like the below to my (B) webpack[2], but I reckon that this is not a good solution. Am I missing something in the webpack, babelrc etc. in project (A) perhaps?
Thanks
[1]
Module parse failed: Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
[2]
module: {
rules: [
{
test: /\.js?$/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
],
}
I have a widget library that is created using React Native 0.55.3 and i am using the library in the web using React Native Web transpiler.
Currently my setup is React + TS + React Native Widgets (using RNW transpiler)
The library works fine in the web , but when i run the jest test case it starts complaining
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
I tried adding the following setup in the config file but with no avail .
"transformIgnorePatterns": [
"node_modules/(?!react-native-my-lib)"
],
Still it throws the same error , even tried adding transform and then pairing it to a mock file.
I am able to use the library in my project but the test case fails every-time
How can we fix this error ?
Right now what i have done in order to mitigate this issue is I have mocked the RN components as the RN components will be tested in their own Library and we will test the layout in React end mocking these components with string.
My solution [Please let me know if this is feasible]
create a mock file
module.exports = {
RN1COMP : '',
RN2COMP : ''
}
using module name mapper in jest
moduleNameMapper: {
"react-native-widgets": "<rootDir>/mocks/react-native-widgets.js"
},
Try this hope it works!!
"transformIgnorePatterns": [
"/node_modules/(?!(react-native|redux-persist|react-navigation.*?\\.js$))"]
Try this whole configuration in package.JSON
"jest" : {
"preset": "react-native",
"coveragePathIgnorePatterns": [
"allMocks.js"
],
"setupFiles": [
"<rootDir>/jest/allMocks.js"
],
"testPathIgnorePatterns": [
"/*/*.testdata.js$"
],
"transformIgnorePatterns": [
"/node_modules/(?!(react-native|redux-persist|react-navigation.*?\\.js$))"
],
"transform": {
"\\.(jpg|jpeg|PNG|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./fileTransformer.js"
},
"reporters": [
"default",
[
"./node_modules/jest-html-reporter",
{
"pageTitle": "Test Report",
"includeFailureMsg": true
}
]
]
}```
i keep getting the error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
this is my babelrc with the changes it is asking for:
{
"presets": [
["#babel/env"],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-syntax-jsx"],
["#babel/plugin-transform-react-jsx"],
["#babel/plugin-transform-react-display-name"],
["#babel/plugin-transform-react-jsx-self"],
["#babel/plugin-transform-react-display-name"]
]
}
Not really sure where i have the wrong syntax for the file. Also this is my first time configuring webpack4 with babel for a react application. Please let me know if everything looks fine for this to work with react.
Like the error says: you have a duplicate. ["#babel/plugin-transform-react-display-name"] is in your "plugins" array twice. Just delete one of them.
With that said: take a look at what's already included in preset-react (a preset is a pre-defined bundle of plugins). All of those plugins are already included (though "plugin-transform-react-jsx-self" is behind an option.)