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?
Related
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 a monorepository with 3 packages: gatsby app, CRA app and a components library.
Everything worked fine but at some point CRA started throwing errors:
Module parse failed: Unexpected token (3675:49)
File was processed with these loaders:
* ../../node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ../../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
I was using rollup to bundle components lib, but removed it at some point because gatsby app was able to import from the workspace as is, without build (there is a link in node_modules). I thought it was the case, maybe CRA webpack is handling files in a different way, so I added back rollup, but it didn't help. I also tried using older versions of react-scripts (4.0.3 -> 4.0.1), it didn't help either.
I've been immersing myself in react recently and have a question about react+scss.
I understand the difference between babel and webpack and their respective purpose when getting a react app to work in the browser. What I still don't understand is what's needed if I'm just trying to create a react npm package for react components.
My package at first only had a pure javascript/react component and I simply transpiled it with babel to commonJS, worked well. No webpack needed. I then added an additional component that now included scss:
import styles from '../styles/calendar.scss'
In package.json I added
"sass-loader" and "node-sass"
In storybook, everything works, but when I transpile my src directory with babel, the scss/css code is missing, which is obviously expected as babel is just a js transpiler.
My question is whether I really need webpack to get the scss in my react package working or if there is a way to do that purely with babel since so far I had no need for webpack. Babel transpile gave me nicely transpiled js files that still respected the folder structure of my src folder. I ideally don't want a completely bundled index.js file that has all in one.
Bottom line question, do you need more than pure babel as soon as you're dealing with scss?
Any help would be appreciated!
As far as I know, yes. You need more than just Babel if you want to deal with SCSS. The reason is that Babel is JavaScript compiler, which means it only compile JavaScript. For SCSS and other purpose, you need a bundler like Webpack.
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 wrote a JavaScript app using ES6. While this works fine when I run npm run serve, now I'm trying to prepare the files for production and upload to server.
When I tried jspm bundle and uploading to the server it failes on
babelHelpers is not defined
To my understanding this looks like transpilation is trying to run on runtime and then missing something.
If possible, I would like to transpile and then bundle the files
If not, how do I solve this babelHelper issue.
For now in my config.js only the transpiler is defined (babel). Perhaps I need to config it better using babelOption or other?