Error bundling with webpack
neilmcdonald95 opened this issue · comments
Summary
Generating a webpack config completely breaks the app for web, even if I leave it blank/default.
Environment
expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.22000
Binaries:
Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: AI-212.5712.43.2112.8609683
npmPackages:
@expo/webpack-config: ^0.17.4 => 0.17.4
expo: ~47.0.12 => 47.0.12
react: 18.1.0 => 18.1.0
react-dom: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-web: ~0.18.9 => 0.18.10
Expo Workflow: bare
Please specify your device/emulator/simulator platform, model and version
Local web server (npx expo start --web)
Error output
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:- configuration.node has an unknown property 'module'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'dgram'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'dns'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'fs'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'http2'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'net'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'tls'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features. - configuration.node has an unknown property 'child_process'. These properties are valid:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
- configuration.node has an unknown property 'module'. These properties are valid:
Reproducible demo or steps to reproduce from a blank project
- npm install @expo/webpack-config
- npx expo customize webpack.config.js
- npx expo start --web
Same
@neilmcdonald95 These issues are due to an incompatibility between webpack 4 and webpack 5: https://webpack.js.org/configuration/node/. Make sure you are using Webpack 4 for these to go away.
They are being worked on in the following PR. #2881. I tried getting webpack 5 working, and managed to get past that but hit many other walls. If you'd like to get past that error, you'll need to override them in the config the helper generates in your webpack config by modifying the config.node object to be an empty object and adding those properties to config.resolve
This is really awkward. I had something which compiled perfectly 6 days ago, but trying to compile (via the same CI tool) exactly the same commit of my repo fails with this error.
Now using Webpack 5 #3763
@EvanBacon This is still an issue. I don't think this should have been closed.
Running the latest expo-cli version, 6.2.1, and the latest @expo/webpack-config version 18.0.1, I'm getting this error when I create a webpack.config.js with expo customize:web. The file looks like the following, which is the same as before (pre-webpack5 support):
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
return config;
};
Here's the error message:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module.rules[1].oneOf[4].type should be one of these:
"javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental"
-> Module type to use for the module
- configuration.output has an unknown property 'uniqueName'. These properties are valid:
object { auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, futureEmitAssets?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
-> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
- configuration.target should be one of these:
"web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload" | function
-> Environment to build for
Details:
* configuration.target should be one of these:
"web" | "webworker" | "node" | "async-node" | "node-webkit" | "electron-main" | "electron-renderer" | "electron-preload"
* configuration.target should be an instance of function
When I delete the webpack.config.js file, everything works.
I was wrong! Forget my message above. I had two versions of expo-cli installed (a global and a local one). Made sure all were updated to 6.2.1 and now bundling works!
This is really awkward. I had something which compiled perfectly 6 days ago, but trying to compile (via the same CI tool) exactly the same commit of my repo fails with this error.
Me too. I am using AWS Amplify. I built successfully on 1/26/2023, 4 days ago. Now it fails on the above error. My package-lock.json says my webpack is locked to "4.43.0" but apparently @expo/webpack-config pulls in Webpack 5? Not sure how to go about solving this with the least amount of change/risk as the project I'm working on is supposed to be in maintenance mode.
@jrc we ran into same thing and I've been thinking about how this can be avoided. It feels like either semantic versioning is not being used properly or the webpack folks didn't deem it important to support older schemas. Either way this is a situation that can bite you and I came up with a number of scenarios. Fortunately, it only came at the cost of a few hours.
Here is the updated ampify.yml basically removing webpack if its there and installing version 4. Also, we pinned the webpack config dependency to "@expo/webpack-config": "0.17.2", which is what we had been using. This may have been unnecessary. Also, switched to using npx as suggested by the expo-cli.
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
- nvm use 16
- npm install --silent --global expo-cli
- npm remove --global webpack
- npm install --global webpack@4.46.0
- npm list -g
- |-
if [ -f yarn.lock ]; then
yarn
elif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then
npm ci
else
npm install
fi
build:
commands:
- "npx expo export:web"
artifacts:
baseDirectory: web-build
files:
- "**/*"
cache:
paths:
- node_modules/**/*
- $(npm root --global)/**/*
Alternatively, you may be able to install expo-cli into your project and not use the global install, as one of my sharper-than-I colleagues pointed out.
@dan-doyon-endear Thanks so much. You saved me plenty of head-bashing in trying to debug this.
I ended up pinning expo-cli in my amplify.yml like this for now:
@@ -3,7 +3,8 @@ frontend:
phases:
preBuild:
commands:
- - npm install --quiet --global expo-cli
+ # Pinning to 6.1.0 to avoid https://github.com/expo/expo-cli/issues/4627
+ - npm install --quiet --global expo-cli@6.1.0
- >
if [ -f yarn.lock ]; then
yarn
Getting a similar error with AWS Amplify.
2024-01-14T05:31:59.974Z [INFO]: # Executing command: nvm use 10
2024-01-14T05:32:06.026Z [INFO]: Now using node v10.24.1 (npm v6.14.12)
2024-01-14T05:32:06.027Z [INFO]: # Executing command: npm install --silent --global expo-cli
2024-01-14T05:32:43.974Z [INFO]: /root/.nvm/versions/node/v10.24.1/bin/expo -> /root/.nvm/versions/node/v10.24.1/lib/node_modules/expo-cli/bin/expo.js
2024-01-14T05:32:43.975Z [INFO]: /root/.nvm/versions/node/v10.24.1/bin/expo-cli -> /root/.nvm/versions/node/v10.24.1/lib/node_modules/expo-cli/bin/expo.js
2024-01-14T05:32:44.173Z [INFO]: + expo-cli@6.3.10
added 983 packages from 595 contributors in 34.238s
2024-01-14T05:32:44.198Z [INFO]: # Executing command: if [ -f yarn.lock ]; then
yarn
elif [ -f package-lock.json ] || [ -f npm-shrinkwrap.json ]; then
npm ci
else
npm install
fi
2024-01-14T05:32:44.630Z [WARNING]: npm
2024-01-14T05:32:44.631Z [WARNING]: WARN prepare removing existing node_modules/ before installation
2024-01-14T05:32:46.773Z [WARNING]: npm
2024-01-14T05:32:46.773Z [WARNING]: ERR! Cannot read property '@expo/webpack-config' of undefined
2024-01-14T05:32:46.784Z [WARNING]:
2024-01-14T05:32:46.784Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2024-01-14T05_32_46_773Z-debug.log
2024-01-14T05:32:46.784Z [HELP]: Outputting the npm debug log
[object Promise]
2024-01-14T05:32:46.791Z [ERROR]: !!! Build failed
2024-01-14T05:32:46.791Z [ERROR]: !!! Non-Zero Exit Code detected
2024-01-14T05:32:46.792Z [INFO]: # Starting environment caching...
2024-01-14T05:32:46.792Z [INFO]: # Environment caching completed
Terminating logging...