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.
Related
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
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've a react app created using create-react-app. I recently saw some article saying to add few loaders to webpack config file. But I've no idea where to find the webpack.config.js file inside a react project.
Really appreciate any ideas or suggestions.
Webpack config is not available in CRA. If you want to get one, you have to do an eject (https://create-react-app.dev/docs/available-scripts/), but if you don't need to make eject, or you don't wanna do this, you can use the library which is the wrapper of CRA, for example: CRACO or rewrite
I have created a local node module and I have configured the webpack to consider this module (module is in src/component):
modules: ['node_modules', 'src/components'].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
)
While starting the project, babel does not transpile my react stateless function and I get an unexpeted token error in my jsx syntax.
When I don't use a node module and I remove the local package.json file, everything works fine.
How can I solve this problem?
See Babel's documentation for monorepo structures (repos with multiple packages).
The short answer is, convert your .babelrc to a babel.config.js file and put that in your project root. .babelrc files are scoped to a specific package, so there is no way to use a .babelrc to configure your src/components/foo package.
I am using the jsx-control-statements node module for React with webpack.
Normally this works great, but when I copied my project to another folder and ran npm install using the same package.json as before, jsx-control-statements doesnt seem to be getting recognized by webpack.
jsx-control-statements is meant to desugar the tags in the render() and turn it into code react recognizes. Its not doing that in this case.
I see the final code running in the inspector that 'Choose' was never transpiled into valid code.
_react2.default.createElement(Choose, null,
The error I am getting is:
Uncaught ReferenceError: Choose is not defined
webpack.config.js and package.json and my source code for the app are unchanged. from a working app and this new one in another folder.
I have tried:
installing jsx-control-statements manually locally and globally.
copying and pasting the entire node_modules folder from the good project into this new project.
Run eslint with eslint-jsx-control-statements plugin, no errors
Still the problem persists. I believe their is a problem in the building of project, but I am out of ideas what to try next.
The issue was simple as I felt it would be. I was missing a tiny .babelrc file which included a plugin reference to jsx-control-statements
{
// my babel config here
"plugins": ["jsx-control-statements"]
}
Just need to put this file at my root next to webapck.config.js