I would like to configure component testing in Component Testing.
Frontend framework: React.js(detected); Bundler (Dev Server): Webpack(detected)
Next Step: all ok. webpack >=4.0.0; react >=16.x
Continue: I can see short the cypress.config.js in green and than:
Error:
You are using webpack for your dev server, but a configuration file was not found.
We traversed upwards from:
/home/projekte/bitbucket/teeth/cypress
looking for a file named:
webpack.config.ts
webpack.config.js
webpack.config.mjs
webpack.config.cjs
Add your webpack config at one of the above paths, or import your configuration file
and provide it to the devServer config as a webpackConfig option.
I have in /home/projekte/bitbucket/teeth/frontend/node_modules a webpack directory.
I can import the webpack.config.js in my cypress directory and this issue is not more present. But I think it is not so simple. What can I do for a correct using?
The frontend, backend and cypress are in the same directory.
I think you have to add a webpack.config.js file to you file directory to resolve the issue
Related
Importing local package dependencies throws
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/< path to js file >: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
but with any common js files that have jsx, I get the following message:
Repo structure:
root
common
svgs
package.json
*.js
scss
package.json
*.scss
site_0
package.json
src
index.js
site_1
package.json
src
index.js
site_* package.json dependency statements:
dependencies: {
"common-svgs": "file:../common/svgs"
}
site_* index.js import statement of common-* package
import "common-svgs/alert.js"
Importing common files like the above work for my common .scss files, but with any common js files that have jsx, I get the following message:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /< path to root >/common/svgs/alert.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
This link talks about editing webpack configuration, but I am using the default react-scripts webpack dev server.
In site_*/node_modules/react-scripts/config/webpack.config.js, the loader that processes javascript outside of the app scope does not ( compile ? ) jsx unlike the loader that process application javascript.
Question:
How do I process ( compile ? ) jsx files outside of the application scope that are local dependency imports without changing the webpack.config.js file in react-scripts ???
Possible ways to do it:
Is there a way to have a hook run before react-scripts start?
Is there a way to run a post npm install hook and alter react-scripts webpack.config.js?
Would it be better to build my common packages?
If yes, wouldn't I have to rebuild the common packages for changes?
I added
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
}
],
to the presets of the loader that processes javascript outside of the app scope... It works, but someone else who clones my app would not be able to render the project with the dev server right out of the box... also, there might be another reason why what i have done is wrong...
I've been trying out different project configurations, and I want to move all babel configuration to webpack config file. Here, I bundled up the demo, but sadly I could not make it run there, but it will work if you deploy it locally (I hope I didn't miss anything). As you can see, the webpack rule for babel from demo.config.js is the same as the contents of babel.config.js file, but when I remove babel file and try to run it, it prompts the following error:
import webpack from 'webpack';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I've seen many different configurations to make it work without babel config file, using ts-loader for example:
What is causing my tsx to render properly without babel in react app?
Demo for React Reload Replacement Plugin
Webpack base configuration for Trezor Suite build package
What am I missing here?
And one more question, is there a way to use TypeScript extension for webpack configuration file demo.config.js?
I am exploring this React project from the repo below and the process.env is not returning any values (undefined when I console logged them). The variables are declared in a .env.local file created at the root as per the repo's instructions and all prefixed by REACT_APP_ There is no webpack involved. It uses react-scripts to load with yarn start.
Can anyone advise why it is not working?
git clone https://github.com/figment-networks/learn-solana-dapp
Thanks:)
You could try without configuring dotenv first, by renaming .env.example to .env.local or any of the below link names, as I believe this was created with create-react-app(because of the presence of react-scripts)
https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
Although it has dotenv installed, it doesn't seem to use it, to use it one would do the following:
Add this to the beginning of index.js inside src:
import path from 'path';
import dotenv from 'dotenv';
dotenv.config({ path: path.join(__dirname, '../.env.example') });
dotenv has to be configured in order to use its variables, but shouldn't be needed under create-react-app
I have project and it is using storybook. It's been upgraded to version 5 of storybook and the project has a .babelrc file in its root.
When running storybook, it will run, but when you use Actions it throws errors - such as unexpected token.
I discovered that if the project .babelrc file is removed then storybook loads its default config, this then allows storybook to work as expected.
Storybook can use a .babelrc file from within the storybook folder so that it ignores the root project .babelrc file but what should go into that file so that it either loads the storybook default config or replicates the storybook default config?
Partial solution:
This doesn't make storybook load the default .babelrc file/config or copy whatever that may be, but I found that it was the react-hot-loader/babel plugin that was causing the issue.
So I removed that entry from my .babelrc file and storybook with Actions works fine now.
I am fiddling around with the following local drf-react setup. I'm really new to react and javascript overall and got absolutely no idea why I cannot import axios or any other node module for that matter in my react components, except for the modules that already shipped with the cookiecutter project itself. Is this related to the react-dev-utils..? I would like to use webpack, but I fail to set it up properly. My frontend docker container won't compose, telling me to install webpack-cli. Help is much appreciated.
https://github.com/moritz91/drf-react-app
You should run the command npm install inside your frontend folder:
Open the terminal
Find the frontend folder
Inside of it run the command npm install
This command will install the dependencies related to your package.json file, which is inside the frontend folder.
Inside your React files you will put the whole path to the node_modules folder.
The idea of using node_modules is to make it easier to control your dependencies in your project. You should consider again using webpack to handle these files from node_modules.
Wepack has a module called resolve which you have to fill with a list of directories and inside React components you don't need to use the whole path anymore, because Webpack will understand where to look:
// ALIAS
resolve: {
extensions: ['.js', '.jsx', '.scss'],
modules: [
'YOUR SOURCE FOLDER',
'YOUR NODE MODULES FOLDER',
'ANY OTHER FOLDER'
]
}
From the docs:
Tell webpack what directories should be searched when resolving modules.
The documentation: https://webpack.js.org/configuration/resolve/
Also, I have an example using Webpack + Bootstrap 4.
You can use to build your own Webpack config for React and Redux.
https://github.com/italoborges/webpack-bootstrap4-es6