I have this Error: Webpack Compilation Error, after trying to import a component into my cypress test spec
am on React version 17.0.0 and React-dom v17.0.0
What might be causing this?
here is the image of the error
You can see your webpack logs by running cypress when [documenting][1] in debug mode
[1]: https://docs.cypress.io/guides/guides/debugging#Print-DEBUG-logs
Mac/Linux
DEBUG=cypress:* cypress run
Windows
set DEBUG=cypress:*
cypress run
Everything you do in Cypress is logged in,
one of which is cypress:webpack, which can give you the full message.
And Also please try, adding an empty .babelrc file to the cypress roo directory allowed me to work around this issue.
cypress/.babelrc
{}
Related
So I have package 1 that I wrote in Typescript that contains mocha tests and I'm pretty sure that it works as it should. I push all the code to the git provider and pull it via npm on package 2. When I start React with Typescript on package 2, I get the following:
I tried adding webpack.config.js, various tsconfig.json configuration changes and multiple npm commands that are connected to cache cleaning and reinstalling but nothing works. This error is just plain weird because, from what I know, there shouldn't be any compilation errors regarding class variables.
FIX
This was a very quick fix. So, in short, if the provider with which you started your Typescript application doesn't provide you with webpack or babel file you will have to transpile any module from node_modules into Javascript that you try to import. In this case I just transpiled package 1 and package 2 worked perfectly.
The official introduction React Testing Library | Testing Library links to a tutorial page React Testing Library Tutorial. In the tutorial it says "After running your test on the command line, you should see the HTML output of your App component". First of all, what tf does this the command mean?? I thought, but anyways I tried npx jest, got an error as the title, the detailed error as the below:
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
I guess the tutorial is for create-react-app users maybe, but I don't use it and I'm on Webpack. Even if I needed to do something to get the thing working, I have no clue what I need to do on my package.json/.babelrc/webpack.config.js etc, because the intro/tutorial didn't clarify it.
So, 1. What can I do to make the thing working? 2. Is there a decent official/non-official step by step doc/tutorial?; Thanks.
I am using razzle for my react js app. when I run razzle start --verbose I get
✖ Client
Compiled with some errors in 4.88s
✖ Server
Compiled with some errors in 1.46s
I do not however get what the errors are.I have tried to find a way to get errors to be revealed but have had no luck.
Does anyone know how to configure so that you actually get the errors output?
What has helped me before is to do npm run build or razzle build, which usually means I missed an import.
I am working on a react based frontend app that I am unit testing using mocha / enzyme.
The stack includes webpack, react, mocha + enzyme for testing, and firebase for auth / db / etc.
When I try and run npm test I get the following error due to firebase:
WEBPACK Compiled successfully in 3412ms
MOCHA Testing...
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'stringify' of undefined
at Module.eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:31:308)
at eval (webpack:///./node_modules/#firebase/webchannel-wrapper/dist/index.esm.js?:136:30)
...
npm ERR! Test failed. See above for more details.
What could be causing this error? This didn't happen before I imported firebase. Is there a webpack config I should tweak?
So, I've just figured this out. It seems to be an issue with how the tests are being loaded, causing the firebase package to be loaded in "web" mode even though the mocha test process is building in "node" mode... or something like that.
Anyways, here's the link that helped me solve this issue: https://github.com/firebase/firebase-js-sdk/issues/1455#issuecomment-455712500.
Essentially, ignore node modules (specifically firebase) when bundling.
I tried to get into react following the react tutorials and got it working, but when I started to go to the next step and use react-router through this tutorial I failed every time!
When I follow the instructions everything seems to be working OK, no errors on terminal, but I don't see any bundle.js files created in my project folder nor the localhost:8080 shows anything other than the following error in console:
GET http://localhost:8080/ net::ERR_EMPTY_RESPONSE
I tried installing npm locally and globally but none worked, same as webpack. Also I tried running the servers using webpack with the code webpack ./index.js bundle.js doesn't work either and throws the following error in terminal:
ERROR in multi main
Module not found: Error: Cannot resolve module 'bundle.js' in /Users/jafari/Desktop/React-Toturial/react-router-tutorial/lessons/01-setting-up
# multi main
While this code creates the bundle.js file and if I run this folder through MAMP on the localhost I can see the desired content of the tutorial, when I change anything in the App.js it doesn't take effect until I remove the bundle.js and do the process I mentioned earlier again in the terminal while still seeing the following error in the console:
bundle.js:49 Uncaught Error: Cannot find module "bundle.js"
And if I don't remove bundle.js I get this error in the console:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:(client) <div data-reactid="(server) <div data-reactid="
Any ideas? or alternatively any suggestion or tutorial on how to use react-router?
Try to change the port to something else with the command webpack-dev-server --port 3000 --inline --content-base
You can also substitute the npm start script in the package.json with that line.