I'm getting this error in an almost empty react component:
"[ts] Unterminated regular expression literal."
import * as React from 'react';
export default class EmptyComponent extends React.Component {
render() {
return (
<p>Hello</p>
);
}
}
I don't know what I'm doing wrong!
It turns out I was using the .ts file extension instead of .tsx
Make sure your component file extension is .tsx (if you're using Typescript) or .jsx (if you're using Javascript).
So my case was a bit unique. I had the same error message. but everything got fix after I restarted the build process (e.g. in this case I was working with storybook, so npm run storybook). The symptom was that, even I changed my file name to be .tsx the error still reporting the same file as .ts. That reminded me that I changed the file name when the build is already watching and running. That's when I decided restart the build command and wolaa! everything fixed itself.
Sometime its just that --- "Have you turn it off and on again?"
Just in case someone else runs across this and has named their file appropriately, re-inspect your regex to make sure you haven't accidentally created an invalid regex. For example, mine looked like:
/^https?:\/\/
and it should have been:
/^https?:\/\//
^ left this lil' guy off
You can also use an online regex tool to make sure you've created a valid regex.
I'm using WebStorm. The file is a .tsx file and turned out that after I close the file and re-open the file again, the issue is gone itself.
Related
I am getting the below error on a page that is stopping it being rendered and after checking other similar errors I have double checked the import is correct and the node_modules react index file is installed.
What else could be causing this? I have had linting issues yesterday out of nowhere that I thought had fixed themselves.
The file this refers to should be node_modules/React/react.indexjs but on my system is node_modules/react.index.js. I haven't changed this myself so i'm not sure where it has come from. I have also removed any code that was added to this file which could of been causing it.
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react'
This happens when you import react like this
import React from "React"
notice the capital R
instead, you should do :
import React from "react"
( with a small r )
This happens due to case sensitivity. Check if the file name is exactly the same in the same case.
Eg:
Cannot find file: 'CheckBox.js'
Check if the filename is exactly CheckBox.js not Checkbox.js
try creating the index.js in the src folder, i'm sure you created it outside the src folder.
I'm trying to implement drag and drop using this tutorial. In this tutorial i have to create a refs like this list = createRef<RecyclerListView<any, any>>() (line no 55), which is giving me syntex error: unexpected token. What i understand is that, they are using .tsx extension (don't know what for) but i'm using .js extension, which maybe the reason why this code not working in my end, and not finding any solution of that. Can anyone help me out on that? Thank you
.tsx extension is for Typescript files. Javascript is not a typed language. To put it simply, Typescript was built to make Javascript look like a typed language. Whatever you put in <> after createRef, specifies the type of the ref that is being created and you can only use types in Typescript files (.ts and .tsx). If you want to move to Typescript, you'll have to do some setup and change your file extensions to .tsx. Otherwise, if you'd like to stay on .js, just ignore the types in the tutorial and instead write list = createRef().
Im attempting to update an old version of the selenium-tcl package to work with the new W3C WebDriver (or Selenium 4.0).
Original packages uses a few mixins for the webdriver class.
So I modeled what I saw and created a mixin file named mixin_action_chains.tcl [1] which has a mixin class called Mixin_Action_Chains.
Whenever I attempt to use it I get the error:
% package require selenium
::selenium::Mixin_Action_Chains does not refer to an object
Im not sure why I've modeled it pretty much exactly as I have seen in the other files such as mixin_for_scrolling.tcl [2]* file. What am I missing.
Here is the entire GitHub Repo
Im not sure what else must be done for TclOO. Any thoughts.
Thanks
Im not sure what else must be done for TclOO. Any thoughts.
Update
pkgIndex.tcl: The placement of the mixin-defining script mixin_action_chains.tcl is wrong, it comes after the mixin has already been required in the previously sourced script webdriver.tcl, like entering directly:
% oo::class create C {
mixin ::not::defined
}
::not::defined does not refer to an object
You need to change the order of source command calls in the package ifneeded script.
For the records
Still, in the original version, there were unbalanced curly braces and brackets in your script, which broke sourcing of the file for me:
https://github.com/SavSanta/w3cselenium-tcl/pull/1
Attached is an image of what I am receiving when I try to bundle my project for production. I am receiving a Unexpected token name <<Object>>, expected punc <<,>> message as shown in the image.
Terminal output of error
Not sure what the issue is but I have tried to use uglify-es and uglify-js and get the same error. I even attempted to make a simple app using es6+ code to see if uglify-js worked and it did. So some of the older threads on the internet mentioning that uglify-js won't handle es6+ code might be irrelevant now. I also read somewhere that the newest version (3.x) does support it but haven't been able to confirm that.
I would love to show some code but not sure what relevant piece of code I need to show. As per the image it also mentions the line, col, pos etc... but the code on that line does not start at the col number mentioned.
I will definitely update this post as I investigate but any tips or ideas would be great!
So the issue is now resolved after some thorough research. It looks like the line 1665 I was looking at in my non-optimised bundle app.js was not what I needed to look at (obvious since the column index was way off).
So instead I decided to output the bundle generated code that FuseBox was working on and it was in-fact different. This is the line I added in node_modules/fuse-box/quantum/plugin/BundleWriter.js inside the uglifyBundle function to output the content so I could read it clearly.
fs.writeFile('bundle.txt', bundle.generatedCode);
The output in bundle.txt that was the issue and my actual TypeScript code is shown here:
// bundle.txt line 1665
this.wholesalerSettings = [object Object]
// actual project code
constructor() {
this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
this.API = this.setHostUrl();
}
So I took a look in my fuse.ts file and noticed I was not parsing the json object correctly.
public get wholesalerSettings()
{
const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
return JSON.stringify(wholesaler);
}
// then down in the environment plugin
EnvPlugin({
WHOLESALERSETTINGS: this.wholesalerSettings,
IMAGE_PATH: this.imagePath
}),
Once I parsed the object correctly with JSON.stringify it worked perfectly as process.env.WHOLESALERSETTINGS was now a JSON string instead of an Object.
First time I really dealt with devops stuff but was fun and at the same time highly stressful. I guess the main thing I learned is when you are dealing with tooling and third party tools (FuseBox uses uglify-js) then you need to take a closer look at the input that is being given to that tool rather than the output like I was at first.
UglifyJS says it sees Object where it's expecting a ,, so we can infer:
The code you wrote (or generated by some other tool right before uglifyJS processes it, e.g. babel? Though you probably don't use babel since your uglifyJS deals with es6 directly) is "Object" where the error occurs.
It's expecting a ,, so the error is occuring at some place like multiple variable declaration, let foo, bar, or object/array definition, [1, 2] {foo: 1, bar: 2}
In my webpack config file, i have multiple entry points:-
entry: {
bundle: "./src/index1.js",
rUI: "./other/src/js/ui/index2.js"
},
In index1.js file, all imports are getting resolved, but in index2.js which looks like following
import someModule from "./components/SomeModule/SomeModule";
export default SomeModule;
it's not able to resolve someModule (though the relative path is correct and file exits) and gives error - Cannot find module "./components/SomeModule/SomeModule" on browser console...
However, if I bring the entire contents of someModule.js, there is no issues.. which means that there is some problem with path. Not able to figure out why...
Any help is highly appreciated.
Not really a way to solve your problem, but if you are having trouble with import paths, I'd recommend having a look to something like babel-root-import pluging.
It has saved me so many headaches.
I solved it. Though the same code worked using require instead of import. But to make the same code work, I had to add additional preset - es2015 and react. Something like
"babel?presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=transform-object-rest-spread"