Martin J
Reputation: 2159
npm run build fails in bitbucket pipeline because it can't resolve some files
I made a react-app which I ejected. In my component file Grid.jsx there is :
import "./grid.scss";.
However, when I build with npm run build:dev, I have an error : ERROR in ./src/App/components/wall/grid/Grid.jsx
Module not found: Error: Can't resolve './grid.scss'.
I don't undestand because both files are in the same folder. Also, what is strange is that if I do my script npm run build:dev locally on my mac, everything works.
Can somebody help me find the error please? Thank you
Here is the full error :
+ npm run build:dev
[13:39:06] Starting 'build'...
[13:39:06] Starting 'clean'...
[13:39:06] Finished 'clean' after 12 ms
[13:39:06] Starting 'copy'...
[13:39:06] Finished 'copy' after 22 ms
[13:39:06] Starting 'bundle'...
(node:176) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Version: webpack 4.29.0
Time: 3609ms
Asset Size Chunks Chunk Names
main.5f3b72bf84d173109fc1.js 1.96 MiB main [emitted] main
main.5f3b72bf84d173109fc1.js.map 1.9 MiB main [emitted] main
vendors.5f3b72bf84d173109fc1.js 278 KiB vendors [emitted] vendors
vendors.5f3b72bf84d173109fc1.js.map 289 KiB vendors [emitted] vendors
ERROR in ./src/App/components/wall/grid/Grid.jsx
Module not found: Error: Can't resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
resolve './grid.scss' in '/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid'
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid)
Field 'browser' doesn't contain a valid alias configuration
using description file: /opt/atlassian/pipelines/agent/build/package.json (relative path: ./src/App/components/wall/grid/grid.scss)
no extension
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
.web.js
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js doesn't exist
.mjs
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json doesn't exist
.web.jsx
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss doesn't exist
as directory
/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss doesn't exist
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.js]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.mjs]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.js]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.json]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.web.jsx]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.jsx]
[/opt/atlassian/pipelines/agent/build/src/App/components/wall/grid/grid.scss.scss]
@ ./src/App/components/wall/grid/Grid.jsx 45:0-22
@ ./src/App/components/wall/Wall.js
@ ./src/App/App.js
@ ./src/index.js
Here is my steps of the pipeline :
pipelines:
branches:
develop:
- step:
name: Build Dev
caches:
- node
script: # Modify the commands below to build your repository.
- node -v
- npm set progress=false && npm install
- npm test
- npm run build:dev
artifacts:
- build/**
And here is my webpack config:
const webpack = require('webpack');
const path = require('path');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
// import React from 'react';
// import ReactDOM from 'react-dom';
// plugins
const CleanWebpackPlugin = require('clean-webpack-plugin');
const AutoCleanBuildPlugin = require('webpack-auto-clean-build-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const AssetsWebpackPlugin = require('assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const JavaScriptObfuscator = require('webpack-obfuscator');
const BuildInfo = require('./tools/build-info');
const version = process.env.RELEASE_TAG || BuildInfo.releaseTag;
// Get environment variables to inject into our app.
const getClientEnvironment = require('./config/env');
const env = getClientEnvironment('');
const DEBUG = !process.argv.includes('--production') && process.env.NODE_ENV !== 'production';
const ANALYSER = process.argv.includes('--analyse');
const VERBOSE = process.argv.includes('--verbose');
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG
};
//
const config = {
mode: DEBUG ? 'development' : 'production',
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
// context: path.resolve(__dirname, 'src'),
entry: {
main: path.resolve(__dirname, './src/index.js'),
vendors: ['react', 'react-redux', 'redux', 'react-router']
},
resolve: {
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', ".scss"],
},
// resolve: {
// extensions: ['.js', '.jsx']
// },
output: {
path: path.resolve(__dirname, './build/public/assets'),
publicPath: './assets/',
sourcePrefix: ' ',
filename: '[name].[hash].js',
},
target: 'web',
stats: {
// fallback value for stats options when an option is not defined (has precedence over local webpack defaults)
all: undefined,
// Add asset Information
assets: true,
// Sort assets by a field
// You can reverse the sort with `!field`.
assetsSort: "field",
// Add build date and time information
builtAt: false,
// Add information about cached (not built) modules
cached: false,
// Show cached assets (setting this to `false` only shows emitted files)
cachedAssets: false,
// Add children information
children: false,
// Add chunk information (setting this to `false` allows for a less verbose output)
chunks: false,
// Add namedChunkGroups information
chunkGroups: false,
// Add built modules information to chunk information
chunkModules: false,
// Add the origins of chunks and chunk merging info
chunkOrigins: false,
// Sort the chunks by a field
// You can reverse the sort with `!field`. Default is `id`.
chunksSort: "field",
// `webpack --colors` equivalent
colors: true,
// Display the distance from the entry point for each module
depth: false,
// Display the entry points with the corresponding bundles
entrypoints: false,
// Add --env information
env: false,
// Add errors
errors: true,
// Add details to errors (like resolving log)
errorDetails: true,
// Add the hash of the compilation
hash: false,
// Set the maximum number of modules to be shown
maxModules: 15,
// Add built modules information
modules: false,
warnings: false,
},
module: {
strictExportPresence: true,
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
// { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader?url=false", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.css$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader?url=false", // translates CSS into CommonJS
]
},
{
test: /\.jsx?$/,
loader: 'babel-loader', /**/
include: [
path.resolve(__dirname, 'src'),
],
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: DEBUG,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
'transform-runtime',
[
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements',
],
],
},
},
{
test: /\.(jpe?g|png|gif|svg)$/,
use: 'url-loader?limit=100000'
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=100000'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.txt$/,
loader: 'raw-loader'
},
]
},
// devtool: 'source-map',
plugins: [
new CaseSensitivePathsPlugin(),
// webpack 3 scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
...GLOBALS,
'process.env.BROWSER': true,
'process.env.API_URL': JSON.stringify(process.env.API_URL),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.VERSION': JSON.stringify(version),
...env.stringified
}),
//
new ExtractTextPlugin({
filename: '[name]-[chunkhash].css',
disable: false,
allChunks: true
}),
// Plugin to replace a standard webpack chunk hashing with custom (md5) one.
new WebpackChunkHash({
algorithm: 'md5'
}),
// save stats
new AssetsWebpackPlugin({
filename: 'build/public/webpack-assets.json'
})
],
optimization: {
splitChunks: {
chunks: 'async',
minSize:
30000,
maxSize:
0,
minChunks:
1,
maxAsyncRequests:
5,
maxInitialRequests:
3,
automaticNameDelimiter:
'~',
name:
true,
cacheGroups:
{
vendors: {
test: /[\\/]node_modules[\\/]/,
priority:
-10
}
,
default:
{
minChunks: 2,
priority:
-20,
reuseExistingChunk:
true
}
}
}
,
occurrenceOrder: DEBUG,
minimizer:
[
new UglifyJsPlugin({
parallel: true,
sourceMap: false,
uglifyOptions: {
mangle: false,
beautify: DEBUG,
minimize: !DEBUG,
// Eliminate comments
comments: false,
// Compression specific options
compress: {
warnings: false,
// Drop `console` statements
drop_console: DEBUG
}
}
})
]
}
,
externals: {
// "react": "React",
// "react-dom": "ReactDOM"
}
}
;
// DEV ONLY Configuration
// Add a bundle analyser viewer
if (ANALYSER) {
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false
}));
}
if (!DEBUG) {
console.log("Obfuscating ...");
config.plugins.push(new JavaScriptObfuscator({
rotateUnicodeArray: true
}));
}
module.exports = config;
Upvotes: 0
Views: 6397
Answers (1)
Martin J
Reputation: 2159
Ok, sorry, it is because the grid.scss was not pushed to the remote repository because the ignoreCase in the .git config was set to true. So somehow it was ignore by git. Thats why it worked locally but not in the pipeline.
Upvotes: 2
Related Questions
- BitBucket Pipelines failing to build production Angular code (staging and local machine working)
- BitBucket pipeline shows npm: command not found
- Unable to run npm command in bitbucket pipeline
- npm install error in Bitbucket CI/CD pipeline
- Bitbucket Pipelines run npm fails
- calling npm run lint from bitbucket pipeline resulting error
- Bitbucket pipeline reactjs build error
- Angular Bitbucket Pipeline unable to run ng build
- npm ci not working on bitbucket pipeline?
- BitBucket pipeline is not using cache for npm install