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?
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.
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 trying to compile my first React Native project, and it all works fine from the CLI, until I try to install a new library.
After installing any library, I get various errors, culminating in this:
error: bundling failed: Error: While trying to resolve module `react` from file `/Users/myname/Desktop/Projects/ProjectName/App.js`, the package `/Users/myname/Desktop/Projects/ProjectName/node_modules/react/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/myname/Desktop/Projects/ProjectName/node_modules/react/index.js`. Indeed, none of these files exist:
I have, indeed, confirmed that those files exist.
What is going on here? I'm constantly having these errors as I am trying to use React Native, even when rebuilding the app multiple times and trying over.
Do the following steps:
Stop metro bundler
Delete node_modules folder
cd into your project folder and run:
'npm install'
I have created a react project using Create-React-App and now would like generate the production build. When I use npm run build I am getting the error:
Failed to minify the code from this file:
./node_modules/pify/index.js:3
Create-React-App suggests the following corses of action:
To resolve this:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
will take to long and seems to already be a issue (#50) raised for pify.
I am not sure how I would approach but I think it may be the best option
is not going to work because it is a dependency of a different package.
What I am looking for is come guidance on how to solve this solution before I use option 2 and rewrite a whole package.
I belive the solution would involve ejecting from create-react-app and messing with the webpack config file.
I am trying to setup an server rending react using react-router-4. While it works just fine on the front-end side (Webpack). It appears that preact-compat is not working when used in the server side. I am using babel-register so transpile the code.
I have a branch here for reference:
https://github.com/abarcenas29/preact-sandbox-v0/tree/wip/isomorphic-react
to run:
yarn run install
yarn run start:prod
go to localhost:3100
Using Babel to alias a dependency doesn't make sense, because Babel does not run on your dependencies (in node_modules). Use something like module-alias instead.
Full answer to the same question is on Github: https://github.com/developit/preact-compat/issues/390#issuecomment-304334947